Skip to main content

 

Definition

Mouseover (auch Mouse Over, Hover-Effekt oder Rollover) 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 zum Beispiel mit dem Maus-Zeiger oder einem digitalen Stift über ein mit dem Mouse Over Effekt versehenes Element fährt (Triggerbereich), verändert sich dieses. Auf diese Weise 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 und eine Form von Navigation-Feedbacks darstellen.

Aussehen

Wie sieht ein Mouseover-Effekt aus? Die folgende Grafikanimation verdeutlicht es. Sobald der Mauszeiger über das Icon mit dem Zeigefinger fährt, ändert sich dessen innere Farbe und gleichzeitig wird das Icon weiß. Gut zu sehen ist dieser Effekt auf den Kacheln unserer Unterseite für gratis Bilder. Dort wird der unten abgebildete Effekt für eine intuitivere und übersichtliche Navigationsführung genutzt.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');
 });

 

Mehr aus der Welt des Online-Marketing: