Cln's Blog

Cln's Blog

Suite et fin, enfin...


Mapping Css

Cet article est une pure duplication de celui-ci, mais comme ce blog est inactif depuis plus de trois ans, c'est au cas où il soit finalement supprimé... et maintenant il l'est, supprimé...
---------------------

Le Mapping (de base) consiste à découper une image en plusieurs zones, et mettre un lien sur chaque zone :

L'exemple fait ici se passe exclusivement en HTML, pratique pour les articles où vous voulez résumer des liens sur une seule image ! ;-)

Je vous donne le résultat tout de suite pour voir ce que cela donne, explication à la suite :

 
Explications détaillées :

J'ai d'abord pris soin de charger cette image sur mes fichiers d'OB et j'ai gardé l'url sur le bloc note par exemple..

Passons aux choses sérieuses, là ça se complique un peu, voici le code html de cet exemple :


<div align="center">
<img border="0" alt="" src="http://idata.over-blog.com/0/13/75/16/divers/beatles-letitbe.jpg" usemap="#example" /> <map name="example">
<area shape="Rect" coords="30,37,151,157" href="http://www.yahoo.com" />
<area shape="Rect" coords="157,37,277,157" href="http://www.google.fr" />
<area shape="Rect" coords="29,164,150,283" href="http://www.over-blog.com" />
<area shape="Rect" coords="157,163,276,284" href="http://css-html.over-blog.com" />
</map>
</div>


La balise <div align="center">.....</div> est utilisée pour définir l'alignement de l'image, gauche, milieu, droite, haut, bas. (si vous ne la mettez pas,l'image sera automatiquement placé à gauche).

La balise <img border="0" alt="" src="http://idata.over-blog.com/0/23/02/14/article/beatles-letitbe.jpg" usemap="#example" /> sert à faire appel à l'image ; ici j'ai mis border="0", c'est une option de bordure (facultative) autour de l'image, si vous en désirez une bien sur ! Ne supprimez pas la fin  usemap="#example"/>

La balise <area shape="Rect" coords="x1,y1,x2,y2....etc" href="url du lien" /> est la plus difficile à comprendre, décomposons la :

<area shape="Rect" est la forme de la zone définie, ici ce sera un rectangle, vous avez le choix entre plusieurs formes de zones :

shape="Rect" (un rectangle)
shape="circle"  (un cercle)
shape="polygon"  (un polygone)

Ensuite, coords="x1,y1,x2,y2.....etc", ce sont les coordonnées de la zone à définir. Pour l'exemple du rectangle, pour la photo de John Lennon, j'ai défini les coordonnées x, y de 2 points : le coin supérieur gauche et le coin inférieur droit (les 2 extremes quoi), bien sur les definir à la main est impossible, je me suis servi de ce site http://www.pangloss.com/seidel/ClrHlpr/imagemap.html

Cela vous donnera les coordonnées exactes des 2 points. Vous n'aurez plus qu'à entrer les valeurs x et y de chaque points, séparés par des virgules ! comme dans l'exemple où les valeurs se suivent comme ça : "x1,y1,x2,y2"

Si vous avez plusieurs zones à définir, rajoutez la ligne <area......> comme dans l'exemple, à chaque fois que vous désirez une zone de plus !

La balise href="url du lien" définit le lien donné à la zone !

Archives

Articles récents