Le fameux et désormais classique effet onmouseover / onmouseout mais compatible cette fois. Les deux images doivent avoir les mêmes dimensions.
Démo : Survolez l'image avec la souris.
Etape 1 : Ajouter entre les balises <HEAD>...</HEAD>:
<SCRIPT LANGUAGE="Javascript"> <!-- Permuter une image function Permut (flag,img) { if (document.images) { if (document.images[img].permloaded) { if (flag==1) document.images[img].src = document.images[img].perm.src else document.images[img].src = document.images[img].perm.oldsrc } } } function preloadPermut (img,adresse) { if (document.images) { img.onload = null; img.perm = new Image (); img.perm.oldsrc = img.src; img.perm.src = adresse; img.permloaded = true; } } // --> </SCRIPT>
Etape 2 : Ajouter dans le body pour réaliser l'effet.
<A HREF="..." onMouseover="Permut(1,'IMG1');" onMouseout="Permut(0,'IMG1');"> <IMG SRC="image_de_départ.gif" NAME="IMG1" onLoad="preloadPermut(this,'image_d'arrivée.gif');" > </A>
Il sera parfois utile de précharger les images.
