Ändern Sie das Bild beim Hover in JavaScript
-
Verwenden Sie die HTML-Attribute
onmouseoverundonmouseout, um Funktionen auszulösen -
Verwenden Sie die Methode
.hover(), um das Bild beim Hover zu ändern
In JavaScript verfolgen wir einen bestimmten Codeblock oder eine bestimmte Methode, um die Aufgabe auszuführen, ein Bild beim Bewegen der Maus zu ändern. Der effiziente Weg besteht vielmehr darin, eine benutzerdefinierte Funktion zu erstellen, die die Bildquelle berücksichtigt und mit den Maus-Hover-Effekten zusammenarbeitet.
Unsere Beispielsets zeigen eine Demonstration mit den HTML-Attributen onmouseout und onmouseover, um bestimmte Funktionen im Skriptsegment auszulösen. Außerdem haben wir in der zweiten Instanz eine .hover()-Funktion, die mit der jQuery verknüpft ist.
Lassen Sie uns die Codebasis auf ein klares Konzept überprüfen.
Verwenden Sie die HTML-Attribute onmouseover und onmouseout, um Funktionen auszulösen
Das Kernarbeitsprinzip basiert auf onmouseover und onmouseout. Und diese Attribute werden der Funktion zugeordnet, die ihre Beschreibung zum Ändern von Bildern beim Hover hat.
Wir benötigen ein jQuery CDN, um die Funktion auszuführen, da es sich zufällig auf jQuery mit .attr() stützt.
Code-Auszug:
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<div id="menu" >
<a href="#" id="home">
<img id='menuImg' src="https://images.unsplash.com/photo-1653398597364-c63c01f261cc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974" alt="logo" width="200px" height="150px"
onmouseover="onHover();" onmouseout="offHover();" />
</a>
</div>
function onHover() {
$('#menuImg')
.attr(
'src',
'https://images.unsplash.com/photo-1653398597887-5005619e8cdc?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774');
}
function offHover() {
$('#menuImg')
.attr(
'src',
'https://images.unsplash.com/photo-1653398597364-c63c01f261cc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1974');
}
Ausgabe:
Verwenden Sie die Methode .hover(), um das Bild beim Hover zu ändern
Dieses Beispiel zeigt, wie jQuery mit der img-Klasse home umgeht. Wir lassen die Klasse für unsere Bildquelle initialisieren und generieren dann die Funktion basierend auf notwendig.
Der Unterschied zum vorherigen besteht darin, dass wir hier kein HTML-Attribut verwendet haben. Vielmehr haben wir uns auf die .hover()-Methode verlassen, die übersichtlich funktioniert.
Lassen Sie uns auf den Code springen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<div>
<img height="150px" width="200px" src="https://images.unsplash.com/photo-1653398597887-5005619e8cdc?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774" alt="" class="home">
</div>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
$(".home").hover(
function() {$(this).attr("src","https://images.unsplash.com/photo-1653398597364-c63c01f261cc?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774");},
function() {$(this).attr("src","https://images.unsplash.com/photo-1653398597887-5005619e8cdc?ixlib=rb-1.2.1&raw_url=true&q=80&fm=jpg&crop=entropy&cs=tinysrgb&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=774");
});
});
</script>
</body>
</html>
Ausgabe:
-Method-to-Change-Image-on-Hover.webp)
