Dieser Beitrag zeigt das Verfahren zum Ändern des Bildes beim Hover in JavaScript.
Wie ändere ich ein Bild beim Hover in JavaScript?
Um das Bild beim Hover zu ändern, verwenden Sie die „ onmouseover ' Veranstaltung. Wenn die Maus/der Cursor durch ein HTML-Element oder eines seiner Kinder bewegt wird, wird das Ereignis onmouseover ausgelöst.
Beispiel 1: Bild beim Hover in JavaScript ändern
Verwenden Sie in einer HTML-Datei das Tag , um das Bild auf einer Webseite anzuzeigen. Hänge an ' onmouseover ”-Ereignis, das die JavaScript-Funktion aufruft, wenn die Maus über das Bild fährt:
< Bild-ID = 'MenüImg' Quelle = '1.jpg' onmouseover = 'schweben (dies);' />
Definieren Sie in einer JavaScript-Datei eine Funktion „ schweben ” mit dem Parameter “ Bild “. Legen Sie in der definierten Funktion das Bild fest, das beim Hover angezeigt wird:
Funktion schweben ( Bild )
{
Bild. Quelle = '2.jpg'
}
Wie Sie in der Ausgabe sehen können, wenn wir mit der Maus über das aktuelle Bild fahren, ändert es sich plötzlich:
Beispiel 2: Schalten Sie das Bild beim Hover um
Im obigen Beispiel ändert sich das Bild, wenn die Maus über das Bild bewegt wird, und das gleiche Bild bleibt. In diesem Beispiel erscheint nun das erste Bild wieder, wenn sich die Maus aus dem Bild bewegt. Dieser Effekt wird Umschalteffekt genannt. Zu diesem Zweck verwenden wir das „ onmouseover ' und ' onmouseout ” HTML-Eigenschaften:
< Bild-ID = 'MenüImg' Quelle = '1.jpg' onmouseover = 'schweben (dies);' onmouseout = 'hoverOut(this)' />
„ onmouseover “ ruft die „ schweben() “-Funktion, während die „ onmouseout „Ereignis ruft die Funktion auf“ hoverOut() “:
Funktion hoverOut ( Bild ) {Bild. Quelle = '1.jpg'
}
Die Ausgabe zeigt, dass das Bild erfolgreich geändert wird, wenn sich die Maus über dem Bild befindet, und es geändert wird, wenn die Maus das Bild verlässt:
Das war alles über das wechselnde Bild beim Schweben.
Fazit
Um das Bild beim Hover zu ändern, verwenden Sie die „ onmouseover ' Veranstaltung. Verwenden Sie zum Umschalten des Effekts die „ onmouseover ” Attribut mit “ onmouseout ' Veranstaltung. Wenn die Maus/der Mauszeiger durch ein Element oder eines seiner Kinder bewegt wird, wird das onmouseover-Ereignis ausgelöst, während wenn die Maus/der Mauszeiger aus einem Element herausbewegt wird, das onmouseout-Ereignis auftritt. In diesem Beitrag haben wir das Verfahren zum Ändern des Bildes beim Hover in JavaScript demonstriert.