Informations sur les balises <map> et <area>

[Hell-eonore]

Bonjour a tous,
Alors voila, j'ai decouvert recemment les balises <map> et <area> qui permettent, sur une image donnee, de mettre un lien a un endroit precis de cette image (sur la page d'accueil notamment). [Exemple sur ce forum ]
J'ai essayé de chercher sur le forum mais je ne sais pas quoi taper...
J'aimerai savoir si quelqu'un pourrait m'expliquer comment cela fonctionne et comment on peut le mettre en place en me donnant par exemple le lien du tuto.

Merci d'avance
Hell'

[Anzu]

Bonjour,

Les balises map et area permettent de mettre des liens à des endroits précis sur une image grâce à des coordonnées.
Ces coordonnées sont visibles via un logiciel de graphisme. On peut le faire via Photoshop, mais je n'ai pas connaissance des autres logiciels (ceux qui permettent de voir ces coordonnées)

Cordialement.

[Ea]

Bonjour,


Vous avez une image par exemple :

Code:

<img src="http://2img.net/i/fa/optimisation_fdf/fr/baniere_fr.jpg" width="835" height="158" border="0" alt="carte" />

Ensuite vous pouvez associer cette image à une " map " qui permettent de définir un lien ou d'autres actions sur certains zones de l'image, pour ce faire il suffit de mettre :

Code:

<map name="lacarte">
</map>
<img src="http://2img.net/i/fa/optimisation_fdf/fr/baniere_fr.jpg" width="835" height="158" border="0" alt="carte" usemap="#lacarte" />

Là notre image a un attribut usemap qui envoit vers la carte avec un nom " lacarte ", là vu que la map est vide ça ne change rien ^^

Mais il y a donc moyen de délimiter une zone et de mettre un lien ou d'autres évènements sur cette zone.

Par exemple voici une zone avec un rond de rayon 20 et de centre à 40 pixels du haut de l'image et 50 pixels du bord gauche :

Code:

<area shape="circle" coords="50,40,20" href="http://www.google.com/" alt="Lien google" />

En voici un autre rectangulaire avec le bord haut gauche à 10 pixels du haut de l'image et 100 pixels du bord gauche de l'image, et le bord bas droit à 40 pixels du haut de l'image et 200 pixels du bord gauche de l'image :

Code:

<area shape="rect" coords="100,10,200,40" href="http://www.yahoo.com/" alt="Lien vers yahoo" />

Donc en associant les deux ça nous donnerait un code :

Code:

<map name="lacarte">
  <area shape="rect" coords="100,10,200,40" href="http://www.yahoo.com/" alt="Lien vers yahoo" />
  <area shape="circle" coords="50,40,20" href="http://www.google.com/" alt="Lien google" />
</map>
<img src="http://2img.net/i/fa/optimisation_fdf/fr/baniere_fr.jpg" width="835" height="158" border="0" alt="carte" usemap="#lacarte" />

Voici un peu plus de détails ( et on parle aussi du troisième type de zone polygone ) : ici.

Sinon il y a des logiciels qui vous permettent de tracer le rectangle, le rond ou le polygone et vous n'avez qu'a reprendre le code que le logiciel a généré.

Par exemple dans gimp en allant dans le chemin : "Filtes > Web > Image cliquable Web..." on a qu'à faire après avoir défini ses zones " Affichage > Source " et on a la "map" réalisée avec tout les area.

Edit : ah en même temps que anzu, donc on dirait qu'on sait le faire aussi avec photoshop mais vu le prix, gimp est gratuit lui (a)

Cordialement.

[Hell-eonore]

Merci beaucoup de votre aide, je vais essayer

Cordialement.

[Niten]

Il y a un autre bon tutoriel ici même sur le forum des forums : Le lien
C'est également très bien expliqué et imagé, ce qui peut aider les nouveaux utilisateurs de ce système.

[Hell-eonore]

Ah merci beaucoup aussi, je vais tout essayer alors