Balise map et coordonnées

Vous êtes au contenu. Allez au sommaire de l'article.

Sommaire

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 :


Mon_bando

il fait en tout 481px de large

Il faut ensuite prendre quelques mesures, comme ceci :


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