La balise map

[benjiiim]

Bonjour,

J'aimerai savoir si la balise map est accessible

Question avantage : elle permet d'assembler des images tout en ayant des liens dessus.

Qu'en pensez vous ?

[petit-ourson]

J'utilise un tel menu sur mon site.

D'apres cette page de LA Grange, c'est accessible.

Par contre si le visiteur n'affiche pas les images, ont perd tout le menu. Donc j'ai 'caché' une liste avec les liens de mon menu sous mon image map ...

Normalement, on peut faire un truc du style :

     <OBJECT data="navbar1.gif" type="image/gif" usemap="#map1">
     </OBJECT>

     <MAP name="map1">
       <P>Navigate the site:
       <A href="guide.html" shape="rect" coords="0,0,118,28">Access Guide</a> |
       <A href="shortcut.html" shape="rect" coords="118,0,184,28">Go</A> |
       <A href="search.html" shape="circle" coords="184,200,60">Search</A> |
       <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">Top Ten</A>
     </MAP>

Mais ca marche ps avec IE ... Enfin en tout cas j'avais pas réussi à le rendre compatible. Si quelqu'un veut tester les exemples ... (Source)

[Monique]

Bonjour,

Effectivement, les images map (ou images cliquables, images réactives) peuvent être accessibles.

Il existe 2 types d'images map :

- côté serveur : l'information sur les liens hypertextes que l'image contient est stockée sur le serveur et nécessite le renvoi au serveur des coordonnées graphiques du point cliqué (ce qu'un navigateur texte est incapable de faire)

- côté client : l'information sur les liens hypertextes que l'image contient est stockée dans le navigateur Web et ne nécessite pas d'appel au serveur

Il est donc préférable d'utiliser une image map côté client, à plus forte raison s'il l'image est utilisée pour la navigation.

Il est évidemment indispensable de donner un contenu alternatif significatif à l'aide de l'attribut alt pour l'image map et pour chaque zone cliquable.

En cas d'image map côté serveur, il faut doubler l'information par un menu texte équivalent.

[LaurentDenis]

La ressource la plus simple et la plus complète sur l'accessibilité des imagemap reste, il me semble, cette vieille page de l'IBM accessibility Center (en anglais).

[ste]

Juste, pour information :

Il faut bien comprendre que l'élément map ne sert pas qu'à la gestion des images cartes côté client ; en effet, il y a un autre aspect souvent méconnu !

cf ce post, dans lequel l'attention a été attiré sur ce sujet :

http://www.webmaster-hub.com/index.php?showtopic=4767

[petit-ourson]

Peux tu approfondir ?

tu parles des map du style :

<OBJECT data="barrenavigation1.gif" type="image/gif" usemap="#carte1">
     <MAP name="carte1">
       <P>Naviguer dans le site :
       <A href="guide.html" shape="rect" coords="0,0,118,28">Plan d'accès</a> |
       <A href="raccourci.html" shape="rect" coords="118,0,184,28">Entrée</A> |
       <A href="recherche.html" shape="circle" coords="184,200,60">Recherche</A> |
       <A href="top10.html" shape="poly" coords="276,0,276,28,100,200,50,50,276,0">
                Les dix premiers du hit-parade</A>
     </MAP>
     </OBJECT>

Si c'est le cas, quelqu'un a réussi a faire marcher ce code sous IE ?

[benjiiim]

non en fait je parlais plus d'une balise map me permetant de rassembler quatre bouton en un seul de cette facon :

<map name="boutons">
<area shape="rect" coords="0,0,15,15" href="lien1.asp" alt="lien1">
<area shape="rect" coords="15,15,30,30" href="lien2.asp" alt="lien2">
</map>
<img src="../images/boutons.png" alt="boutons" usemap="#boutons">

cela me permetait de gagner quelques ko car l'image rassemblé était plus petite que la somme des trois autes et de gagner autant de requête-1 qu'il y avait de bouton.

Finalement j'ai laissé tomber car ces liens sont vraiment important pour moi (ils permettent de réserver ou de demander des infos) donc il faut que je les soignent particulierement avec une balise alt pour chacun qui apparaisse vraiment par exemple.

Mais depuis (ca na plus rien avoir avec le sujet) je me suis mis au png et je suis passé pour la somme des quatres boutons de 9.35 ko en gif à 4.46 ko en png sans perte de qualité.

Voila !

En conclusion je dirais que la balise map est a évité car elle pose si j'ai bien compris parfois des problèmes donc autant sans passer si l'on peut !

[petit-ourson]

Ma questio nétait destiné à ste )

Sinon bah ça pose pas trop de problème je trouve si c'est une image du coté client.

[benjiiim]

désolé

[finidori]

Pour petit-ourson

Ca marche sous IE et Mozilla. Mais je ne sais pas si c'est ce que voulez faire.

<img title="titre" alt="alt" src="img/img.jpg"" usemap="#Map" />

<map name="Map" id="Map">

<area title="t1" alt="alt1" shape="rect" coords="367,215,410,238"

href="m1.htm" />

</map>

[petit-ourson]

Non j'aimerai faire fonctionner la version avec des <a> et non des <area>

[LaurentDenis]

Cette version ne fonctionne pas, comme tu as pu le constater, faute de support cohérent de <object> dans les navigateurs. Les seules imagemap actuellement utilisables recourent à <img... <map... et <area...

Modifié 7 Août 2004 par LaurentDenis

[petit-ourson]

Sniff. suis rassuré, le probleme ne provient pas de moi ;o)

Modifié 7 Août 2004 par petit-ourson