[Résolu] Afficher image au survol de la souris sur une carte

Bonjour,

J'aimerais faire en sorte que sur ma carte avec des liens, les liens soient vide(pas d'images), mais lorsque je survol le lien une image apparaît. Mes liens sont sur une grosse image avec des positions absolute et des z-index.

J'ai essayé visibility hidden, mais le lien disparaît totalement, même si je lui dit visible dans le hover. Puis, le display none, je crois que c'est déconseillé pour ce que je veux faire.

Je ne veux pas utiliser de onmouseover... car j'aimerais également mettre sur ce lien du css3 plus tard(transition).

Avez-vous une solution ?

C'est une carte dont lorsqu'on survol les régions, l'image apparaît et on peu cliquer dessus.

Merci beaucoup!

div#carte {position:absolute; z-index:50;}

div#parti1 {position:absolute; z-index:100; top:0px; margin:175px 0px 20px 0px; }

<div id="carte"><img src="carte.jpg" /></div>

<div id="parti1"><a href="http://www.google.ca"><img src="parti1.png"></a></div>

Modifié par sydgie (09 Sep 2013 - 17:51)

As-tu essayé avec de l'opacité ?

a { opacity:0; }
a:hover { opacity:1; }

L'élément avec l'opacité a 0 existe toujours, et apparaitera que quand tu passeras le curseur dessu.

J'avoue n'y avoir même pas pensé, vraiment une bonne idée et ça semble fonctionner (reste à voir avec IE...), Je vous remercie beaucoup!

Pour ie ça fonctionne également n'ai crainte
utilise ça :

.je_suis_transparent {
  /* IE 8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";

  /* IE 5-7 */
  filter: alpha(opacity=50);
}

Merci ça fonctionne