Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Afficher-masquer les calques grâce aux CSS

Compatible CSS. Cliquer pour en savoir plus sur les compatibilités.Par SIBELIUS, le 13 août 2005

Il existe plusieurs façons d'Afficher et de Masquer les calques. La plus courante et la plus efficace lorsque l'on débute est de se laisser guider par Dreamweaver, sans mettre les mains dans le code (voir le tuto “Afficher/Masquer les calques sous Dreamweaver”)

Mais pour les puristes et ceux qui veulent éviter d'utiliser javascript pour leurs menus, pour des raisons d'accessibilité et de compatibilité, il existe une méthode en CSS pur.

Voir un exemple en CSS Voir un exemple de menu déroulant en CSS

Comment procéder :

En CSS pur, tous les effets de survols sont créés en utilisant la balise de lien <a>.

1/ Nous utiliserons cette balise de lien dans laquelle nous intégrerons la balise <span> que nous allons masquer et afficher grâce à l'attribut “display: none;” et “display: inline”. Cet attribut permet de définir comment la balise sera affichée : avec “none” elle sera inexistante visuellement; avec “inline” la balise sera considérée comme un bloc normal et donc rendue visible.

2/ Le principe sera donc de définir la balise <a> au repos et la balise <a> au survol (a:hover). Le calque (la balise <span>) sera intégré dans la balise de lien (<a>) et sera lui aussi défini précisément avec les CSS : une définition au repos et une définition au survol du lien.

Code CSS :

A placer entre les balises <head> ou sur une feuille séparée :

<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 choisir */
   left: 100px;
   width: 200px;
   height: 100px;
   background: green;
   text-align: center;
   color: white;
   }
-->
</style>

Code HTML :

A placer à l'endroit souhaité dans le body :

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

Et voilà, c'est aussi simple que ça ! Il vous suffit à présent d'adapter ce code (dimensions, couleurs, …) à votre gré.