Informations sur les balises <map> et <area>

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Informations sur les balises <map> et <area>

Message par Hell-eonore le Sam 9 Avr 2011 - 8:50

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 Very Happy
Hell'


Dernière édition par Hell-eonore le Sam 9 Avr 2011 - 12:09, édité 1 fois

Hell-eonore
****

Féminin
Messages : 217
Inscrit(e) le : 11/07/2010

Hell-eonore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations sur les balises <map> et <area>

Message par Anzu le Sam 9 Avr 2011 - 11:32


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.

Anzu
+ Hyperactif +

Féminin
Messages : 20685
Inscrit(e) le : 30/08/2007

http://forum.forumactif.com/forum
Anzu a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations sur les balises <map> et <area>

Message par Ea le Sam 9 Avr 2011 - 11:47

Bonjour,


Vous avez une image par exemple :

Code:
<img src="http://illiweb.com/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://illiweb.com/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://illiweb.com/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.

Ea
Aidactif
Aidactif

Messages : 23442
Inscrit(e) le : 04/04/2008

Ea a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations sur les balises <map> et <area>

Message par Hell-eonore le Sam 9 Avr 2011 - 12:09

Merci beaucoup de votre aide, je vais essayer Wink

Cordialement.

Hell-eonore
****

Féminin
Messages : 217
Inscrit(e) le : 11/07/2010

Hell-eonore a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations sur les balises <map> et <area>

Message par Niten le Sam 9 Avr 2011 - 12:12

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.
Wink

Niten
**

Messages : 80
Inscrit(e) le : 06/04/2011

Niten a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Informations sur les balises <map> et <area>

Message par Hell-eonore le Sam 9 Avr 2011 - 12:28

Ah merci beaucoup aussi, je vais tout essayer alors Smile

Hell-eonore
****

Féminin
Messages : 217
Inscrit(e) le : 11/07/2010

Hell-eonore a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum