Manipulation d'images

Il y a sur le web beaucoup de pages avec des images, qui lorsque vous passez le curseur de la souris, changent d'aspect. Ce genre d'images servent à mettre dans des menus par exemple, afin de pouvoir se diriger vers d'autres pages.
Je vais vous expliquer ce mécanisme.

Passez le curseur de la souris sur l'image ci-dessous et regardez.
Si l'image ne change pas directement, patientez jusqu'à ce quelle soit chargée.

Comment cela fonctionne?

2 événements liés à la souris permettent de contrôler l'apparence de l'image.

onMouseOver est l'événement qui est envoyé lorsque le curseur se trouve sur l'image.
onMouseOut intervient lorsque le curseur quitte l'image.

Le code

1. Mettons une image et donnons lui un nom :

Le tag NAME="Bouton1" doît être mis afin de référencer l'image.
Les tags BORDER (taille du bord de l'image), WIDTH(largeur de l'image) et HEIGHT(hauteur de l'image) ne sont pas obligatoires.

2. Rajoutons maintenant les événements onMouseOver et onMouseOut

Notes : les 2 événements doivent être ajoutés dans le tag <a href>

Vous pouvez aussi utiliser des fonctions, cela permet de faciliter la mise à jour du code en cas de changement.

1. On fait appel aux fonctions dans les événements.

2. Voici comment définir les fonctions.

Images dans une liste de liens

    contact
    download
    javascript
    liens

Voici le code complet pour une liste de liens.

<html>
<head>
<title>JavaScript : Images</title>
<script LANGUAGE="JavaScript">
<!--
//je déclare 2 images
//listeon lorsque le curseur de la souris est sur le lien
//listeoff lorsque le curseur quitte le lien
listeon = new Image();
listeon.src = "images/red.gif";
listeoff = new Image();
listeoff.src = "images/ltgrey.gif";

function listeIn(imgName){
//imgName est le nom de l'image que vous avez donné
document[imgName].src = listeon.src;
}

function listeOut(imgName){
//imgName est le nom de l'image que vous avez donné
document[imgName].src = listeoff.src;
}
// -->
</script>

</head>
<body>
<img src="images/ltgrey.gif" name="L1" width="20" height="19">
<a href="contact.html" onMouseOver="listeIn('L1')" onMouseOut="listeOut('L1')">contact</a><br>
<img src="images/ltgrey.gif" name="L2" width="20" height="19">
<a href="download.html" onMouseOver="listeIn('L2')" onMouseOut="listeOut('L2')">download</a><br>
<img src="images/ltgrey.gif" name="L3" width="20" height="19">
<a href="javascript.html" onMouseOver="listeIn('L3')" onMouseOut="listeOut('L3')">javascript</a><br>
<img src="images/ltgrey.gif" name="L4" width="20" height="19">
<a href="liens.html" onMouseOver="listeIn('L4')" onMouseOut="listeOut('L4')">liens</a><br>
</body>
</html>

Vous avez sûrement remarqué que je n'utilise pas "document.nom_image.src" mais plutôt "document[nom_image].src". On peut utiliser les 2 façons de faire.