Accès rapide : Aller au contenu de l'article |  Aller au menu |  Liste complète des articles  |  Aide  |  Contact |
bandeau

Accueil > Aides pour les nuls > Balise map et coordonnées

Balise map et coordonnées

Le problème : j’avais besoin de mettre un bandeau comportant une partie cliquable. Il a fallu :
– 1) utiliser une balise « map »
– 2) calculer les coordonnées de la partie cliquable

Voici ce bandeau :

JPEG - 17.4 ko
Mon_bando

il fait en tout 481px de large

Il faut ensuite prendre quelques mesures, comme ceci :

JPEG - 25.6 ko
Bando repères
228x146 et 303x162

Et puis il faut l’envoyer à la racine du site. Cela donne alors son URL : http://www.journal-la-mee.fr/bando.jpg

 La balise « map »

Dans l’en-tête de mon site, j’ai mis ceci :

<center>
<table border="0" cellpadding="0" cellspacing="0" width="481" summary="">
           
<tr>
<td>
               
<map name="fpmap0" id="fpmap0">

<area href="/spip.php?page=sommaire" shape="rect" coords="228, 146, 303, 162" alt="" />

<area href="/spip.php?page=plan" shape="rect" coords="319, 146, 368, 162" alt="" />

<area href="/ecrire" shape="rect" coords="385, 146, 442, 162" alt="" />
               
</map>
               
<img src="/bando.jpg" alt="" usemap="#fpmap0"/>

</td>
</tr>
</table>
</center>

 Quelques repères

area href ... indique bien que l’aire est cliquable

area href=« /spip.php ?page=sommaire » .... indique que l’aire renvoie à la page sommaire du site

img src=« /bando.jpg » alt=«  » .... ceci est l’adresse du bando

Les coordonnées des sommets des zones cliquables (voir schéma). A partir des mesures faites, on met alors les coordonnées : 228, 146, 303, 162, pour la zone « sommaire »

Cela donne ceci (et cette fois, les zones sommaire, plan, admin, sont devenues cliquables) :