[Réglé] Popup en CSS - surface réactive

Bonjour,

Un lien se trouve sur mon image (8x11) et au survol doit faire apparaître une div. Si la main apparaît bien au survol de l'image, la zone qui doit être survolée pour faire apparaître la div est plus petite que la surface de l'image. La div n'apparaît donc que lorsque le pointeur de souris survole la partie située sous l'image.

Comment faire en sorte que ma div apparaîsse dès que l'image (sur toute sa surface) est survolée ?

div#gauche a.def { width:11px; height:8px;
}

<a href="#pop1" class="pop"><img src="images/def.gif" alt="Définition" width="11" height="8" class="def" /></a>

Modifié par karnabal (10 Jul 2006 - 22:52)

Bonjour karnabal,

Je te conseille de relire un peu ton code.
Ton sélecteur CSS pointe vers les liens (éléments a) porteurs de la classe "def".
Mais dans ton code HTML, c'est l'image qui porte cette classe, pas le lien.

Ah oui, effectivement mpop.

J'ai multiplié les tentatives (j'ai appliqué la classe à l'image, au lien...) et là, en citation, vous avez un bon résumé de cet acharnement ! lol

Bref, voilà ce qui coince :

div#gauche img.def { font-size:1em; height:1em; color:#FF9100; line-height:1em;
}

a écrit :
<a href="#pop1" class="pop"><img src="images/def.gif" alt="Définition" width="11" height="8" class="def" /></a>

Coucou,

je mets ce sujet dans mes favoris, car ouvrir une popup avec css, ça m'interesse

Bonne chance et bon courage karnabal

J'ai posté ce lien http://forum.alsacreations.com/topic.php?fid=23&tid=15037&s= sur ce forum voilà quelque temps.

Selon les intervenants, malgré que ce soit très impressionnant ce que le gars réussit à faire, le code est quelque peu tarabiscoté et il détourne les css de sa fonction première.

Intéressant largowin, mais je pense mettre sur le mot un lien pointant vers une page du site, et un second lien, sur une image - immédiatement à la suite du mot - pour faire apparaître un div contenant une définition : donc deux liens bien séparés.

Par contre l'image, qui survolée fait s'afficher la main, ne fait toujours pas apparaître ma div. Il n'y a que si on place le pointeur sous l'image que le div masqué apparaît.

Une solution ?

PS : Vous pouvez voir le problème sur la homepage de mon site, le lien est situé sur l'image située dans le premier paragraphe (cliquez ma signature).
Modifié par karnabal (10 Jul 2006 - 01:55)

Il faut en fait ajouter :

 img.def {visibility:hidden;}
      a.pop {background:url(images/def.gif) no-repeat 0 60%;}

Voilà, avec l'image en background du lien ça marche.