Was ist OnMouseOver?

OnMouseOver ist ein JavaScript-Ereignis, das Ihre Seite interaktiver macht, indem es die Darstellung eines Bildes ändert, wenn die Maus über das Bild bewegt wird.

OnMouseOver-Beispiel

Das folgende Beispiel zeigt Ihnen, wie Sie einfache Schaltflächen erstellen können, die einen Onmouseover-Effekt haben. Wenn Sie Ihre Maus über eine der unten stehenden Schaltflächen bewegen, ändert sich ihre Farbe in eine dunklere Farbe, was anzeigt, dass sie angeklickt werden kann.

OnMouseOver-Beispielanweisungen

Nachfolgend finden Sie eine Übersicht darüber, wie das obige Beispiel erstellt wurde.

In dem rot Abschnitte unten sind die Bilddateien. Beispielsweise sind om1.gif und om11.gif die beiden Dateien, die für die Ein- und Aus-Positionen verwendet werden. Die Datei om1.gif wird angezeigt, wenn sich die Maus nicht über dem Bild befindet, also im obigen Beispiel wäre das hellgrau. Wenn Sie den Mauszeiger über das Bild bewegen, ändert es sich zu om11.gif, einem dunkleren Grau. Sie können dasselbe Format verwenden, wenn Sie Ihre Bilder erstellen, oder, falls gewünscht, das Benennungsformat ändern.

Das blau Abschnitt ist die Variable zum Speichern der Ein- und Aus-Bildpositionen für jede Schaltfläche. Zum Beispiel ist onef die Aus-Position (f für aus) und oneo ist die Maus auf dem Positionsbild. In unserem obigen Beispiel gibt es fünf Schaltflächen mit einem Satz von zwei Bildern, also insgesamt 10 Bildern.

In dem Orange Abschnitte sind die Bildlinks. Diese Links können auf jede Seite verweisen, auf die die Schaltfläche den Besucher auf Ihrer Website weiterleiten soll.

<script>
<!--
if (document.images) {
 var onef = new Image();
 onef.src ="https://www.computerhope.com/jargon/o/om1.gif";
 var oneo = new Image();
 oneo.src = "https://www.computerhope.com/jargon/o/om11.gif";
 var twof = new Image();
 twof.src = "https://www.computerhope.com/jargon/o/om2.gif";
 var twoo = new Image();
 twoo.src = "https://www.computerhope.com/jargon/o/om22.gif";
 var threef = new Image();
 threef.src = "https://www.computerhope.com/jargon/o/om3.gif";
 var threeo = new Image();
 threeo.src = "https://www.computerhope.com/jargon/o/om33.gif";
 var fourf = new Image();
 fourf.src = "https://www.computerhope.com/jargon/o/om4.gif";
 var fouro = new Image();
 fouro.src = "https://www.computerhope.com/jargon/o/om44.gif";
 var fivef = new Image();
 fivef.src = "https://www.computerhope.com/jargon/o/om5.gif";
 var fiveo = new Image();
 fiveo.src = "https://www.computerhope.com/jargon/o/om55.gif";
}
function act(imgName) {
 if (document.images) document[imgName].src = eval(imgName + "o.src");
}
function inact(imgName) {
 if (document.images) document[imgName].src = eval(imgName + "f.src");
}
// -->
</script>
<p>
<a href="https://www.computerhope.com/learnhtm.htm" onMouseOver="act('one')" onMouseOut="inact('one')">
<img src="https://www.computerhope.com/jargon/o/om1.gif" name="one" alt="HTML"></a><br>
<a href="https://www.computerhope.com/oh.htm" onMouseOver="act('two')" onMouseOut="inact('two')">
<img src="https://www.computerhope.com/jargon/o/om2.gif" name="two" alt="Online help"></a><br>
<a href="https://www.computerhope.com/jargon/v/virus.htm" onMouseOver="act('three')" onMouseOut="inact('three')">
<img src="https://www.computerhope.com/jargon/o/om3.gif" name="three" alt="Virus information"></a><br>
<a href="https://www.computerhope.com/jargon.htm" onMouseOver="act('four')" onMouseOut="inact('four')">
<img src="https://www.computerhope.com/jargon/o/om4.gif" name="four" alt="Computer jargon"></a><br>
<a href="https://www.computerhope.com/jargon/i/internet.htm" onMouseOver="act('five')" onMouseOut="inact('five')">
<img src="https://www.computerhope.com/jargon/o/om5.gif" name="five" alt="Internet Info"></a>
</p>

Ereignis, JavaScript, Programmierbegriffe