Lien dans une image

Bonjour tout le monde

Je commence tout juste la creation de mon site et donc j'ai beaucoup de lacune

Je voudrais savoir comment faire pour que sur une image je puisse cliqué a un endroit precis de limage et sa menvoi a une autre page svp

Merci

Bonjour,

Cela s'appelle une Image Map et ça se fait à l'aide des éléments HTML suivants:
- img;
- map.

Tu peux faire une petite recherche sur le Web pour trouver des exemples.

Florent V. a écrit :
Cela s'appelle une Image Map et ça se fait à l'aide des éléments HTML suivants:
- img;
- map.

Ou alors via CSS :
- l'image en fond avec la propriété background,
- le lien positionné absolument (+ text-indent).

Exemple :

XHTML

<div id="conteneur">
     <a href="#">Lien</a>
</div>

CSS

div#conteneur {
position:relative; }

div#conteneur a {
width:XXXpx;
height:XXXpx;
position:absolute;
top:XXXpx;
left:XXXpx; 
text-indent:-9999px;
outline:none; }

- avec width et height tu règles la taille de la zone cliquable,
- top et left la position du lien par rapport à l'image (plus d'infos sur le positionnement absolue),
- text-indent va permettre de cacher le texte,
- outline:none masque les pointillés disgracieux résultant du text-indent.

Voilà, c'est si t'as envie d'aller "un peu plus loin"

BeliG a écrit :

Ou alors via CSS :

Non, dans 90% des cas, en raison d'une accessibilité nulle.

Bonjour,

Pourquoi celà poserait-il des problèmes d'accessibilité plus importants que l'imagemap elle-même?
Comment les navigateurs non-graphiques rendent-ils les imagemaps?

Une solution sous forme de liste retouchée avec un CSS activé après un test JS permettant de vérifier qu'on peut afficher des images serait-elle viable?

Cordialement, SD.

Laurent Denis a écrit :
Non, dans 90% des cas, en raison d'une accessibilité nulle.

Et si l'image en question est simplement décorative ?

De plus, j'suis pas vraiment d'accord concernant cette accessibilité nulle dont tu parles. Le text-indent ne fait pas disparaitre le lien, il le pousse simplement en dehors des limites de l'affichage. Donc, aucun problème lors de la désactivation des CSS ou d'une lecture vocale... non ?
Modifié par BeliG (07 Apr 2008 - 15:57)

BeliG a écrit :

Ou alors via CSS :
- l'image en fond avec la propriété background,
- le lien positionné absolument (+ text-indent).

Exemple :

XHTML

<div id="conteneur">
     <a href="#">Lien</a>
</div>

CSS

div#conteneur {
position:relative; }

div#conteneur a {
width:XXXpx;
height:XXXpx;
position:absolute;
top:XXXpx;
left:XXXpx; 
text-indent:-9999px;
outline:none; }

- avec width et height tu règles la taille de la zone cliquable,
- top et left la position du lien par rapport à l'image (plus d'infos sur le positionnement absolue),
- text-indent va permettre de cacher le texte,
- outline:none masque les pointillés disgracieux résultant du text-indent.

Voilà, c'est si t'as envie d'aller "un peu plus loin"

Merci tout le monde j'ai utilisé cette forme sa a l'air de marché super le truc c'est il existe pas un tableau ou kelke chose comme sa pour savoir les coordonnees de chaque point car je ne sais ou metre chaque lien :s merci

FiFtYrIdEr33 a écrit :
il existe pas un tableau ou kelke chose comme sa pour savoir les coordonnees de chaque point car je ne sais ou metre chaque lien :s merci

Par exemple, top:0 et left:0 va positionner ton lien tout en haut à gauche du conteneur (#conteneur).

Perso, pour placer l'élément à l'endroit voulu j'augmente (ou réduis) petit à petit la valeur de ces 2 propriétés... Après en faisant un screen de ton site et en bidouillant avec les outils de sélection de ton logiciel de dessin ça doit aussi marcher

BeliG a écrit :
Et si l'image en question est simplement décorative ?

De plus, j'suis pas vraiment d'accord concernant cette accessibilité nulle dont tu parles. Le text-indent ne fait pas disparaitre le lien, il le pousse simplement en dehors des limites de l'affichage. Donc, aucun problème lors de la désactivation des CSS ou d'une lecture vocale... non ?

Un peu confus, tout ça, et notamment ton exemple de code. Mais bon :

- s'il s'agit d'un libellé (entre <a> et </a>) visible et positionné sur un background CSS, il n'y a pas de text-indent pour le masquer et je ne vois pas le rapport avec la choucroute, si j'ose dire. Quoi qu'il en soit, ce n'est accessible que si l'image de fond n'est pas elle-même porteuse d'information, et si la position du lien sur l'image de fond n'est pas non plus porteuse d'information par elle-même (ce sont les 10% que j'ai laissé passer ci-dessus).

- si text-indent ou d'autres astuces CSS sont utilisées pour masquer le libellé, c'est que celui-ci est remplacé par un pseudo-contenu en background CSS, ou une zone cliquable vide, et ce n'est jamais accessible.

En effet: une information dépendante d'un background CSS, que cette dépendance soit liée au positionnement ou au background lui-même, et même si ce background remplace à l'affichage un texte masqué par une astuce, n'est JAMAIS accessible : l'information est légitimement perdue avec l'activation de l'option du navigateur "Ignorer les couleurs spécifiées dans les pages Web" (pour reprendre le libellé de l'option d'accessibilité d'IE).
Modifié par Laurent Denis (07 Apr 2008 - 17:41)

le prob c'est que jai 110 page de cartes avec 4lien a metre chaque cartes donc voila aucune carte ne se resemble donc voila pk je voulais un tableau ou quoi car la si je doit faire au pif et descendre monter ect petit a petit jai pas fini

Tu as donc 110 images MAP à faire et 440 zones AREA à délimiter et positionner, sans oublier leurs alternatives textuelles. On s'en remet très bien, tu verras.

Pour éviter les tâtonnements au pif, un peu de notions mathématiques de base seront un plus, beacoup plus probant que des astuces CSS ou je ne sais quel autre bricolage
Modifié par Laurent Denis (07 Apr 2008 - 19:13)

Merci tout le monde mais je narive pas a faire disparaitre le nom du lien je voudrais sa soit invisible mais ke lon puisse cliké a lendroit ou je ler mit car il y a des tourbillons fait pour

@FiFtYrIdEr33 :

110 images MAP et 440 zones AREA ? Bon courage...
En dernier recours tu peux utiliser un logiciel comme HTML MAP Designer Pro qui te générera le code voulu en fonction de tes sélections (pas testé perso)...

@Laurent Denis :

Tu remarqueras en relisant le sujet de FiFtYrIdEr33 qu'il ne précise aucune contrainte liée à l'accessibilité. Une solution à base de CSS reste donc envisageable dans le cas où l'image est non-significative (Cf. Des images accessibles, je précise pas l'auteur). Tout ça pour dire (et sans mauvaise foi) que je ne vois pas où se situe la confusion dans mon exemple de code.

a écrit :
Une information dépendante d'un background CSS, que cette dépendance soit liée au positionnement ou au background lui-même, et même si ce background remplace à l'affichage un texte masqué par une astuce, n'est JAMAIS accessible : l'information est légitimement perdue avec l'activation de l'option du navigateur "Ignorer les couleurs spécifiées dans les pages Web" (pour reprendre le libellé de l'option d'accessibilité d'IE).

Merci pour la précision.

a écrit :
Pour éviter les tâtonnements au pif, un peu de notions mathématiques de base seront un plus, beaucoup plus probant que des astuces CSS ou je ne sais quel autre bricolage

Très subtil... Dommage cette image biaisée que tu te fais de moi.