« 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.
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.
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… » ;
« 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 :
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. ^^
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 !
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 :
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
Vous voyez ceci :
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
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 :
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 :
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.
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.
Voilà quelques petites astuces pour pouvoir créer vos maps plus facilement.
Exemple 1
Imaginons que vous ayez cette image :
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 :
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 :
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 :
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
