Mis à jour le mardi 29 octobre 2013
  • Facile
Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Introduction du cours

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

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 :

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

  • Image utilisateur

    coords, les coordonnées des formes définies par shape, mesurées en pixels depuis le coin supérieur gauche de l'image :

    • Image utilisateur

      « rect », les coordonnées des coins supérieur gauche et inférieur droit : « x1,y1,x2,y2 » ;

    • Image utilisateur

      « circle », les coordonnées du centre du cercle et son rayon : « x,y,r » ;

    • Image utilisateur

      « poly », les coordonnées de chacun des points, dans l'ordre : « x1,y1,x2,y2,x3,y3… » ;

    • « 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 :

<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 !

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 :

<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 !!! :p 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 :

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

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 ? :D

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

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 :D ). 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 :

<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 :

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

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 :

<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 :

<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 :

<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. :D

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

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

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

Bonne programmation !

Exemple de certificat de réussite
Exemple de certificat de réussite