En mettant le curseur dans le feuillage, une aide est proposée.

Le code html (à mettre dans le source "html" de votre article)


<p align="center">
<a class="CtreTexte">
<img src="http://idata.over-blog.com/0/23/09/69/z-Test/ouestzoery1.jpg" usemap="#map" name="zoe" id="zoe" border="0" width="599" height="445" />
</a>
</p>

<map id="map" name="map">

<area onmouseover="document.zoe.src='http://idata.over-blog.com/0/23/09/69/z-Test/ouestzoery2.jpg'" onmouseout="document.zoe.src='http://idata.over-blog.com/0/23/09/69/z-Test/ouestzoery1.jpg'" shape="circle" coords="305,144,55" />

<area onmouseover="document.zoe.src='http://idata.over-blog.com/0/23/09/69/z-Test/ouestzoery3.jpg'" onmouseout="document.zoe.src='http://idata.over-blog.com/0/23/09/69/z-Test/ouestzoery1.jpg'" shape="rect" coords="0,300,590,440" />

<area onmouseover="document.zoe.src='http://idata.over-blog.com/0/23/09/69/z-Test/ouestzoery4.jpg'" onmouseout="document.zoe.src='http://idata.over-blog.com/0/23/09/69/z-Test/ouestzoery1.jpg'" shape="rect" coords="1,1,146,117" />

</map>



Explication

Il est facile de comprendre ce "truc-machin-bidule" :

• 1 - Au début en noir, il faut déclarer une image en la définissant comme une carte : (#map)
• 2 - Il faut ensuite nommer cette carte : (name="zoe").... Ce nom peut être changer évidemment.

    Vient enfin la partie d'affichage des images (la partie créatrice la plus amusante).

• 3 - Il faut réaliser un classique rollover .....Mais en lui donnant le nom de la map : document.zoe
• 4 - Chaque couleur précédée par <area  concerne une nouvelle image. Elle s'affiche en fonction de la zone définie dans l'image principale... Soit par un cercle ("circle" ), soit pas un rectangle ("rect")
• Pour mieux comprendre ces instructions et surtout faciliter leur utilisation, je vous propose cet article d'aide.

Nota :
 * Il est plus logique de créer des images (1+3 dans cet exemple) de taille identique. Le "trucage" ne se verra pas et impressionnera votre visiteur.
 *  Il est possible de réaliser plus de 3 rollovers, mais parfois, l'affichage peut devenir lent (à vous de tester).
 * Attention à ne pas charger des images trop lourdes, l'effet serait inverse, et votre visiteur va se lasser.
 * Pour la lenteur, la solution serait peut être de charger les images avant avec un "truc" comme cela  (à vérifier):

<img src="http://url-image-1.jpg" style="display:none;" border="0">

Limitation
   Aucune. Ce code ne contient pas de Javascript. Il suffit de l'écrire dans le html d'un article.


Extention possible
    En plus de faire apparaître un nouvelle image (comme ci-dessus), il est possible de rendre chaque zone cliquable (essayez sur la grotte de Zoé). Cela transforme votre image en menu original. Comme vous savez faire un lien, il n'y a pas de problème.

Retour menu Widget