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:

google-ranking-system-update

Neues Googles Ranking-System: Was es jetzt zu beachten gilt

| SEO | Keine Kommentare
Google sorgt für einiges an Verwirrung…
Die Zukunft des Marketings - Al als treibende Kraft

Die Zukunft des Marketings: AI als treibende Kraft

| AI | Keine Kommentare
Artificial Intelligence (AI; dt. KI, künstliche…
40 besten Marketing Prompts ChatGPT

Die 40 besten Marketing-Prompts für ChatGPT

| AI | Keine Kommentare
Die künstliche Intelligenz (KI; engl. AI…