[Plan du site] Vous êtes ici --- > Le Site du Zéro > Les tutoriels > Non-Officiels > Site Web > XHTML / CSS > Images mappées et liens hypergraphiques > Lecture du tutoriel

Images mappées et liens hypergraphiques

Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)

"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 redirigera vers des pages différentes (lien hypergraphique). Les utilisations sont vastes, mais voyons tout de suite comment cela fonctionne.

Sommaire du tutoriel :

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

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). A 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 in-line : c'est-à-dire qu'elle doit être dans une balise block, telle que <p></p>.

la balise

<area/>

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

shape : c'est le type de zone, qui peut prendre 4 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 : ce sont 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 du coin 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 1 ou 2 points, la balise n'aura aucun effet.
- "default" : n'a pas besoin de cet argument, car il définit la cible de tout le reste de l'image.
href : c'est 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>
   <img src="mon_image.png" height="100" width="100" href="ma_cible.html" alt="image"/>
</p>

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

Pour ceux qui ont lu le tuto avant, je tiens à préciser que l'attribut map est maintenant obligatoire. Allez savoir pourquoi

.

On obtient :
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 car 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 A TOUT, QUAND MÊME. :colere:

Il faut également savoir que les coordonnées doivent dépendre de la taille de l'image : si vous réduisez celles-ci, votre map ne se réduira pas et 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 voir maintenant 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

). Donc, des informaticiens un peu moins fainéants créent 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 en version française, traduite 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 faire un mapping (elle doit être déjà 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 vouliez 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 utilisez les outils 'rectangle', 'rond' et 'polygone' pour créer des areas.
Une fois créée, 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, cet 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 area 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.
Après, il faut 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 un 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...
Donc, il suffit 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 avez cette image :

Image utilisateur

Même chose que pour la première, sachez que le rectangle rouge prend TOUTE l'image.
o_O

Il suffit de créer un rectangle bleu, puis un autre rouge qui prend toute l'image !

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.

o_O

On fait des rectangles qui entourent le blanc ?

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

Voilà à peu près toutes les petites astuces que je peux vous donner pour faire vos propres maps.

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 !

Tutoriels

Communauté

Mon compte

Recherche

Livre d'or

Publicité