Images réactives ou le RollOver

· Niveau : DÉBUTANT
· Compatibilité : Navigateur Version 3+

Une image réactive ou le « RollOver » est une image qui change d’état quand la souris du visiteur passe au dessus de l’image. Dans un document HTML, la façon de faire est de tout simplement substituer l’image pour une autre. Il y a donc deux étapes principales.

Premièrement, il faut savoir quand le visiteur passe la souris au dessus de l’image. Pour ce faire nous disposons d’un événement qui capture l’action de la souris quand elle passe au dessus d’un objet, en l’occurrence notre image. Cet événement est le « onMouseOver ». Bien sûr, pour remettre la première image il faut aussi capturer l’événement quand la souris quitte l’image. C’est l’événement « onMouseOut ». Ces deux événements que l’on appelle « EVENT » doivent être ajoutés à votre hyperlien, soit dans la balise HTML <a>. Noter que ce peut être n’importe quel hyperlien.

Exemple :

Deuxièmement il faut bien comprendre l’objet qui servira de « RollOver ». Votre image réagit comme un objet, c’est une propriété de l’objet » Document ». Pour l’identifier à des fins de manipulation il faut lui donner un nom. C’est avec ce nom que vous pourrez changer l’image de l’objet. Le nom de l’objet est identifié par l’argument NAME " de la balise « IMG ». C’est souvent l’erreur des débutants qui ne comprennent pas bien ce principe.

Exemple :

L’exemple montre bien que l’objet représenté par une image à l’aide de la balise " IMG " à un nom et une URL identifié par l’argument SRC. Vous pourrez donc modifier l’argument SRC de l’objet en vous servant du nom de l’objet.

Exemple :

<img name="image1" src="image1.gif">

image1.src=%27image2%27
ou
image1.src=%27image3%27 etc.

Exemple réel :

L’exemple change l’image " image1.gif " pour l’image " image2.gif " quand la souris du visiteur passe au-dessus de l’image et remet l’image " image1.gif " quand la souris sort de l’image. Ce n’est pas plus compliqué que ça… Un seul petit problème, l’image " image2.gif " ne sera pas chargée par le navigateur avant que le visiteur n’active l’événement " onMouseOver " en passant sur l’image. Cela peut prendre quelque seconde avant que l’effet ne se produise et le visiteur activera sûrement l’événement " onMouseOut " avant que l’image n’apparaisse. C’était d’ailleurs le problème avec le site Archambault.com, ils doivent avoir de très bonne connexion…

Précharger les image du " RollOver "

Encore une fois, il y a plusieurs façons de précharger une image. La plus simple consiste à ajouter dans la balise de l’image <IMG> l’événement " onLoad " qui détecte le chargement de l’image. En détectant l’événement vous ajoutez un objet " image " qui forcera le chargement d’une autre image sans l’afficher. L’image ne sera qu’ajoutée dans la cache du navigateur.

Exemple :

Le " RollOver " sur l’image sera instantané puisque l’image " image2.gif " est déjà dans la cache du navigateur. Cette méthode est peut-être simple à comprendre mais elle complique votre code et demande au navigateur un traitement supplémentaire qu’est le onLoad.

Un préchargement plus efficace serait de faire le préchargement avant le chargement de la page et sans tester l’événement onLoad. Pour ce faire vous n’avez simplement qu’a ajouter vos objets entre les balises de l’en-tête <head> et </head> comme ceci : (noter que le (0,0) représente les grandeurs width / height de l’image, donc à ajuster).

Exemple:
<script language="JavaScript1.1">

</script>

Maintenant, cette méthode peut aussi servir à manipuler de façon plus efficace nos objets. Pour avoir un code simple qui ne sera pas répété partout dans votre document HTML nous allons créer une fonction qui fera notre " RollOver " automatiquement.

<SCRIPT LANGUAGE="javascript">

</SCRIPT>

En passant en paramètre à cette fonction le nom " x " et la URL " y " d’une image, elle se chargera de substituer l’objet " image x " de votre document par la nouvelle image. " Eval " est une fonction intégrée au Javascript qui permet d’évaluer une chaîne de caractère tout simplement. La chaîne qui lui est passée est le nom de l’objet, " eval " permet de retourner la valeur de " y+%27.src%27 " qui est la URL. Jumelé à la définition des images dans l’en-tête du document ça donne ceci :

<HEAD>
<SCRIPT LANGUAGE="javascript">

</SCRIPT>
</HEAD>

Le premier code, la définition des images, est exécuté automatiquement mais la fonction " change "doit être appelée avant d’être exécutée. L’appelle ce fait comme ceci :

<A HREF="page.htm"
onMouseOver="change(%27image1%27, %27image1%27)"
onMouseOut="change(%27image1%27, %27image2%27)"
onMouseDown="change(%27image1%27, %27image3%27)">

Donc nous passons toujours le même nom d’objet soit " image1 " que sera le seul objet à être modifié. Et le deuxième paramètre est la URL de l’image de substitution, soit image1.gif, image2.gif et image3.gif. Vous avez remarque l’événement " onMouseDown ", et oui, vous pouvez aussi capturer l’événement du clic de la souris sur l’objet, un clic sans relâchement du bouton. Le vrais clic est l’événement " onClick ".

EXEMPLE COMPLET
Voici le code complet avec l’ajout d’un test de version de navigateur pour s’assurer que le code ne provoquera pas d’erreur avec un navigateur incompatible. La variable " var3 " indique à l’aide du test " parseInt( navigator.appVersion " un navigateur compatible. Noter aussi le nom plus significatif des images pour vous aider à comprendre vos codes avec les années, j’utilise personnellement le " n " pour normal, " o " pour over et " d " pour down. Et avec deux boutons différents.

<HTML>
<HEAD>
<SCRIPT LANGUAGE="javascript">
<!--
// Compatible Netscape 3.0
nav3 = false;
if( parseInt( navigator.appVersion ) >= 3 )
{ nav3 = true;
// initialisation des buttons
image1n = new Image(0,0);
image1n.src = "image1n.gif";
image1o = new Image(0,0);
image1o.src = "image1o.gif";
image1d = new Image(0,0);
image1d.src = "image1d.gif";
image2n = new Image(0,0);
image2n.src = "image2n.gif";
image2o = new Image(0,0);
image2o.src = "image2o.gif";
image2d = new Image(0,0);
image2d.src = "image2d.gif";
}
// RollOver des bouttons
function change(x, y)
{ if( nav3 )
{ document.images[x].src=eval(y+%27.src%27);
}
}
// -- >
</SCRIPT>
</HEAD>

<BODY>

<A HREF="page1.htm"
    onMouseOver="change(%27image1%27, %27image1o%27)"
    onMouseOut="change(%27image1%27, %27image1n%27)"
    onMouseDown="change(%27image1%27, %27image1d%27)">
  <IMG NAME="image1" SRC="image1n.gif"></A>

<A HREF="page2.htm"
     onMouseOver="change(%27image2%27, %27image2o%27)"
     onMouseOut="change(%27image2%27, %27image2n%27)"
     onMouseDown="change(%27image2%27, %27image2d%27)">
   <IMG NAME="image2" SRC="image2n.gif"></A>
</BODY>
</HTML>

Voilà. Une fois le principe bien compris vous pourrez le modifier à volonté pour faire beaucoup de choses avec les images. Comme toujours changer la même image même si la souris passe ailleurs sur la page. Ou changer une image quand le visiteur fait le " focus " sur un formulaire, changer une image avec un délai pour faire une bannière rotative ou un diaporama sur la même page etc.

Voici un exemple qui fait toujours le même " RollOver " pour différents objets " bt ", " bt " étant le " name " d’un objet. Remarquez que le nom de l’objet a été scindé en deux pour optimiser le code. Le nom est " menu1 " ou " menu2 ". La valeur à passer en paramètre est donc seulement le chiffre 1 ou 2. Il manque au code la déclaration des images et l’image.

function roll(bt)
{
if(document.images)
eval("document.menu" + bt + ".src = %27images/boutons/bouton1.gif%27");
}

function normal(bt)
{
if(document.images)
eval("document.menu" + bt + ".src = %27images/boutons/bouton2.gif%27");
}

<A HREF="page.htm" onMouseOver="roll(%271%27)" onMouseOut="normal2(%271%27)" >

Vous n’avez pas compris, qu’à cela ne tienne j’ai fait pour vous un générateur d’images réactives qui saura vous faciliter la tâche. Voir le générateur.