Un map est une image comprenant plusieurs zones. Sur chacune de ces zones, on crée un lien qui renvoie à une page. C'est essentiellement utilisé pour faire des menus, des cartes géographiques...
Dans ce cas précis, on va créer un menu.
L'exercice n'est pas très difficile, il faut seulement être minutieux et attentif.
Première étape : concevoir votre menu.
Je travaille sous Paint Shop Pro, mais vous pouvez utiliser tout logiciel de dessin un peu évolué (photophiltre, photoshop, etc...)
Je réalise mon menu : Il s'agit d'une image avec fond transparent.
Deuxième étape : trouver les coordonnées de chacune des zones
Sur PSP : Fichier - Exporté - Image cliquable
Une fenêtre s'ouvre
Avec la flèche, le carré ou le rond (selon la forme du dessin à entourer) du menu outils, je délimite le 1er encart de mon menu (on le voit en vert) qui mène vers Les premiers pas en confiance.
Vous pouvez observer sur cette fenêtre les coordonnées de cet encart
Gauche |
12 |
Haut |
11 |
Droite |
193 |
Bas |
114 |
On va les noter sous cette forme :
12,11,193,114
Pour réitérer l'opération sur le sommaire suivant, je clique sur le + dans la 1ère ligne à droite pour faire glisser le dessin vers le bas.
Dans mon exemple, les coordonnées précises de chaque encart sont
Les premiers pas en confiance |
11,9,193,112 |
Ajouter, enlever, déplacer ou masquer |
13,150,194,250 |
Ascenseurs |
11,290,193,393 |
3ème étape : sur le blog
Vous avez hébergé votre image et obtenu une adresse.
La mienne est http://www.casimages.com/img/gif/0707200724166265884263.gif
En HTML, vous copiez ce pavé
<img border="0" alt="texte au survol de la souris" src="adresse de l'image" usemap="#nom
du Map" /> <map id="nom Map" name="nom Map ">
<area alt="Nom lien 1" href="URL 1" coords="11,9,193,112" shape="RECT" />
<area alt="Nom lien 2" href="URL 2" coords="13,150,194,250" shape="RECT"/>
<area alt="Nom lien 3" href="URL3" coords="11,290,193,393" shape="RECT" />
</map>
Vous pouvez rajouter autant de lignes
<area alt="Nom lien 3" href="URL3" coords="11,290,193,393" shape="RECT" />
que besoin est, avant le </map> final
Vous personnalisez ensuite les mots en couleur.
Dans mon cas, j'obtiens
<img border="0" alt="Menu des ficelles" src="http://www.casimages.com/img/gif/0707200724166265884263.gif" usemap="#Menu" />
<map id="Menu" name="Menu ">
<area alt="Les premiers pas en confiance" href="http://annak.over-blog.com/article-3254809.html" coords="11,9,193,112" shape="RECT" />
<area alt="Ajouter, enlever, déplacer ou masquer" href="http://annak.over-blog.com/article-3250730.html" coords="13,150,194,250" shape="RECT" />
<area alt="Ascenseur" href="http://annak.over-blog.com/article-3250425.html" coords="11,290,193,393" shape="RECT" />
</map>
Et voici le résultat : en cliquant sur chaque case, on arrive sur le sommaire correspondant
OS: Windows XP
