28. Masquer, afficher

Publié le 3 septembre 2006 par Majunia

Nota : Ni les bugs, ni les techniques de contournement de bugs sur les explorateurs peu respectueux des standards ne seront évoqués.

La pseudo-classe :hover est capable d’afficher et masquer des objets au passage de la souris.

Exemple - Passer au-dessus d’un lien devra faire apparaître une boîte ailleurs sur la page:

• <a> étant un élément en ligne, la boîte sera de type en ligne. Choisir le conteneur neutre .
<a href=«#»>Boîte à survoler texte et images peuvent être placés ici</a>
Nota : le diez (#) renvoie à la page courante.
• Dans la feuille de styles, positionner en relatif, absolu, ou en flottant permettra d’attribuer des dimensions à un élément en ligne (celui-ci se comportant alors comme un élément de type bloc).
• Masquer ensuite le . Pour cela, utiliser la règle display: none
a span {
display: none ;
}
Au survol, attribuer la règle display: inline au contenu dans le lien <a> :
a:hover span {
display: inline ;
}

« Survolez pour voir la boîte » s’affichera au survol d’un lien.

Il ne vous reste plus qu’à configurer cette boîte à votre guise. Soyez imaginatif !

Idées d’utilisation :
- affichage de commentaires au survol des menu
- affichage de légendes, d’infobulles personnalisées au survol de photos
- création de menus de tout type
- création de jeux (labyrinthe)

Voici un exemple de ce qu'il est possible de faire grâce à cette technique. Il est bien sûr possible de l'améliorer. On pourrait imaginer davantage d'effets, la possibilité de zoomer sur l'image, et bien d'autres choses.
No panic! bien qu'il vous soit possible de refaire cet exemple, à ce stade du cours, ne pas y parvenir est absolument normal.

A titre indicatif, voici le code source qui a servi pour cet exemple. Il n'est pas parfait, mais ça vous donnera une idée des étapes à suivre.

HTML

CSS

#puzzle {position:relative; width:152px; height:152px; background-color:#fff; margin:2em auto;} #puzzle a.p1, #puzzle a.p2, #puzzle a.p3, #puzzle a.p4, #puzzle a.p5, #puzzle a.p6, #puzzle a.p7, #puzzle a.p8 {position:absolute; display:block; width:50px; height:50px; background-color: #99CCCC; color: red; text-decoration:none; border: 1px groove orange;} #puzzle a.p1 {top:0px; left:0px;} #puzzle a.p2 {top:0px; left:51px;} #puzzle a.p3 {top:0px; left:102px;} #puzzle a.p4 {top:51px; left:0px;} #puzzle a.p5 {top:51px; left:102px;} #puzzle a.p6 {top:102px; left:0px;} #puzzle a.p7 {top:102px; left:51px;} #puzzle a.p8 {top:102px; left:102px;} #puzzle a.p9 { position:absolute; display:block; width: 51px; height:51px; background-image: url(http://195.20.14.200/0/41/04/82/webinfo/smiley009.jpg); top: 51px; left:51px; } #puzzle a.p1:hover, #puzzle a.p2:hover, #puzzle a.p3:hover, #puzzle a.p4:hover, #puzzle a.p5:hover, #puzzle a.p6:hover, #puzzle a.p7:hover, #puzzle a.p8:hover {text-decoration:none; background-color:#d4d8bd; color:#000;} #puzzle a img {display:block; position:absolute; width:1px; height:1px; border:0px; top:0px; left:0px;} #puzzle a.p1:hover img {display:block; position:absolute; top:51px; left:51px; width:50px; height:50px; border:0px;} #puzzle a.p2:hover img {display:block; position:absolute; top:51px; left:0px; width:50px; height:50px; border:0px;} #puzzle a.p3:hover img {display:block; position:absolute; top:51px; left:-51px; width:50px; height:50px; border:0px;} #puzzle a.p4:hover img {display:block; position:absolute; top:0px; left:51px; width:50px; height:50px; border:0px;} #puzzle a.p5:hover img {display:block; position:absolute; top:0px; left:-51px; width:50px; height:50px; border:0px;} #puzzle a.p6:hover img {display:block; position:absolute; top:-51px; left:51px; width:50px; height:50px; border:0px;} #puzzle a.p7:hover img {display:block; position:absolute; top:-51px; left:0px; width:50px; height:50px; border:0px;} #puzzle a.p8:hover img {display:block; position:absolute; top:-51px; left:-51px; width:50px; height:50px; border:0px;}

accéder à l'article suivant