Poser une question

Re: Image réactive ou rollover simple

Salut,


Un hyperlien se construit à l'aide de la balise <a> et comme la plupart des balise (et comme le nom "balise" l'indique) elle dois entourrer l'élément cliquable!

<a>mon hyperlien</a>

Ce peut être du texte comem cet exemple mais aussi d'autre éléments comme une image.

<a><img></a>

Donc :

<a href="url"><img src="monImage.png"></a>

Voilà pour l'hyperlien. Dans ton exemple il suffit d'entourrer les images "bouton" par la balise de l'hyperlien.

<div id="fond2-01">
<a herf=""><img src="images/fond2_01.jpg" width="333" height="405" alt="" ></a>
</div>

ATTENTION, ajoute une bordure à zéro sur tes images sinon le cadrage auccupera un pixel qui peux défaire l'allignement de la structure.

<div id="fond2-01">
<a herf=""><img src="images/fond2_01.jpg" width="333" height="405" alt="Titre de l'hyperlien" border="0" ></a>
</div>

Voilà pour l'hyperlien. Pour l'image réactive, le code peut être n'importe où, il suffit de bien cibler notre image. Pour ce faire, tu dois donner un nom (un identifiant) unique à chacune des images réactive. Dans l,exemple suivant j'ai ajouté le nom "monImageReactive1" queston de pouvoir cibler cette image lors du passage de la sourris.

<div id="fond2-01">
<a herf=""><img src="images/fond2_01.jpg" width="333" height="405" alt="Titre de l'hyperlien" border="0" name="monImageReactive1" ></a>
</div>

Ensuite, il faut capturer le comportement ou l'événement de la sourris qui passe au dessus de l'image. Pour ce faire tu dois utiliser "onmouseover" directeemnt dans l'hyperlien, c'est à dire dasn la balise <a>.

<a href="url" onmouseover="captureDuPassageDeLasourris">

Alors pourquoi pas profiter pour mettre le code qui change l'image directement là!

<a href="url" onmouseover="monImageReactive1.src='images/fond2_01.jpg'">

Ce code cible l'image "monImageReactive1" et change la propriété "src" qui est le URL de l'image par un nouveau URL.

Le code complet :

<div id="fond2-01">
<a herf="url" onmouseover="monImageReactive1.src='images/fond2_01.jpg'"><img src="images/fond2_01.jpg" width="333" height="405" alt="Titre de l'hyperlien" border="0" name="monImageReactive1" ></a>
</div>

Que tu dois donc reproduire pour chacune des images réactives en t'assurant que le nom (identifiant ou name) est différent pour chaque image et que le code réfère bien au bon nom d'image. Ensuite, si le url des images est valide, tout devrait bien fonctionner.

Pouir plus d'information, lire ce tutoriel "Images réactives ou le RollOver" (http://www.trucsweb.com/Javascript/trucs.asp?no=248&type=5) et comme je t'ai dit, normalement on regarde les turoriels avant d'utiliser le forum qui devrait être de dernier recours.

Ciao
Oznog

Réponses

Aucune réponse à ce message...