Effets de survol JavaScript sur les boutons (Mouseover)

Si vous avez vu un bouton web changer d'apparence au survol de la souris, vous avez vu un effet « Mouseover » en JavaScript. JavaScript (à ne pas confondre avec Java) est un langage de script simple pour pages web. Sa capacité à stocker/récupérer des variables permet des effets uniques au survol, y compris sur les boutons.

L'attribut « OnMouseOver »

Le plus souvent, JavaScript est déclenché en définissant « OnMouseOver » dans une balise lien :

<a href="monsite.com" onmouseover="...

Cet attribut exécute votre code JavaScript pour les boutons ou identifie directement la nouvelle image. Comme la plupart des boutons web sont de petits fichiers images, vous pouvez créer divers effets avec deux images : une pour le bouton normal, l'autre pour le survol.

JavaScript intégré

Aujourd'hui, de nombreux navigateurs incluent le code JavaScript nécessaire pour intégrer « OnMouseOver » et « OnMouseOut » (retour à l'état initial après départ de la souris) sans JavaScript additionnel. Placez « document.[nom_element].src=[emplacement] » après les attributs « ...over » et « ...out ». « [nom_element] » est remplacé par la valeur de l'attribut ID de la balise image à survoler. Exemple : document.monImage.src="image2.jpg" correspond à <img src=image.jpg id=monImage>. « emplacement » est le répertoire du fichier survol/sortie. S'il est le même que le fichier HTML, seul le nom de fichier suffit.

Ajout de script

Ce code devient fastidieux pour de nombreux effets. Pour simplifier, écrivez une fonction JavaScript et appelez-la avec une variable. Placez le JavaScript dans l'en-tête HTML entre balises <script>. La « function 'nom'() » — 'nom' étant un nom unique — peut être appelée dans les attributs OnMouseOver/OnMouseOut de la balise <A>. Exemple : <A HREF="page.html" onmouseover="MonOver()" onmouseout="MonOut()">. Avec variables, créez un script cherchant automatiquement l'image et son équivalent survol. Ex: cherche « [variable]_on.jpg » au OnMouseOver et « [variable]_off.jpg » au OnMouseOut. La balise n'a qu'à appeler onmouseover='monOver([variable])'. Les images associées doivent être nommées « [variable]_on.jpg » et « [variable]_off.jpg » — « [variable] » étant toute chaîne unique.

Images de survol

Tout dépend de la conception des images pour l'affichage du bouton. Effets courants : faire « briller » le bouton original au survol. Anciens effets : bouton en relief qui semble enfoncé. Ces effets utilisent plusieurs images créées dans un logiciel graphique. Important : tous ces fichiers images doivent avoir les mêmes dimensions exactes, sinon la page web se déformera à chaque survol.