A la base, il n'y a rien de plus simple, un div qui passe de visible à hidden en fonction de la souris, grâce à l'élément :hover ... et fini les problèmes de javascript incompatibles et de popup qui refusent de s'ouvrir ou de se fermer, enfin presque ....

[modifier] Comment faire

[modifier] Le code HTML

<span class='popup_anchor'>Text de l'ancre
   <div class='popup' id='popupid' >
      <span>Ceci est le contenu de la popup</span><br>
      <a href="http://www.art122-5.net">art122-5.net, C'est la source !!</a>    
   </div>
</span>

[modifier] Le code CSS

.popup_anchor div.popup{
   visibility: hidden;
   z-index: 10;
   top: 0px;
   left: 0px;
   position: absolute;
   background-color:white;
   border-color:black;
   border:solid;
}
		
span:hover.popup_anchor div.popup{
   visibility: visible;
}
		
span .popup_anchor div:hover.popup{
   visibility: visible;
}

[modifier] Commentaires

Simple, dés que vous passez la souris sur le texte, la popup apparait. L'utilisation d'un span pour ancrer le lien permet de conserver la possibilité de mettre des liens dans la popup.

Bon je vous préviens, si vous testez cet exemple avec IE 6 vous risquez d'être déçu ... ça ne marche que sur FireFox et IE7 ... mais la solution existe aussi pour IE 6.

[modifier] Le cas particulier pour IE 6

Ca marche peut être avec IE 5, mais je n'ai pas testé. N'ayant que FireGfox et IE7 sur ma machine, je tests IE6 grâce à la virtualisation proposée par Microsoft. Hors ils ne proposent pas IE 5.

Enfin bon, dans le cas d'IE6, il ne se passe rien ... on va donc revenir à nos onMousOver et onMouseOut, si si suis sûr que ça vous fait plaisir. Sérieusement, comment faire cohabiter les deux solutions sans trop pourrir le code pour les autres navigateurs ?

Là encore, la solution nous vient de Microsoft ... conscient des différences de rendu entre ses navigateurs, la firme de Bill à introduit des commentaires HTML spéciaux pour ses navigateurs ... on va donc garder notre code propre pour tous les navigateurs autres que IE en version inférieur à 7 :

[modifier] Le code HTML

<!--[if lt IE 7]><span onMouseOver="document.getElementById('popupid').style.visibility = 'visible';"  ><![endif]-->
   <span class='popup_anchor'>Text de l'ancre
      <!--[if lt IE 7]><span  onmouseout="document.getElementById('popupid').style.visibility = 'hidden';"><![endif]-->
         <div class='popup' id='popupid' >
            <span>Ceci est le contenu de la popup</span><br>
            <a href="http://www.art122-5.net">art122-5.net, C'est la source !!</a>    
         </div>
      <!--[if lt IE 7]></span><![endif]-->
   </span>
<!--[if lt IE 7]></span><![endif]-->

[modifier] Le code CSS

Il ne change pas

[modifier] Commentaires

Miracle, on s'en sort avec deux span supplémentaires pour les évènements javascript qui ne seront visible que par IE6 et inférieur ... pour les autres on reste en CSS