Empêcher déplacement d'un élément PA quand on redimensionne la fenêtr

Bonjour,
Voilà 3 jours que je me bats avec le problème suivant :
J'ai une image en background avec 4 visages. Je voudrais créer un lien à partir de chacun des visages. J'ai donc créé un élément PA positionné sur le premier visage, j'y ai inséré une image transparente sur laquelle j'ai collé le lien.
Mon problème est que : lorsque je fais un aperçu sur les navigateurs, mon élément PA se balade en fonction de la dimension de la fenêtre. Si je l'agrandis, il file à gauche, si je la rétrécit, il file à droite. Au final, la petite main n'est jamais sur le visage SUR LEQUEL ELLE DEVRAIT SE TROUVER !
Je craque. J'ai cherché partout, je ne trouve pas de réponse. A moins qu'il soit impossible de faire cela...
Merci de m'aider.

Ce genre de bidouille n'est vraiment pas recommandé.
Tu devrais placé ton image directement au niveau du lien (que ce soit via une <img> ou un background-image)

Bonsoir MoOx et merci pour ta réponse. Mais, comment je peux faire pour pouvoir cliquer sur mes visages et ouvrir la page qui leur correspond ?
Je ne comprends pas "placer mon image directement au niveau du lien".
Est-ce qu'il vaut mieux éviter les calques (ou éléments PA, c'est bien ça ?) ?
Parce que c'est plus pratique que le tableau pour aller chercher un détail du background. Il doit bien y avoir un moyen de faire en sorte qu'il ne se déplace pas (comme le font les tableaux) lorsqu'on redimensionne la fenêtre.
Et peux-tu m'expliquer, si tu en as le temps et l'envie, bien entendu, pourquoi il vaut mieux éviter ce genre de bidouilles ?
Merci et à bientôt

Hello,

MoOx a écrit :
Ce genre de bidouille n'est vraiment pas recommandé.
Tu devrais placé ton image directement au niveau du lien

+10
Exact. Apparemment ces 4 images ont un sens de contenu (petit menu) non pas de la fioriture graphique. Donc ces 4 images doivent figurées dans le code source html non pas dans le code source css.

Pour essayer de résoudre ton problème (erf, manque ton bout de code et ma boule de cristal est en panne ), je verrai des éléments de liste (ul/li). Comme je ne sais pas si tu as des connaissances en CSS, je vais essayer de faire simple :

<p>
	<a href="un_lien.html"><img src="image1.jpg" alt="texte alternatif 1" width="100" height="200" /></a>
	<a href="un_lien.html"><img src="image2.jpg" alt="texte alternatif 2" width="100" height="200" /></a>
	<a href="un_lien.html"><img src="image3.jpg" alt="texte alternatif 3" width="100" height="200" /></a>
	<a href="un_lien.html"><img src="image4.jpg" alt="texte alternatif 4" width="100" height="200" /></a>
</p>

Il y a également une autre solution qui pourrait être encore plus propre, l'utilisation des éléments map et area. Et pour plus de précisions du savoir comment qu'on fait, c'est par ici.

MoOx a écrit :

(que ce soit via une <img> ou un background-image)

Attention, l'élément img a une grande différence avec le style background-image. Utiliser une image de contenu dans un background-image, cela revient à faire la même erreur. Le contenu (l'image) risque de ne pas être accessible.
Modifié par Nolem (03 Dec 2009 - 04:57)

Bonjour,

Titoune34 a écrit :
Et peux-tu m'expliquer, si tu en as le temps et l'envie, bien entendu, pourquoi il vaut mieux éviter ce genre de bidouilles ?

La principale raison pour laquelle il faut éviter (et non pas vaut mieux) éviter ce genre de bidouille c'est que si pour une raison technique qui vienne de ton hébergeur ou du client (utilisateur aveugle utilisant un lecteur d'écran principalement, mais il y a plein d'autres cas) les images et/ou les CSS ne peuvent être affichées et/ou interprétés, tes liens se retrouvent vident sans aucune contenu.

D'autre part d'un point de vue logique aussi bien que sémantique, mettre une image porteuse de contenu en fond d'un élément devant recevoir un lien et mettre dans ce lien une image non porteuse de contenu, c'est idiot.

Laurie-Anne a écrit :
[...]D'autre part d'un point de vue logique aussi bien que sémantique[...]

Qu'est ce qui serait le plus approprié pour un menu à base d'images ? les éléments map/area ou ul/li ? Je pense que ul/li serait mieux vu que les liens sont « listés ». Mais je peux me tromper.
Modifié par Nolem (03 Dec 2009 - 15:16)

Je ne suis pas fan des map area ; donc j'aurais plutôt tendance à dire un menu sous forme d'image. La liste peux être utilisée ou non, tout dépends du reste du contenu de la page, mais il est vrai que l'on a plus tendance à utiliser les listes pour baliser les menus.