Trucsweb.com

Trucsweb.com

Javascript

Images réactives ou le RollOver

RDFFav

Images réactives ou le RollOver - Du préchargement au générateur de RollOver

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.rollover, images, préchargement, eval, src, onmouseover, onmouseout, onmousedown, hyperliens, onloadImages réactives ou le RollOver - Du préchargement au générateur de 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 :

<a href="page.htm"
onMouseOver=" changer l’image "
onMouseOut=" remettre l’image de départ ">
lien </a>

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 :

<img name="nom de l’objet"
SRC="url de l’image">

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 :

<a
href="page.htm"
onMouseOver="image1.src=%27image2.gif%27"
onMouseOut="image1.src=%27image1.gif%27">
<IMG NAME="image1" SRC="image1.gif">
</a>

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 :

<img name="image1" src="image1.gif"
onLoad="image1=new Image(0,0); image1.src=%27image2.gif%27">

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">
<!--
image1=new Image(0,0);
image1.src=%27image1.gif;
image2=new Image(0,0);
image2.src=%27image2.gif%27;
// -->
</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">
<!--
function change(x, y)
{
document.images[x].src=eval(y+%27.src%27);
}
// -->
</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">
<!--
image1 = new Image(0,0);
image1.src = "image1.gif";
image2 = new Image(0,0);
image2.src = "image2.gif";
image3 = new Image(0,0);
image3.src = "image3.gif";

function change(x, y)
{
document.images[x].src=eval(y+%27.src%27);
}
// -->
</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.

Django (Oznog) Blais
Dernière mise à jour :

Commentaires

Ajouter un commentaire
Votre adresse de courriel ne sera pas publiée. * L'astérisque indique les champs obligatoires.
Votre évaluation du tutoriel

       Visites : 12633 - Pages vues : 39219
X

Trucsweb.com Connexion

Connexion

X

Trucsweb.com Mot de passe perdu

Connexion

X

Trucsweb.com Conditions générales

Conditions

Responsabilité

La responsabilité des Trucsweb.com ne pourra être engagée en cas de faits indépendants de sa volonté. Les informations mises à disposition sur ce site le sont uniquement à titre purement informatif et ne sauraient constituer en aucun cas un conseil ou une recommandation de quelque nature que ce soit.

Aucun contrôle n'est exercé sur les références et ressources externes, l'utilisateur reconnaît que les Trucsweb.com n'assume aucune responsabilité relative à la mise à disposition de ces ressources, et ne peut être tenue responsable quant à leur contenu.

Droit applicable et juridiction compétente

Les règles en matière de droit, applicables aux contenus et aux transmissions de données sur et autour du site, sont déterminées par la loi canadienne. En cas de litige, n'ayant pu faire l'objet d'un accord à l'amiable, seuls les tribunaux canadien sont compétents.

X

Trucsweb.com Trucsweb

X

Trucsweb.com Glossaire

X

Trucsweb.com Trucsweb

X

Trucsweb.com Trucsweb

Conditions

Aucun message!

Merci.

X
Aucun message!
X

Trucsweb.com Créer un compte

Créer un compte

.
@