Mouseover - Mouseover

Beim Rechnen ist ein Mouseover , Mouse Hover oder Hover Box ein grafisches Steuerelement , das aktiviert wird, wenn der Benutzer den Zeiger über einen Triggerbereich bewegt oder bewegt , normalerweise mit einer Maus , aber auch mit einem digitalen Stift . Mouseover-Steuerelemente sind in Webbrowsern üblich . Wenn Sie beispielsweise den Mauszeiger über einen Hyperlink halten, zeigt das Mouseover-Steuerelement eine URL in der Statusleiste an . Site-Designer können ihre eigenen Mouseover-Ereignisse mithilfe von JavaScript oder Cascading Style Sheets definieren .

Mouseover- Ereignisse werden häufig im Webdesign und in der grafischen Programmierung von Benutzeroberflächen verwendet .

Es wird auch als Rollover bezeichnet. Dies bezieht sich auf eine Schaltfläche, die von einem Webentwickler oder Webdesigner innerhalb einer Webseite erstellt wurde und zur Bereitstellung von Interaktivität zwischen dem Benutzer und der Seite selbst verwendet wird. Der Begriff Rollover in dieser Hinsicht stammt aus dem visuellen Prozess des "Bewegens des Mauszeigers über die Schaltfläche", wodurch die Schaltfläche reagiert (normalerweise visuell, indem das Quellbild der Schaltfläche durch ein anderes Bild ersetzt wird) und manchmal zu einer Änderung im Web führt Seite selbst. Der Teil des Begriffs "Rollen" bezieht sich wahrscheinlich auf ältere Mäuse, die eine mechanische Anordnung hatten, die aus einem harten Gummiball bestand, der in der Basis der Maus (die rollt) untergebracht war, im Gegensatz zu der modernen optischen Maus, die keine rollenden Teile aufweist.

Rollover können über Bilder, Text oder Schaltflächen erfolgen. Der Benutzer benötigt nur zwei Bilder / Schaltflächen (mit der möglichen Hinzufügung von "Alt" -Text zu diesen Bildern), um diese interaktive Aktion auszuführen. Rollover-Bilder können entweder von einem Programm mit einem integrierten Tool oder einer Skriptcodierung erstellt werden. Der Benutzer muss ein erstes Bild auswählen und ein alternatives sekundäres Bild auswählen. Eine Mausaktion muss entweder auf "Klicken" oder "Überfahren" eingestellt werden, damit der Rollover ausgelöst wird. Wenn Sie mit der Maus über das Bild fahren, wird das Alternativbild / Sekundärbild angezeigt, bleibt jedoch nicht erhalten. Wenn der Benutzer durch Bewegen der Maus vom Bild weg "mauset", wird das ursprüngliche Quellbild erneut angezeigt.

Tooltip

Eine spezielle Verwendung des Mouseover-Ereignisses ist ein Tooltip, der eine kurze Beschreibung des Objekts unter dem Zeiger anzeigt. Der Tooltip wird erst angezeigt, nachdem die Maus oder der Stift eine bestimmte Zeit lang über das Objekt gehalten wurde.

Auf Bildern können diese mit dem HTML- title Attribut erstellt werden.

Beispiele

<!-- 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
<ref>var myImg = document.getElementById('myImage');</ref>
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');
});

Verweise

Externe Links

• Verstecktes CSS-Menü Ein mehrstufiges Mouseover-Menü in reinem CSS (dh ohne JavaScript)
• DontClick.it Demonstration der Navigation nur mit Mouseover (erfordert Flash Player)