Attention cette page est ancienne Vous êtes ici : Accueil des cours Misfu > Informatique > Apprendre la programmation > Cours Javascript > Mouseovers

Traduction de la page Mouseovers rédigée par Peter-Paul Koch et traduite par Christophe Bruggeman

La traduction est en cours, si vous trouvez une erreur sur une page ou si vous souhaitez suggérer une amélioration, n'hésitez pas à utiliser le forum.

Mouseovers

Un des scripts les plus populaires et les plus répandus est le mouseover (permutation d’images). Quand l'utilisateur survole une image, l'image change légèrement, donnant un sympathique effet. En fait, vous chargez une image différente à l'endroit ou ce situait la première image.

Ce nouveau script rend les mouseovers bien plus simples qu'ils ne l’ont jamais été.

Ce sont les images avec l’effet mouseover :

Notez le poids du XHTML. J'ai éliminé tous les traiteurs d'événement (event handlers), il n’y a plus de onmouseover="over(1)" et autre résidus du même genre dans notre beau XHTML!

<ul id="mouseovers">
<li><a href="ttp://www.misfu.com/static/Javascript/intro.html"><img src="http://www.quirksmode.org/js/pix/mo_home.gif" width="80"
	height="50" border="0" /></a></li>
<li><a href="ttp://www.misfu.com/static/Javascript/placejs.html"><img src="http://www.quirksmode.org/js/pix/mo_place.gif" width="80"
	height="50" border="0" /></a></li>
</ul>

Le script

Le script ci-dessous rajoute un effet de mouseover à toutes les images situées dans <ul id="mouseovers">. Lancé init() actualisé (onload) et il fonctionne.

var W3CDOM = (document.createElement && document.getElementsByTagName);

var mouseOvers = new Array();
var mouseOuts = new Array();

window.onload = init;

function init()
{
	if (!W3CDOM) return;
	var nav = document.getElementById('mouseovers');
	var imgs = nav.getElementsByTagName('img');
	for (var i=0;i<imgs.length;i++)
	{
		imgs[i].onmouseover = mouseGoesOver;
		imgs[i].onmouseout = mouseGoesOut;
		var suffix = imgs[i].src.substring(imgs[i].src.lastIndexOf('.'));
		mouseOuts[i] = new Image();
		mouseOuts[i].src = imgs[i].src;
		mouseOvers[i] = new Image();
		mouseOvers[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "_omo" + suffix;
		imgs[i].number = i;
	}
}

function mouseGoesOver()
{
	this.src = mouseOvers[this.number].src;
}

function mouseGoesOut()
{
	this.src = mouseOuts[this.number].src;
}

Noms d'image

Le script s'attend à ce que les noms des images mouseover soient exactement identique identique aux noms des images normales, sauf qu'ils ont en plus un suffixe _omo. Ainsi mon exemple emploie les images suivantes :

• mo_home.gif
• mo_home_omo.gif
• mo_place.gif
• mo_place_omo.gif

Assurez vous que toutes vos images se conforment à ce schéma d’appellation. Si ce n’est pas le cas, le script ne fonctionne pas.

Explication

Tout d'abord nous vérifions si le navigateur supporte le DOM W3C.

var W3CDOM = (document.createElement && document.getElementsByTagName);

Puis nous créons deux tableaux mouseOvers et mouseOuts. Ils permettent de stocker toutes les images liées au mouseover.

var mouseOvers = new Array();
var mouseOuts = new Array();

Nous stockons les images dans ces tableaux en raison du préchargement. Si nous chargeons immédiatement les images mouseover elles sont déjà disponibles dans la mémoire du navigateur quand l’utilisateur les survole avec la souris. Si nous ne les préchargeons pas, l’utilisateur devra attendre quelques secondes avant de voir l'image mouseover.

Blah!

window.onload = init;

Puis nous démarrons notre fonction init() qui prépare le terrain pour le comportement de notre mouseover. Si le navigateur ne supporte pas le DOM W3C nous la terminons immédiatement: il ne sert à rien de continuer.

function init()
{
	if (!W3CDOM) return;

Alors nous prenons tous les éléments <img> qui descendent de l'élément avec id="mouseovers". Dans mon exemple cet élément est un <ul>, mais ça pourrait être n’importe quoi.

	var nav = document.getElementById('mouseovers');
	var imgs = nav.getElementsByTagName('img');

Nous faisons boucler toutes les balises <img>.

	for (var i=0;i<imgs.length;i++)
	{

Chaque balise <img> reçoit un event handler mouseover et mouseout, de sorte qu'elle exécute le script onMouseOver et onMouseOut. Au-dessous je décris ces scripts plus en détail.

		imgs[i].onmouseover = mouseGoesOver;
		imgs[i].onmouseout = mouseGoesOut;

Ensuite nous stockons l'image de départ et l'image mouseover dans leurs tableaux respectives. L'image de départ a déjà été chargée, mais le navigateur cherche maintenant l'image mouseover, de sorte qu'elle soit disponible quand le premier effet mouseover aura lieu.

D'abord nous recherchons quel suffix utilise l’image (.gif, .jpg, .png, etc...).

		var suffix = imgs[i].src.substring(imgs[i].src.lastIndexOf('.'));

Nous créons une entrée dans le tableau mouseOuts et on y range un objet Image et une propriété src. Cet objet image n'est bien sûr rien d’autre que l'image qui à déjà été montrée. C’est cette image que nous devrions remettre dans onMouseOut.

		mouseOuts[i] = new Image();
		mouseOuts[i].src = imgs[i].src;

Puis nous créons une entrée dans le tableau mouseOvers et nous faisons la même chose. Ici nous devons chercher une nouvelle image. Puisque le script sait que la seule différence entre le nom des images de départ et le nom des images mouseover est _omo, nous pouvons facilement concaténer le nom de l'image mouseover.

		mouseOvers[i] = new Image();
		mouseOvers[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "_omo" + suffix;

Pour finir nous ajoutons une propriété number à la balise <img>. Elle servira à rechercher les bonnes images mouseover et mouseout dans nos deux tableaux.

		imgs[i].number = i;
	}
}

Tout est prêt, nous attendons que l'utilisateur survole avec la souris. S'il il le fait, nous exécutons la fonction mouseGoesOver. Cette fonction emploie le mot-clé this, qui se réfère à l'image survolé par l’utilisateur.

Nous avons placé le src de l'image sur la bonne image mouseover. Nous savons de quelle image mouseover nous avons besoin en utilisant la propriété number que nous avons placée dans la fonction init().

function mouseGoesOver()
{
	this.src = mouseOvers[this.number].src;
}

onmouseout nous permet de restaurer l'image de départ de la même manière.

function mouseGoesOut()
{
	this.src = mouseOuts[this.number].src;
}

C'est tout. Nettoyez vos mouseovers sans utiliser les inline event handlers.