Defini­tion

Mouseo­ver  (auch Mouse Over, Hover-Effekt oder Rollover) bezeich­net eine spezi­elle Technik bei der Websei­ten-Gestal­tung, die bei verschie­de­nen Elemen­ten wie Text, Grafik, Button oder Banner zum Einsatz kommen kann.

Sobald der Nutzer mit dem Maus-Zeiger über ein mit dem Mouse Over Effekt verse­he­nes Element fährt, verän­dert sich dieses. So kann hierbei beispiels­weise eine zuvor noch nicht sicht­bare Grafik erschei­nen, sich ein Werbe­mit­tel vergrö­ßern (Medium Rectangle, Skyscra­per) oder eine Farbän­de­run­gen erfol­gen. Als Gestal­tungs­tech­nik kann diese Funktion auch bei Naviga­ti­ons­ele­men­ten verwen­det werden, um die jewei­li­gen Auswahl­mög­lich­kei­ten für den Nutzer besser darzu­stel­len.

Ausse­hen

Wie sieht ein Mouseo­ver-Effekt aus? Bild-Beispiel: Die folgende Grafik­ani­ma­tion verdeut­licht es: Sobald die Maus über das Icon fährt, ändert sich dessen innere Farbe und gleich­zei­tig wird das “Finger-Icon” weiß. Gut zu sehen ist dieser Effekt auf unseren Unter­sei­ten für Design­ka­te­go­rien. Dort nutzen wir den unten abgebil­de­ten Effekt für eine intui­ti­vere Naviga­ti­ons­füh­rung.

Praktisches-Beispiel-Andere-Iconafarbe-Mouseover

Beispiele: Mouseo­ver

<!-- Direct usage is not recommended. It does not conform with web standards. -->
<img id="myImage" src="/images/myImage.jpg" onMouseOver="alert('your message');">
// JavaScript code without any framework
 var myImg = document.getElementById('myImage');
 function myMessage() {
 alert('your message');
 }

if(myImg.addEventListener) { //addEventListener is the standard method to add events to objects.
 myImg.addEventListener('mouseover', myMessage, false);
 }

else if(myImg.attachEvent) { //For Internet Explorer
 myImg.attachEvent('onmouseover', myMessage);
 }

else { //For other browsers
 myImg.onmouseover = myMessage;
 }
// jQuery example. It degrades well if JavaScript is disabled in the client browser.
 $("img").mouseover(function(){
 alert('your message');
 });