Hover.- MouseOver-Technik [IE|M|O|S|G]

von: Werner Zenk

Drei verschiedene Button-Techniken, zum Beispiel für Menüs.

• Im ersten Beispiel, werden zwei Grafiken bei "Mouseover" ausgetauscht.


<span onMouseOver="document.Bild.src='bild2.gif'" onMouseOut="document.Bild.src='bild3.gif'"> <a href=""> <img src="bild3.gif" name="Bild" border="0"> </a> </span>

• Das zweite Beispiel, zeigt eine Grafik die bei "Mouseover" mit einer
anderen Hintergrundfarbe belegt wird (die Grafik hat einen transparenten Rahmen).


<span onMouseOver="document.getElementById('Bild').style.backgroundColor='#FFD700';" onMouseOut="document.getElementById('Bild').style.backgroundColor='#0000F0';"> <a href=""> <img src="bild.gif" id="Bild" border="0" style="background: #0000F0"> </a> </span>

<span
 onMouseOver="document.getElementById('Bild').style.backgroundColor='#FFD700';"
 onMouseOut="document.getElementById('Bild').style.backgroundColor='#0000F0';">

<a href="">
 <img src="bild.gif" id="Bild" border="0" style="background: #0000F0">
</a>
</span>

• Im dritten Beispiel kommt CSS zum Einsatz, das funktioniert ganz ohne Bilder.

Javascript

<style type="text/css">
a.Navi:link, a.Navi:visited {
 font-size: 8pt; font-family: Verdana; text-decoration: None;
 border: Solid 1px #0000F0;
 background: #041C3C; color: #FFFFFF; padding: 2px
}

a.Navi:hover {
 font-size: 8pt; font-family: Verdana; text-decoration: None;
 border: Solid 1px #FFD700;
 background: #041C3C; color: #FFFFFF; padding: 2px
}
</style>

<a href="#" class="Navi">Javascript</a>

Und Ihre Meinung? Sie vermissen auf dieser Seite wichtige Informationen oder haben Hinweise für uns?

Sebastian: Vielleicht sollte man noch sagen, dass man nach Möglichkeit immer Beispiel 3 nehmen sollte, wenn man nicht einen bestimmten Effekt braucht. Der geht beim User am schnellsten und braucht keine "großen" Bilder.
Hilfe finden Sie im » netzgemein.de - Forum. Auch als „Gast” können Sie dort Fragen stellen!

Das könnte Sie interessieren:

CSS Hyperlink #22

CSS Hyperlink #15

CSS Hyperlink #44

CSS Hyperlink #1

Zeilenumbruch bei Links verhindern

CSS Hyperlink #23

Uhrzeitanzeige mal anders!

CSS kürzen

Bildergröße über "em" automatisch an der Textgröße anpassen

CSS abkürzen (Effizientes CSS) - In CSS Ist es möglich umfangreiche Definitionen, die das gleiche Element beschreiben, zusammenzufassen.

CSS Hyperlink #8 …mehr