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.
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;"
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.
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.