Afficher / Masquer des contenus Web sans JavaScript

Au lieu de faire appel à JavaScript ou encore Flash, il est possible d'avoir recours aux feuilles de styles pour afficher et masquer des calques de contenu au sein d'une page Web.

Envoyer

Imprimer

	En savoir plus
	Pratique : Créer un menu avec commentaires en survol

Vous avez envie d'afficher un "calque" de contenu, ou une image lorsque le visiteur survole un lien quelconque. La plupart du temps, c'est Flash ou javascript et sa gestion de "calques" affichés/masqués qui vous permettent de réaliser vos vœux. Pourtant, il existe une manière plus compatible de réaliser cette technique sans langage de programmation, ni flash.

En CSS, nous allons utiliser la balise <a> dans laquelle nous intégrerons le "calque" (la balise <span>) que nous allons masquer et afficher grâce à l'attribut "display: none;" et "display: inline;"

Note : /* ces textes sont des commentaires explicatifs, ils peuvent être supprimés*/

Code CSS :

<style type="text/css">
<!--
a {
text-decoration: none; /* définition 
du lien qui affichera le "calque" */
}
a:hover {
background: none; /* correction d'un bug IE */
}
a span { /* définition de la 
balise <span> inclue dans <a> */
display: none;
}
a:hover span { /* définition de 
la balise <span> au survol */
display: inline;
position: absolute;
top: 200px; /* positions et dimensions 
du calque, que vous pouvez changer à loisir */
left: 100px;
width: 200px;
height: 100px;
background: green;
text-align: center;
color: white;
}
-->
</style>

Et voilà le code HTML ::

<body>
<a href="">afficher le calque<span>texte 
et images peuvent être placés ici</span></a>
</body>

A vous de modifier et personnaliser vos paramètres !

Note : Cette méthode d'affichage et de masquage de calques en CSS ne semble pas fonctionner sur Explorer Mac.

	En savoir plus
	Pratique : Créer un menu avec commentaires en survol

Important : Pour rappel, l'élément <a>, de type "en-ligne", ne peut contenir que des éléments également de type "en-ligne" (span, strong, em, img, etc.). Il n'est pas valide d'inclure des éléments de type "bloc" au sein d'un élément <a> (comme div, p, blockquote, ul, li, etc.).

Ce contenu a été réalisé par le Collectif Alsacreations sous licence Creative Commons.

Rédaction JDN Développeurs