Changer l'image au survol en JavaScript
-
Utilisez les attributs HTML
onmouseoveretonmouseoutpour déclencher des fonctions -
Utilisez la méthode
.hover()pour changer l’image au survol
En JavaScript, nous suivons un bloc de code ou une méthode spécifique pour effectuer la tâche de modification d’une image au survol de la souris. Le moyen efficace consiste plutôt à créer une fonction définie par l’utilisateur qui tiendra compte de la source de l’image et coopérera avec les effets de survol de la souris.
Nos jeux d’exemples afficheront une démonstration avec les attributs HTML onmouseout et onmouseover pour déclencher certaines fonctions dans le segment de script. Aussi, dans un second temps, nous aurons une fonction .hover() associée au jQuery.
Vérifions la base de code pour un concept clair.
Utilisez les attributs HTML onmouseover et onmouseout pour déclencher des fonctions
Le principe de fonctionnement de base est basé sur onmouseover et onmouseout. Et ces attributs correspondent à la fonction qui a sa description pour changer les images en survol.
Nous aurons besoin d’un jQuery CDN pour faire fonctionner la fonction car il se trouve qu’il s’appuie sur jQuery avec .attr().
Extrait de code:
<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');
}
Production:
Utilisez la méthode .hover() pour changer l’image au survol
Cet exemple illustre la façon dont jQuery traite la classe img home. Nous aurons la classe initialisée pour notre source d’image, puis nous générerons la fonction en fonction des besoins.
La différence avec le précédent est que nous n’avons utilisé aucun attribut HTML ici. Nous nous sommes plutôt appuyés sur la méthode .hover(), qui fonctionne clairement.
Passons au code.
<!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>
Production:
-Method-to-Change-Image-on-Hover.webp)
