IMAGES ET ROLLOVER 

Outils pour webmaster. Trucs et astuces en code HTML, JavaScript, PHP : améliorer son site internet

Descriptif : un rollover sur une image fait apparaître une seconde image. L'image est cliquable et renvoit vers une autre page.

Exemple :

Mise en oeuvre : Sélectionnez et copiez directement à l'écran le code ci-dessous et collez-le dans votre page, code HTML visible.

Entre les deux balises <head> et </head>

<!-- DEBUT DU SCRIPT IMAGES ROLLOVER -->
<script language="Javascript">
<!--
//Slide Show script (this notice must stay intact)
//For this and more scripts
//visit java-scripts.net or http://wsabstract.com
//trouvé sur http://www.toulouse-renaissance.net/c_outils.htm
if (document.images) {
button1 = new Image
button2 = new Image

button1.src = 'img1.gif'
button2.src = 'img2.gif'
}
//-->
</script>
<!-- FIN DU SCRIPT IMAGES ROLLOVER -->

Entre les deux balises <body> et </body>

<!-- DEBUT DU SCRIPT IMAGES ROLLOVER -->
<a href="http://www.toulouse-renaissance.net/c_outils.htm" onmouseover="document.rollover.src=button2.src" onmouseout="document.rollover.src=button1.src"><img src="img1.gif" border=0 name="rollover"></a>
<!-- FIN DU SCRIPT IMAGES ROLLOVER -->

Remarque : dans <head> changez button1.src = 'img1.gif' par le chemin de votre image. Même chose pour button2.src
Sur le lien n'oubliez pas de changer les 3 liens des images.

Retour

Copyright www.toulouse-renaissance.net ©