Mouseover bei eigenen Bildern?

[mps]

Hallo zusammen,

die Suche hat leider nichts gebracht. Ich habe eine Frage...

Ist es irgendwie möglich, ein Mouseover bei Grafiken einzufügen, die man selber in das Forum intigriert? Also wenn ich eigene Buttons gestalte und im Bildmanager oder auf meinem Server hochlade, dann gibt es keine Mouseover-Möglichkeit. Die muss es aber geben. Siehe die Buttons hier.

Vielen Dank für eure Antworten.

Gruß,
mps

[Crizzo]

Hi,

welche Grafiken meinst du? Und welchen Hover-Effekt hast du dir denn vorgestellt?

Grüße

[Miriam]

Meinst Du evtl. das title Attribut? (http://de.selfhtml.org/html/attribute/allgemeine.htm)

[mps]

Hallo,

danke für die Antworten. Nein das title-Attribut meine ich nicht. Ich meinte wie hier zum Beispiel den Antworten erstellen Button. Der ändert sich, wenn man mit der Maus drüber fährt. Wenn man einen eigenen Button gestaltet, geht das ganze leider nicht mehr. Gibt es dort irgendeine Möglichkeit?

Gruß,
mps

[Pfiffy]

Der "Antworten"-Button hier ist eine PNG-Grafik, die per CSS geswitcht wird. Schau dir einfach den Quelltext der entsprechenden Seite und der zugehörigen css-Datei an, dann wirst du fündig und kannst es nach deinen eigenen Bedürfnissen nachbauen.

Grücce
Pfiffy

[sladdicool]

Hallo!
Die "Button" sehen so aus:
[ externes Bild ]
Das ist ein Button!

Die Button findest du unter styles/dein style/imageset...

LG
S

[Lehrling]

Hallo,

das könnte dir weiterhelfen:

viewtopic.php?f=93&t=189817

LG Beate

[mps]

Hallo,

danke sehr. Werde mich in der nächsten Zeit mal mit befassen mit.

Gruß,
mps

[Lehrling]

EDIT: hab was vergessen - siehe ganz unten

Hallo,
es gibt zwei Möglichkeiten, um einen mouseover-Effekt zu erzielen.
Die erste: du erstellst zwei Bilder, die gleich groß sind. Dann baust du folgenden Code in dein Stylesheet ein (Größe und Name des Bildes musst du natürlich anpassen):

Code: Alles auswählen

a.bild       { display:block;
             background-image:url(button1.png);
             width:100px; height:50px }

a.bild:hover { background-image:url(button2.png); }

Auf deiner Seite muss dann dieser Code eingebaut werden:

Code: Alles auswählen

<a class="bild" href="url"></a>

Die zweite Möglichkeit sieht so aus, dass du ein Bild erstellst, auf dem beide buttons zu sehen sind. Dieses Bild verschiebst du per CSS. Der Vorteil dieser Methode gegenüber der ersten ist der, dass die Ladezeit verkürzt wird, da pro button nur ein Bild geladen werden muss. Bei der ersten Methode müssen zwei Bilder geladen werden. Die Methode des Verschiebens ist auch als Rollover-Effekt bekannt und die übliche Hover-Methode bei prosilver (bei den buttons natürlich). Deswegen sehen die buttons ja so interessant aus. Jemand hat ja schon ein Bild hier verlinkt. Ich setze den Link hier noch einmal rein:
http://img5.fotos-hochladen.net/uploads ... h1xsrz.gif

Bei der Erstellung dieses buttons ist Präzision nötig, sonst wackelt am Ende dein Button, wenn er rollt.

Der Code fürs Stylesheet sieht in diesem Falle so aus:

Code: Alles auswählen

a.bildroll      { display:block;
             background-image:url(buttonroll.png);
             width:100px; height:50px }
			 
a.bildroll:hover { background-position:  0 -50px;  }
   

Und auf deiner Seite musst du diesen Code einbauen:

Code: Alles auswählen

<a class="bildroll" href="url"></a>

Wichtig bei dieser Methode ist, dass bei der background-position des hover-Befehls die Höhe des Buttons steht. In unserem Fall ist der button 50px hoch, also musst du bei der background-positon -50px; eingeben. Hat dein button eine andere Höhe, musst du das natürlich anpassen. Das Minuszeichen ist ganz wichtig. Ohne Minuszeichen kein Hovereffekt.
Wenn du in den hover-Code noch das einbaust

a.bildroll:hover { background-position: 0 -50px; transition: 2s; }

dann kannst du sehen, wie der button rollt. Das geht übrigens auch mit den buttons bei prosilver. Sieht ganz witzig aus. Einfach in der theme/buttons.css oben im Stylesheet den transition-Befehl einbauen:

.buttons div a:hover span { background-position: 0 100%; transition: 2s; }

Nachtrag: der rollover-Button muss natürlich in unserem Falle 100 px hoch sein. Das heißt, im Normalzustand sieht man die obere Hälfte und im Hover-Zustand die untere Hälfte. Also der Button ist 100px hoch, im Stylesheet jedoch wird die halbe Höhe angegeben (in unserem Fall 50px). Diese Angaben musst du natürlich anpassen.

Viel Erfolg und LG
Beate

[mps]

Hallo,

auch dir noch einmal danke. Klingt ganz simpel

Gruß,
mps