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 zum Beispiel mit dem Maus-Zeiger oder einem digita­len Stift über ein mit dem Mouse Over Effekt verse­he­nes Element fährt (Trigger­be­reich), verän­dert sich dieses. Auf diese Weise 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 und eine Form von Naviga­tion-Feedbacks darstellen.

Ausse­hen

Wie sieht ein Mouseo­ver-Effekt aus? Die folgende Grafik­ani­ma­tion verdeut­licht es. Sobald der Mauszei­ger über das Icon mit dem Zeige­fin­ger fährt, ändert sich dessen innere Farbe und gleich­zei­tig wird das Icon weiß. Gut zu sehen ist dieser Effekt auf den Kacheln unserer Unter­seite für gratis Bilder. Dort wird der unten abgebil­dete Effekt für eine intui­ti­vere und übersicht­li­che Naviga­ti­ons­füh­rung genutzt.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');
 });

 

Mehr aus der Welt des Online-Marketing: