Afficher / Masquer des éléments sans javascript
Le 28-02-2005 par Raphael dans Tutoriels et articles divers.
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 voeux.
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;" (Voir le résultat ici / Voir une variante sur un menu / afficher des légendes sur des images)
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 masquage de calques en CSS ne semble pas fonctionner sur Explorer Mac
(inspiré librement de http://www.meyerweb.com/eric/css/edge/popups/demo.html)
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.).
Un problème, une question ?
Vous avez des soucis avec ce tutoriel ? Venez en discuter dans le salon Spécifique aux Tutoriels et articles du Forum Alsacréations.
Aller plus loin :
Grâce au livre de Raphaël Goetter, apprivoisez les styles CSS et le langage (x)HTML, tout en plongeant dans la création de sites conformes aux standards web et accessibles à tous.
