 |
 Echange de plusieurs image au passage du pointeur (rollover) |
|
|
|
|
|
Le but de ce script est de changer plusieurs images au passage du pointeur sur une seule,
cela permet une légère interactivité et montre au visiteur que l'image est une sorte de 'bouton'. |
|
|
|
|
|
Lorsque le pointeur passe sur un élément, l'événement s'appelle
'OnMouseOut', lorsque le pointeur quitte l'élément, l'événement
s'appelle 'OnMouseOut'.
Il n'est pas strictement nécessaire d'intercepter l'événement 'OnMouseOut'
mais cela permet de replacer l'image d'origine après que le pointeur soit sorti de l'image (plus propre et plus
logique).
Nous allons intercepter ces deux événements et leur attribuer une fonction à chacun.
Chacune de ces fonctions nécessite deux paramètres : l'élément de la page à remplacer
(attribut 'name' de l'image) et le nom du fichier image qui doit être placé
(attribut 'src' de l'image). |
|
|
|
|
|
dans la partie <head>
 |
|
 |
|
<script language="JavaScript">
function rollover(lieu1,source1,lieu2,source2) {
// indiquez l'emplacement des images a appeler
chemin = 'images/';
lieu1.src = chemin + source1;
lieu2.src = chemin + source2;
}
function rollout(lieu1,source1,lieu2,source2) {
// indiquez l'emplacement de l'image de depart
chemin = 'images/';
lieu1.src = chemin + source1;
lieu2.src = chemin + source2;
}
</script>
|
|
|
 |
|
 |
dans la partie <body>
|
|
|
|
<!-- Le premier parametre est le nom qui est donne a l'image (attribut 'name') -->
<!-- Le second est le nom de l'image qui doit remplacer l'image en place -->
<!-- Les troisieme et quatrieme, identiques mais pour la seconde image -->
<a href="fichier.html" OnMouseOver="rollover(image1,'over.gif',image2,'2.gif');" OnMouseOut="rollout(image1,'out.gif',image2,'1.gif');"><img src="../../media/javascript/out.gif" name="image1" border="0"></a> <img src="../../media/javascript/1.gif" name="image2" border="0">
<a href="fichier.html" OnMouseOver="rollover(image11,'5.gif',image12,'10.gif');" OnMouseOut="rollout(image11,'1.gif',image12,'2.gif');"><img src="../../media/javascript/out.gif" name="image10" border="0"></a> <img src="../../media/javascript/1.gif" name="image11" border="0"> <img src="../../media/javascript/2.gif" name="image12" border="0">
|
|
|
|
|
|
|
|
|
|
|
|
|
