Prérequis : Ce tutorial nécessite de connaitre la syntaxe CSS et (X)HTML.
Compatibilité : MSIE 5, 5.5 et 6, Mozilla, Firefox

Un pop-up est une petite fenêtre destinée à offrir à l’utilisateur un complément d’information.

Un pop up se manifeste par le survol (ou le clique) d’un mot ou d’une image.

Un pop-up sur le web est l’équivalent de la « note de bas de page » d’un livre.

Malheureusement les pop-up sont surexploités pour afficher des bannières publicitaires intempestives. Un nombre croissant d’utilisateurs utilisent, à raison, un logiciel tierce ou les options de Firefox afin de bloquer les pop-up.

Alors pop-up ou pas ?

Il serait dommage de nous priver de cette fonctionnalité, et les CSS nous permettent de se passer du javascipt (et donc des programmes anti pop-up).

Exemple :

Un nuage un nuage est une masse visible de gouttelettes d’eau ou de cristaux de glace en suspension dans l’atmosphère. de lait, une petite quantité de lait versée dans du thé ou du café.

le code (X)HTML

1
2
3
4
5
6
7
8

 
Un <a class="popup" href="#"> nuage <span
class="comment"> un nuage est une masse visible de gouttelettes d’eau
ou de cristaux de glace en suspension dans l’atmosphère.</span></a> de
lait, Une petite quantité de lait versée dans du thé ou du café.
 
<a class="popup" href="#"><img src=nuage_miniature_img_3190.jpg" /><span
class="comment"><img src="nuage_img_3190.jpg" /></span></a>

le code CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

/* popup full CSS */ 
.popup{
text-decoration: underline;
position: relative;
}
 
.popup:hover{
background-color: transparent;
text-decoration: none;
}
 
.popup span.comment{
visibility: hidden;
text-decoration: none;
z-index: 10;
left: -1000px;
position: absolute;
}
 
a:hover.popup span.comment{
top: 0px;
left: 0px;
visibility: visible; /*rend visible la classe "comment" lors du survol d'une div de class popup*/
}
 
a .popup span:hover.comment{
visibility: visible; /*rend visible la classe "comment" lors du survol d'une div de class popup*/
}

Attention si vous créez un pop-up sur une autre balise que <a>, votre code sera correct, mais il ne fonctionnera pas avec IE Navigateur de Microsoft Internet Explorer, utilisé par 80% des internautes qui ne respecte pas les standards du W3COrganisme chargé de normaliser les technologies Internet.

Pour aller plus loin je vous conseil l’excellent livre CSS 2 : Pratique du design web : de Raphaël Goetter