|
|
|
Table des matières
Action
de la souris sur les images
Pour faciliter les explications, nous allons employer une convension. Le texte qui sera écrit en noir sera du code HTML, celui en vert sera du javascript et celui en rouge sera soit du javascript soit du HTML à changer en fonction de vos besoins.
Je vais procéder par étape lorsque je vais faire les changements. Ne vous surprenez pas si je réécris des portions de script. Vous remarquerez que les éléments à changer ne seront pas les mêmes (texte rouge).
Code Source
Habituellement, les fonctions javascript se définissent dans l'entête de la page web dans lesquelles elles vont être appelées. Ici, nous retrouvons une fonction : remplace.
La fonction remplace, lorsqu'elle est appelée, remplace une image par une autre.
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!-- hide
function remplace(img_name,img_src){
document[img_name].src=img_src;
}
// -->
</SCRIPT>
</HEAD>
Au départ, vous devez avoir une image (ou plusieurs).
<IMG SRC="image/bonjour.JPG" NAME="image1">
Ensuite, cette image devra être un lien.
<A HREF="lien.html"> <IMG SRC="nom_de_l'image.JPG" NAME="image1"> </A>
Pour que cela fonctionne, vous devez avoir deux images : une image de base et une autre qui apparaîtra lorsque la souris passera sur l'image de base. Dans notre exemple, nous avons les images bonjour.JPG et bonjour2.JPG qui se retrouvent dans le répertoire image. Vous devez changer ces informations en fonction du nom de vos images.
<A HREF="lien.html"
onmouseover="remplace('image1','image/bonjour2.JPG')"
onmouseout="remplace('image1','image/bonjour.JPG')">
<IMG SRC="image/bonjour.JPG" NAME="image1">
</A>
Comme il risque d'y avoir plus d'une image sur votre page, vous devez spécifier quelle image vous voulez changer. Donc, vous devez nommer vos images. Pour le faire, vous n'avez qu'à ajouter l'attribue NAME="nom de l'image" à la balise IMG.
De plus, lorsque vous appelez la fonction remplace, vous devez indiquer quelle image vous voulez changer.
<A HREF="lien.html"
onmouseover="remplace('image1','image/bonjour2.JPG')"
onmouseout="remplace('image1','image/bonjour.JPG')">
<IMG SRC="image/bonjour.JPG" NAME="image1">
</A>
Vous avez toutes les informations pour réussir à faire un menu dont les images changent lorsque la souris passe dessus. Si vous avez des questions, n'hésitez pas à nous les poser dans le forum de discussion!