Dans un autre tutoriel, nous avons examiné comment utiliser la propriété CSS background-image et le sélecteur :hover pour créer une image interactive qui change lorsqu’un utilisateur déplace sa souris sur l’image. Dans cet exemple, nous avons commencé avec une icône d’accueil grise et l’avons transformée en une icône orange. 
Dans ce tutoriel, nous allons examiner une autre façon d’accomplir la même chose en utilisant JavaScript.
Quand Devriez-vous utiliser CSS vs JavaScript
CSS est le langage utilisé pour définir la mise en page du site Web et créer des animations simples. JavaScript est utilisé pour ajouter de l’interactivité en fonction des commentaires et de l’activité des utilisateurs du site Web. Il y a des endroits où les capacités de CSS et JavaScript se chevauchent. Ce chevauchement soulève la question: que devez-vous utiliser? La réponse à cette question n’est pas simple, et de nombreuses opinions ont été exprimées sur le sujet. Certains disent que vous devriez utiliser CSS dans pratiquement tous les cas et n’utiliser JavaScript que lorsqu’aucun autre outil ne peut faire le travail. D’autres proposent un argument complètement opposé selon lequel JavaScript devrait remplacer entièrement CSS. En pratique, la plupart des développeurs utilisent simplement le langage qu’ils connaissent le mieux, même si ce n’est pas le meilleur choix pour la tâche à accomplir. Nous n’allons pas peser sur le débat. Nous allons vous laisser vous décider sur la question et nous nous concentrerons plutôt sur vous montrer comment utiliser CSS et JavaScript. Un tutoriel précédent a déjà montré comment effectuer cette transition en utilisant CSS. Vous pouvez le voir ici. Le reste de ce tutoriel vous apprendra à utiliser JavaScript pour cette tâche courante.
Le code Derrière la transformation
Voici le code JavaScript et HTML utilisé pour créer la transformation.
<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')"> <img src="../path/original_image.file" name="home" alt="Home Page"> </a> <script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> Prenons ces morceaux de code un à la fois afin que nous puissions comprendre ce qui se passe.
L’élément d’ancrage
La première ligne de code que nous voyons est un élément d’ancrage.
<a href="home_url" onmouseover="rollover('home')" onmouseout="rollout('home')" > Étant donné que notre exemple implique de lier une icône d’accueil à la page d’accueil du site Web, l’attribut href pointerait vers la page d’accueil de notre site Web. Vient ensuite l’événement JavaScript onmouseover. C’est l’événement qui se produira lorsque la souris survole l’élément d’ancrage. Dans ce cas, une fonction nommée rollover est appelée et affecte l’élément avec le nom ‘home’. Enfin, nous avons l’événement onmouseout qui appelle la fonction rollout, ce qui affecte à nouveau l’élément avec le nom ‘home’.
L’élément d’image
Imbriqué dans l’élément d’ancrage est notre élément d’image.
<img src="../path/original_image.file" name="home" alt="Home Page"> Nous allons utiliser l’élément image pour charger l’image qui apparaîtra lorsque la souris ne survole pas l’élément d’ancrage. Dans le cas de notre exemple, nous allons charger l’icône de la maison grise. Vient ensuite l’attribut name. Nous utilisons cet attribut pour donner le JavaScript afin d’identifier l’élément HTML que nous voulons modifier avec le script. Jetez un coup d’œil à l’élément d’ancrage et remarquez comment les deux fonctions utilisent le paramètre ('home'). L’attribut name="home" est la façon dont les fonctions JavaScript identifient l’élément image comme l’élément sur lequel agir.
Le script
Enfin, nous avons un script très court.
<script type="text/javascript"> <!-- setrollover("../path/hover_image.file"); --> </script> Ce script définit une valeur pour la fonction rollover qui est appelée par la fonction onmouseover déclenchée lorsque la souris d’un spectateur survole l’image.
Tout mettre ensemble
Si nous mettons l’ancre, l’image et le script ensemble, voici ce que nous obtenons.
Simplifiez le code avec jQuery
jQuery est une bibliothèque JavaScript qui vous permet de créer à peu près n’importe quelle sorte d’animation ou de transformation JavaScript avec moins de code. Si nous voulions utiliser jQuery pour créer la même transformation, voici à quoi ressemblerait le code.
<a href="home_url"> <img src="../path/original_image.file" alt="Home Page"> </a> <script> jQuery.('#home').hover( function(){ $(this).attr( 'src' , 'hover-image.file' ) }, function(){ $(this).attr( 'src' , 'original-image.file' ) } ); </script> La bonne chose à propos de l’utilisation de jQuery est que nous n’avons plus besoin d’ajouter des gestionnaires d’événements au HTML lui-même (rappelez-vous les événements onmouseover et onmouseout du code d’origine?). L’une des meilleures choses à propos de jQuery est qu’il peut ajouter dynamiquement les gestionnaires d’événements. Cela permet une plus grande séparation entre le script et le contenu HTML et constitue un meilleur moyen de codage. Comme vous pouvez le voir, le code HTML est beaucoup plus propre si nous utilisons la bibliothèque jQuery et que le résultat final est le même.
jQuery.(‘#accueil’).hover(function() {this(this).attr (‘src’, ‘home168-1.png’) }, function() {this(ceci).attr(‘src’, ‘orange_home.png’ ) } );Ajouter jQuery à un site Web
Une chose à garder à l’esprit si vous décidez d’utiliser ce code sur votre propre site Web est que la bibliothèque jQuery doit être chargée par le navigateur sur chaque page où un script jQuery est utilisé. JavaScript est pris en charge par tous les navigateurs modernes. Cependant, la bibliothèque jQuery doit être ajoutée au navigateur pour que les scripts jQuery puissent être traités. Il existe deux façons d’ajouter jQuery à un site Web.
- Téléchargez jQuery depuis la Fondation jQuery et téléchargez-le sur votre serveur Web.
- Lien vers une bibliothèque jQuery hébergée publiquement.
Le moyen le plus simple d’ajouter jQuery à un site Web consiste à créer un lien vers une bibliothèque jQuery déjà hébergée sur le Web. Vous pouvez charger la bibliothèque jQuery hébergée par Google en collant la ligne de code suivante dans l’élément head de votre site Web.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
