Translation




 

 

 
 
French to English French to German French to Italian French to Spanish
French to Japanese French to Korean French to Russian French to Chinese (Simplified)
 

 

 
 

 

 

 

 

Ombre et lumière

2 février 1995 4 02 /02 /février /1995 10:00
   Le but de ce petit "truc" est de faire apparaitre de nouvelles images (3 dans cet exemple) en mettant la souris sur des zones définies . Pas besoin de cliquer.


Voici l'image
Dans cette image, il faut trouver ZOE (une peluche).


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 

Partager cet article

Repost 0
Published by Le Chevalier Dauphinois - dans ** Mes Widgets
commenter cet article

commentaires