> Le Site du Zéro - Informatique > Cours > Tutoriels > Site Web > HTML / CSS > Images mappées et liens hypergraphiques > Lecture du tutoriel

Images mappées et liens hypergraphiques

Par

shuss

Mise à jour : 22/08/2008

206 visites depuis 7 jours , classé 390/777

« Images mappées et liens hypergraphiques »… ça veut dire quoi, ça ? o_O

En fait, il s'agit de créer des « zones » (mappées) sur votre image qui, selon l'endroit où l'on clique, nous redirigeront vers des pages différentes (liens hypergraphiques). Les utilisations sont vastes, mais voyons tout de suite comment cela fonctionne.

Retour en haut

Sommaire du tutoriel :

Votre première image mappée
On est fiers d'être fainéants !
Petites astuces

Retour en haut

Votre première image mappée

Votre première map

La balise <map></map>

Il est maintenant temps de créer votre première map.

Voici le script permettant de l'insérer :
Code : HTML

<p>
   <map name="ma_map" id="id_map">
      <!--informations de votre map-->
   </map>
</p>

C'est la balise <map></map> qui permet de créer une map, et elle prend deux arguments obligatoires.

name : c'est le nom de votre map (il doit être unique).
id : c'est l'id de votre map (unique aussi). À vrai dire, il n'a pas vraiment d'utilité, mais il est obligatoire pour respecter les normes W3C.

Notons également que cette balise est une balise inline : elle doit donc se situer au sein d'une balise block, telle que <p></p>.

La balise <area/>

Il est maintenant temps d'indiquer les informations de votre map.
Celles-ci sont contenues dans les différentes balises <area/> qui prennent quatre attributs.

shape, le type de zone, qui peut prendre quatre valeurs :
- « rect », s'il s'agit d'un rectangle ;
- « circle », s'il s'agit d'un cercle ;
- « poly », s'il s'agit d'un polygone irrégulier ;
- « default », s'il s'agit de la cible par défaut de l'image.
coords, les coordonnées des formes définies par shape, mesurées en pixels depuis le coin supérieur gauche de l'image :
- « rect », les coordonnées des coins supérieur gauche et inférieur droit : « x1,y1,x2,y2 » ;
- « circle », les coordonnées du centre du cercle et son rayon : « x,y,r » ;
- « poly », les coordonnées de chacun des points, dans l'ordre : « x1,y1,x2,y2,x3,y3… » ;
  
  Si vous ne définissez que un ou deux points, la balise n'aura aucun effet.
- « default », argument dont nous n'avons pas besoin, car il spécifie la cible de tout le reste de l'image.
href, la cible de votre lien (absolu ou relatif… comme l'indique le tuto sur les liens). Il est facultatif.
alt, c'est le texte qui s'affiche si l'image ne s'affiche pas, ou pour les non-voyants. Obligatoire, normes W3C obligent. Notons également que la balise <img/> ne doit plus en posséder.

On peut par exemple créer le code suivant :
Code : HTML

<p>
   <map name="ma_map" id="id_map">
      <!--informations de votre map-->
      <area shape="rect" coords="10,10,20,30" href="a.html" alt="vers a"/>
      <area shape="circle" coords="40,20,10" href="b.html" alt="vers b"/>
      <area shape="poly" coords="10,30,30,30,20,50" href="c.html" alt="vers c"/>
      <!-- ainsi de suite … -->
   </map>
</p>

Vous venez de créer votre première map !

La balise <area shape="default" …> n'est en rien obligatoire.

Ce tutoriel est donc terminé.

Eh, mais j'fais comment pour l'utiliser, moi ?

Décidément, on ne peut pas être tranquille…

Insertion d'une map dans une image

Tout d'abord, rappelons comment insérer une image avec un lien classique :
Code : HTML

1
2
3

<p>
   <a href="ma_cible.html"><img src="mon_image.png" height="100" width="100" alt="image"/></a>
</p>

Maintenant, on oublie href (c'est la map qui s'en occupe), et on découvre avec stupéfaction… usemap !!!

Pour ceux qui auraient déjà lu ce tuto avant, je tiens à préciser que l'attribut map est désormais obligatoire. Allez savoir pourquoi.

Nous obtenons :
Code : HTML

1
2
3

<p>
   <img src="mon_image.png" height="100" width="100" usemap="#ma_map" alt="image"/>
</p>

Pourquoi on met un # ?

Tout simplement parce que les maps sont considérées comme des ancres.

On peut donc mettre un argument tel que « autre_page.html#ma_map » pour une map se trouvant sur une autre page !

Pourquoi les maps sont considérées comme des ancres ? :ange:

JE N'AI PAS RÉPONSE À TOUT, QUAND MÊME. :colere:

Il faut également savoir que les coordonnées dépendent de la taille de l'image : si vous réduisez celle-ci, votre map ne se réduira pas mais se déplacera !

Dernière chose : pour connaître les coordonnées nécessaires à votre map, je vous conseille Paint, simple et efficace (les coordonnées sont en bas à droite). Vous pouvez aussi utiliser un logiciel tel que Photoshop, mais pourquoi chasser les mouches au lance-roquette ?

C'est tout pour cette première partie, nous allons maintenant découvrir un logiciel de fainéant qui fait tout ça tout seul !

Retour en haut

On est fiers d'être fainéants !

Création d'une map avec MapThis

Vous le savez, informatique rime avec fainéant (si, si, je vous jure

). Des informaticiens un peu moins fainéants créent donc des logiciels pour ceux qui le sont plus.

Les liens hypergraphiques n'échappent pas à cette règle !

C'est ainsi qu'est né… MapThis, que vous pouvez télécharger ici, traduit en version française par Shadowblade (si le lien est mort, une recherche Google suffira !).

Décompressez le freeware (je ne pense pas que des explications soient nécessaires), et lancez-le.

Vous obtenez cet écran :
Image utilisateur

Cliquez sur Nouveau.
Sélectionnez ensuite l'image sur laquelle vous voulez effectuer un mapping (elle doit déjà être de la bonne taille).

Cliquez ensuite sur Image utilisateur

Vous voyez ceci :
Image utilisateur

Titre : il s'agit du nom de votre map.
Auteur : à moins que vous ne souhaitiez mettre un copyright, cette information est inutile.
URL : il s'agit du lien par défaut de votre map. Il est facultatif.
Description : encore une information inutile !
MAP format : cochez CSIM.

Cliquez maintenant sur ce bouton Image utilisateur

pour ouvrir la fenêtre des « areas ». Vous pouvez utiliser les outils « rectangle », « rond » et « polygone » pour créer des areas.
Une fois créé, double-cliquez sur son nom pour faire apparaître cette fenêtre :
Image utilisateur

URL […] : la cible de votre area.
Cible […] : une notion un peu plus compliquée. Cette option sert à définir où la page va se charger. Si vous utilisez les frames (déconseillées) ou les <object></object> (beaucoup mieux), vous pourrez demander à charger la page dans votre balise <object></object>, en mettant ici son attribut name.
Commentaire […] : encore des commentaires inutiles !

Créez donc autant de areas que vous voudrez, puis sauvegardez. Malgré le message, l'URL par défaut est bel et bien facultative !
Vous obtenez maintenant ceci :
Image utilisateur

Choisissez le format HTML, et enregistrez votre map.

Et les normes W3C ?

Eh oui, MapThis ne respecte malheureusement pas les normes W3C. Il va donc falloir modifier quelque peu le fichier.
Ouvrez votre fichier avec votre éditeur html, vous obtenez un code de ce genre :
Code : HTML

<BODY>
<MAP NAME="ma_map">
<!-- #$-:Image Map file created by Map THIS! -->
<!-- #$-:Map THIS! free image map editor by Todd C. Wilson -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:1.30 -->
<!-- #$DATE:Sun Nov 27 19:42:15 2005 -->
<!-- #$PATH:C:\Documents and Settings\user\Mes documents\Mes images\ -->
<!-- #$GIF:maison.JPG -->
<AREA SHAPE=RECT COORDS="120,85,464,276" HREF="a.html">
<AREA SHAPE=CIRCLE COORDS="66,77,33" HREF="b.html">
<AREA SHAPE=POLY COORDS="113,383,202,340,266,381,213,433,218,471,147,454,113,383" HREF="c.html">
<AREA SHAPE=default HREF="d.html">
</MAP></BODY>

Tout d'abord, les commentaires ne servent à rien.
Ensuite, tout doit être écrit en minuscules.
Il faut de plus des guillemets autour de « rect », « circle », « poly », et « default ».
Puis, il faut les arguments id à <map>, et alt à <area/> ; rajoutez-les / à <area/>.
Enfin, Il faut les mettre dans une balise block, telle que <p></p> (au passage, <body></body> ne sert à rien).
Rajoutez aussi quelques décalages pour hiérarchiser votre code.

On obtient maintenant :
Code : HTML

<p>
   <map name="ma_map" id="qqchose">
      <area shape="rect" coords="120,85,464,276" href="a.html" alt=""/>
      <area shape="circle" coords="66,77,33" href="b.html" alt=""/>
      <area shape="poly" coords="113,383,202,340,266,381,213,433,218,471,147,454,113,383" href="c.html" alt=""/>
      <area shape="default" href="d.html" alt=""/>
   </map>
</p>

Ce qui, une fois inséré dans une page, est valide !

Et on gagne du temps à faire tout ça ?

Oui. Là, c'était juste un exemple, mais quand vous allez faire des polygones très compliqués pour suivre une forme, vous allez remercier ce logiciel.

Cette deuxième partie touche à sa fin. Vous connaissez à peu près tout ce que je sais, et nous allons voir dans la dernière partie des astuces pour simplifier vos maps.

Retour en haut

Petites astuces

Voilà quelques petites astuces pour pouvoir créer vos maps plus facilement.

Exemple 1

Imaginons que vous ayez cette image :
Image utilisateur

Vous voulez que la zone bleue vous envoie vers page1.html, et que la zone rouge vous renvoie vers page2.html.
Pour la zone bleue, un simple cercle suffit, mais pour la zone rouge ?

Sachez qu'il y a une priorité pour les maps : les premières formes sont prioritaires sur les suivantes…
Il suffit donc d'avoir un code du genre :
Code : HTML

<p>
   <map name="ma_map" id="mon_id">
      <area shape="circle" coords="25,15,15" href="page1.html" alt="zone bleue"/>
      <area shape="circle" coords="15,15,15" href="page2.html" alt="zone rouge"/>
   </map>
</p>

Exemple 2

Cette fois, vous vous trouvez avec cette image :

Image utilisateur

Même chose que pour la première : sachez que le rectangle rouge prend TOUTE l'image.
Il suffit de créer un rectangle bleu, puis un autre rouge qui occupe toute l'image ! o_O

Eh bah non, on va faire plus simple : on va utiliser l'attribut « default » qui, je vous le rappelle, définit tout le reste de l'image. Ce qui donne par exemple :
Code : HTML

<p>
   <map name="ma_map" id="mon_id">
      <area shape="rect" coords="30,120,20,80" href="page1.html" alt="zone bleue"/>
      <area shape="default" href="page2.html" alt="zone rouge"/>
   </map>
</p>

Exemple 3

Voilà notre nouvelle image :
Image utilisateur

Cette fois, il n'y a que du rouge, et le blanc au centre ne renvoie vers aucune page.

On fait des rectangles qui entourent le blanc ? o_O

Cette fois-ci, on va utiliser un truc que j'appelle les areas qui servent à rien (eh oui, en xHTML, il y a beaucoup de trucs qui ne servent à rien

). Il suffit donc de supprimer l'argument href, comme dans ce script :
Code : HTML

<p>
   <map name="ma_map" id="mon_id">
      <area shape="rect" coords="30,120,20,80" alt="zone vide"/>
      <area shape="default" href="page2.html" alt="zone rouge"/>
   </map>
</p>

Exemple 4

Une dernière petite image à mapper :
Image utilisateur

Là, on a un petit problème : le cercle a son centre hors de l'image.

Sachez que vous pouvez tout à fait définir un point hors de l'image, et même lui donner des coordonnées négatives.

Ces trois exemples illustrent à peu près toutes les petites astuces que je puisse vous donner pour faire vos propres maps.

Retour en haut

Et voilà : vous êtes maintenant fin prêts à créer des liens hypergraphiques sur vos sites.

Sachez que tout ceci est bien sûr valide W3C, à condition de respecter les règles que je vous ai données.

J'espère que ce petit tutoriel vous a plu.

Bonne programmation !

Retour en haut

Retour en haut

46 commentaires pour "Images mappées et liens hypergraphiques"

Note moyenne : 4.00 / 4 (14 votes)

Pseudo	Commentaire
Goulamas	# Posté le 13/04/2010 à 11:01:47
	Très bien, très clair, merci ça sera bien utile tout ça!
Kevin49	# Posté le 04/06/2010 à 23:11:25
	Clair, utile, propre, merci beaucoup 20/20 Mon Projet de MMORPG 2D ouvert au public depuis Decembre 2009!
IgiX	# Posté le 02/09/2010 à 21:15:06
Blog Twitter close Études : Epitech Paris	=> Pourquoi les maps sont considérées comme des ancres ? JE N'AI PAS RÉPONSE A TOUT, QUAND MÊME. Vraie réponse : une encre c'est le id= ! $variable = 'le pape'; // le pape en string Alors Brice, aujourd'hui on va voir la programmation, tu pars bien haut, bien abstrait d'un void et tu descends sur un entier signé. Et tu cast, et tu cast et tu cast.
NaM chan	# Posté le 11/03/2011 à 17:52:55
NaM around the world	Bonjour ! Bon, créer une map : ok (avec Gimp, beaucoup plus simple, même s'il faut ajouter manuellement l'id de la balise <map> et supprimer "border" de la balise <img> pour respecter les normes W3C en XHTML 1.0 Strict + rajouter "title" pour si on veut des infos-bulles) Problème : comme les coordonnées sont en pixels, elles ne s'adaptent pas à la taille de l'image qui elle, est mise en %age selon la résolution de l'écran du visiteur... Ce qui fait donc que les liens définis se décalent selon la taille de l'image. Y'a-t-il une solution ?! Je désespère Merci On peut aussi bien prier une sardine, ce n'est qu'une question de foi.
yamissous	# Posté le 29/04/2011 à 00:43:44
Avis : Très bon Ville : Nancy Pays : France métropolitaine	Magnifique tuto! C'est bien que j'avais du temps pour le dénicher... On dirait qu'il se cache^^ Merci drozia.org Let's go! Si tous les cons volaient, il ferait nuit.