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="https://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='https://idata.over-blog.com/0/23/09/69/z-Test/ouestzoery2.jpg'" onmouseout="document.zoe.src='https://idata.over-blog.com/0/23/09/69/z-Test/ouestzoery1.jpg'" shape="circle" coords="305,144,55" />

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

<area onmouseover="document.zoe.src='https://idata.over-blog.com/0/23/09/69/z-Test/ouestzoery4.jpg'" onmouseout="document.zoe.src='https://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="https://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