Discussion :

[philodido]

Bonjour,

Voici l'énoncé de mon problème :

J'ai une image A qui est une image cliquable (un lien) et je voudrais placer une image B par-dessus mais sans que l'affichage de cette image B empêche le click sur le lien de l'image A situé en dessous.

Je pense que ça n'est pas possible mais je voulais avoir une confirmation.

Merci d'avance de votre aide.

[FirePrawn]

Bonjour,

Non en effet tu ne peux pas.
Maintenant quel est l'intérêt d'avoir un lien sur une image qui ne sera plus visible ?
Autant reporter le lien sur ton image B non ?

[philodido]

Maintenant quel est l'intérêt d'avoir un lien sur une image qui ne sera plus visible ?

C'est justement le problème, je ne veux pas que l'image du dessous ne soit plus visible . C'est pas facile à expliquer mais en fait j'ai une image représentant une carte de la région parisienne (<map>) et je voudrais ajouter des sortes de calques représentant des secteurs à chaque fois qu'on clique dans un secteur de la carte. La carte de fond reste toujours visible et "active" c'est à dire avec les secteurs cliquable mais les calques des secteurs se superposent à chaque fois qu'on clique sur un secteur de la carte. L'image d'un secteur ne représentant que le secteur en question et tout le reste de l'image étant transparent.
Pour l'expliquer plus simplement : c'est un système de calques qui ne désactive pas la carte qui se trouve en dessous.
Comme je l'ai dit dans le premier post, je pense que ça n'est pas possible avec du css, mais je voulais en être sûr.
En tout cas, merci de ta réponse.

[Bovino]

Ca ressemble pas mal à ça : Image map et changement de couleur de l'area au survol...

[philodido]

Bon sang mais c'est bien-sûr, il suffit d'utiliser en carte de fond, une <div> avec un background représentant la carte et de changer les calques représentant les secteurs en changeant le src de la balise <img> liée à la carte. En fait c'est presque la technique inverse de ce que j'essayais de faire.
Je n'ai pas encore testé mais ça devrait effectivement fonctionner. Je reposterais pour confirmer que la solution fonctionne.
Mais en tout cas : un grand MERCI

[philodido]

Ok, j'ai testé la solution, ça fonctionne.
J'avais une problématique supplémentaire qui était de pouvoir superposer plusieurs calques de secteurs (en même temps - "les additionner") ce qui n'était pas le cas dans la solution proposée. Mais il m'a suffit de rajouter autant de <div> "enveloppantes" que de secteurs avec un background-image totalement transparent (au chargement) et de changer l'url de ce background-image lorsqu'on clique sur le secteur correspondant dans la <map>. Ainsi tous les secteurs cliqués "s'additionnent". Pour pouvoir désélectionner un secteur, il suffis de testé si celui-ci est déjà sélectionné (par exemple avec une variable "témoin") au moment du clique sur ce secteur et si oui de remettre le background-image totalement transparent pour la <div> de ce secteur.

Encore merci à tous

Ha oui, autre détail qui peut avoir son importance : j'ai mis une image totalement transparente rattachée à la <map>.