Biblioscript.com : Comment faire un 'rollover'

	<SCRIPT LANGUAGE=JavaScript> var nbre = Math.round(Math.random()10000); var chaine="<a href=http://www3.click-fr.com/clickj.cgi?a=1019-405664&b=" + nbre + " target=clickfr><img border=0 height=60 width=468 SRC=http://www3.click-fr.com/printj.cgi?a=1019-405664&b=" + nbre +" alt=\" Visitez notre Sponsor ! *\"></a>"; document.write(chaine); </SCRIPT> Membre de ClickFR, Reseau francophone Paie-Par-Click


- [ CSS : ] [ DHTML : ] [ HTML : ] [ JavaScript : ] [ Refs : ]

	JavaScript 1.3

Images

Echange d'une image au passage du pointeur (rollover)

	Fonction

		Le but de ce script est de changer une image sur laquelle passe le pointeur, cela permet une légère interactivité et montre au visiteur que l'image est une sorte de 'bouton'.

	Principe

		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).

	Le script

dans la partie <head>

// indiquez l'emplacement des images a appeler

chemin = 'images/';

lieu.src = chemin + source;

}

function rollout(lieu,source) {

// indiquez l'emplacement de l'image de depart

chemin = 'images/';

lieu.src = chemin + source;

}
</script>

dans la partie <body>

<a href="fichier.html" OnMouseOver="rollover(image1,'over.gif');" OnMouseOut="rollout(image1,'out.gif');"><img src="images/out.gif" name="image1" border="0"></a>

	Démonstration

	Téléchargement

Ce script est disponible en deux versions :

le script est intégré à la page où il agit,

le script est dans un fichier séparé de la page où il agit (fichier.js et fichier.html).

L'intérêt d'un script dans un fichier séparé est de pouvoir le partager entre plusieurs pages html.
Cela permet aussi de le rendre inaccessible à toute personne qui souhaiterai l'enregistrer pour une autre utilisation.

Script intégré :

img_rollover.zip
3 Ko

Script séparé :

img_rollover2.zip
3 Ko


	Recherche


	CSS 2


	DHTML


	HTML 4


	Références


	Aide générale


	statistiques