Voici comment réaliser une popup d'information en pure CSS, sans Javascript.
L'astuce est d'utiliser
:hover de manière à utiliser des CSS différents au passage du curseur.
Parmis les attributs CSS modifiés, on utilise
display:none afin de masquer/afficher la popup selon que le curseur se trouve dessus ou non.
Un popup sur un lien
Le contenu de la popup sera juste placé dans une balise
<span> à l'intérieur de la balise
<a>
Voici le code CSS, à mettre dans le <head> de votre fichier html ou dans un fichier CSS à part :
a.info
{
position:relative;
z-index:24; background-color:#ddd;
color:#000;
text-decoration:none
}
a.info:hover {z-index:25; background-color:#ff0}
a.info span{display: none}
a.info:hover span
{
display:block;
position:absolute;
top:2em; left:2em; width:10em;
border:1px solid #0cf;
background-color:#555; color:#fff;
}
Et voici le code HTML, directement à insérer dans votre page :
Voici un lien vers <a class="info" href="http://commentcamarche.net">CCM<span>Communauté d'assistance et de conseils high tech</span></a>.
Et voici ce le résultat:
Sans le curseur:
Avec le curseur dessus:
Un popup sans le lien
Si vous voulez juste faire une popup sans lien, vous pouvez mettre
href="#" dans votre balise
<a>, mais certains navigateurs considèrent que "#" dans un lien est le haut de la page, ce qui cause quelques désagréments lors de la navigation.
Pour contrer ceci, remplacez la balise
<a> par une balise
<span> (dans le HTML
et dans le CSS). Cela fonctionne aussi.
- Note : avec la balise <span>, vous n'avez pas la petite main du pointeur il suffit de modifier légèrement le CSS :
span.info
{
position:relative;
z-index:24; background-color:#ddd;
color:#000;
cursor: pointer;
}
Le résultat est le même, mais il n'y a pas de <a> inutile.
(Astuce d'origine:
http://psacake.com/web/jl.asp )
Publié par
sebsauvage -
Dernière mise à jour le 7 novembre 2009 à 13:45 par le hollandais volant
