Normalerweise werden die meisten Mouseover Effekte, z.B. in dem Hauptmenü einer Homepage mit JavaScript oder JavaAppletts realisiert.
Diese Scripts sind jedoch meist sehr träge und selbst für einfache Funktionen braucht man vergleichsweise viel Code.
Die wenigstens wissen, dass man einen simplen Grafiktausch beim überfahren, anklicken oder beim bereits getätigten Besuch des Links auch mit CSS verwirklichen kann.
1. Zuerst wird folgender Text in den <head> </head> Bereich einfügen:
<style type="text/css">
a { display:block;background-image:url(button.png);width:120px;height:30px }
a:hover { background-image:url(button_hover.png); }
</style>
In diesem CSS Quelltext steht die Grafikdateien "button.png" für den Button im Normalzustand und "button_hover.png" für den Button bei Mauskontakt.
2. Nun kann man an einer beliebigen Stelle des Dokuments einen Hyperlink mit
<a href="http://"></a>
erzeugen, und schon haben wir an dieser Stelle einen Button, der sich verändert, wenn wir mit dem Mauszeiger darüber fahren.
3. Wenn man mehrere Buttons in einer Website benutzen will, z.B. als Menü, dann setzt man die CSS Eigenschaft "class" ein, hier ein Beispiel:
<style type="text/css">
a.btn1 { display:block;background-image:url(btn1.png);width:150px;height:20px }
a.btn1:hover { background-image:url(btn1_hover.png); }
a.btn2 { display:block;background-image:url(btn2.png);width:150px;height:20px }
a.btn2:hover { background-image:url(btn2_hover.png); }
a.btn3 { display:block;background-image:url(btn3.png);width:150px;height:20px }
a.btn3:hover { background-image:url(btn3_hover.png); }
</style>
und als Hyperlinks einfach an der richtigen Stelle (also z.B. in eurem Menu Frame):
<a class="btn1" href="http://"></a>
<a class="btn2" href="http://"></a>
<a class="btn3" href="http://"></a>
a.btn1:hover { display:block;background-image:url(btn1.png);width:150px;height:20px }
*a* steht für die Objekttypen, also in dem Fall unser Hyperlink
*.* der Punkt leitet die Klasse ein, hier also "btn1"
*btn1* die Klasse
*:* der Doppelpunkt leitet den Zustand des Objektes ein
*hover* ist ein Zustand eines Hyperlinks:
" " = freigelassener Platz bedeutet ein Verweis im Ursprungszustand
"link" = ein Verweis zu einer noch nicht besuchten Seite
"visited" = ein Verweis zu einer bereits besuchten Seite
"active" = ein Verweis, wenn er angeklickt wird oder ist
"hover" = ein Verweis, der gerade mit der Maus überfahren wird
Selbstverständlich kann auch einer der anderen Zuständen eingesetzt werden, sodass sich der Verweis z.B. erst ändert, wenn er angeklickt wird.
Viel Spass
by messiah