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:
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:
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
![[ externes Bild ]](http://img5.fotos-hochladen.net/uploads/buttontopicrekt4ih1xsrz.gif){kind=link}