Definition

Mouseover (Mouse Over) oder Hover-Effekt bezeichnet eine spezielle Technik bei der Webseiten-Gestaltung, die bei verschiedenen Elementen wie Text, Grafik, Button oder Banner zum Einsatz kommen kann.

Sobald der Nutzer mit dem Maus-Zeiger über ein mit dem Mouse Over Effekt versehenes Element fährt, verändert sich dieses. So kann hierbei beispielsweise eine zuvor noch nicht sichtbare Grafik erscheinen, sich ein Werbemittel vergrößern (Medium Rectangle, Skyscraper) oder eine Farbänderungen erfolgen. Als Gestaltungstechnik kann diese Funktion auch bei Navigationselementen verwendet werden, um die jeweiligen Auswahlmöglichkeiten für den Nutzer besser darzustellen.

Aussehen

Wie ein Mouseover-Effekt aus? Die folgende Grafikanimation verdeutlicht es: Sobald die Maus über das Icon fährt, ändert sich dessen innere Farbe und gleichzeitig wird das „Finger-Icon“ weiß. Gut zu sehen ist dieser Effekt auf unseren Unterseiten für Designkategorien. Dort nutzen wir den unten abgebildeten Effekt für eine intuitivere Navigationsführung.

Praktisches-Beispiel-Andere-Iconafarbe-Mouseover

Beispiele: Mouseover

<!-- 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');
 });