Dans le cadre de ce tutoriel, nous allons voir comment créer un Switcher d’images uniquement en CSS et sans aucune utilisation de Javascript. Pour cela, nous utiliserons simplement CSS et déclencherons les permutation au survol de lien.
1°) Ce dont nous avons besoin
- 4 images
- 1 éditeur de Code HTML / CSS(j’utilise Aptana IDE)
- 1 fichier HTML
- 1 fichier CSS
- Connaissances de base HTML/CSS
2°) Trame html – création du layout
La première étape consiste à créer un fichier HTML dans lequel nous allons placer nos images et nos liens.J’ai également lié un fichier CSS à mon document HTML
Code HTML – Fichier de base HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>CSS Image Switcher</title> <link href="style.css" rel="stylesheet" type="text/css"/> </head> <body> <h1>CSS Image Switcher</h1> </body> </html>
Il ne reste plus qu’à insérer mon contenu, c’est à dire mes images et mes liens ; J’utilise des blocs ‘<div>’ comme conteneur principal. J’ai ensuite inséré mes liens pour mes 4 images en veillant à les identifier avec des attributs “ID”.
Code HTML – Création des liens dans le conteneur principal
<div id="wrapper"> <a id="img1" href="#" title="Image 1">Image 1</a> <a id="img2" href="#" title="Image 2">Image 2</a> <a id="img3" href="#" title="Image 3">Image 3</a> <a id="img4" href="#" title="Image 4">Image 4</a> </div>
3°)Edition du CSS
Nous allons éditer notre code CSS. Je dispose de 4 images qui ont les mêmes dimensions (256×192). L’idée est de faire en sorte que les liens se chevauches, il faut donc appliquer une position “absolute” à nos liens et lier nos images à nos liens et plus particulièrement les attributs “ID” de nos liens.
Voici le code CSS de notre CSS Switcher :
Code CSS :
/** Conteneur principal */
#wrapper{
width:256px;
margin:10px auto;
position:relative;
}
/** Liens **/
#wrapper a{
display:block;
width:256px;
height:192px;
position:absolute;
}
/** Liaison des liens et des images */
#img1{background-image:url(img/img1.jpg);}
#img2{background-image:url(img/img2.jpg);}
#img3{background-image:url(img/img3.jpg);}
#img4{background-image:url(img/img4.jpg);}
Vous pouvez voir le résultat obtenu en figure 3.1.1 :
Figure 3.1.1 - Résultat après édition des liens
Reste à savoir comment nous allons pouvoir donner un effet de switch au survol de nos liens et comment séparer ces différents liens…
La première étape va consister à modifier nos liens en englobant nos libellés de lien dans des balises ‘<span>’ qui vont nous permettre de réaliser des décalages entre nos liens car, comme vous avez pu le remarquer, nos liens se chevauchent et apparaissent au dessus des images.
Code HTML des liens :
<div id="wrapper"> <a id="img1" href="#" title="Image 1"><span>Image 1</span></a> <a id="img2" href="#" title="Image 2"><span>Image 2</span></a> <a id="img3" href="#" title="Image 3"><span>Image 3</span></a> <a id="img4" href="#" title="Image 4"><span>Image 4</span></a> </div>
Nous pouvons maintenant décaler nos liens avec notre feuille de style :
Code CSS des élément ‘<span>’ :
/** Mise en forme des libellés de liens */
#wrapper a span{
position:absolute;
text-align:center;
}
/** Positionnement des libellés de liens */
#img1 span{left:0;top:200px;}
#img2 span{left:128px;top:200px;} /** Décalage 'left' à la moitié du div Wrapper */
#img3 span{left:0;top:225px;}
#img4 span{left:128px;top:225px;} /** Décalage 'left' à la moitié du div Wrapper */
Notre Switcher prend forme comme vous pouvez le voir en figure 3.1.2 :
Figure 3.1.2 - Résultat après édition CSS des libellés de liens
Reste la dernière étape… celle qui va déclencher l’effet de switch au survol des liens ; pour cela, il existe une propriété CSS très pratique, la propriété “z-index”.
La propriété de feuille de style css z-index permet de spécifier la position d’empilement d’un bloc par rapport aux autres (notion de profondeur).
La propriété de feuille de style cssz-index est généralement utilisée pour la création de calques (Layer).
Le bloc ayant la plus grande valeur est au dessus.
Nous avons juste à appliquer cette propriété à l’attribut CSS :hover de nos liens
/** Appliquer le z-index pour l'affichage des images */
a:hover{z-index:1;}
Le résultat final vous permettra de permuter vos images au survol du lien (figure 3.1.3). Vous pouvez encore améliorer la présentation si vous le souhaitez 
Figure 3.1.3 - Résultat Final
4°) Conclusion
Vous venez de voir comment créer une permutation d’images en CSS. Il est vrai que JavaScript se démocratise et que de nombreuses bibliothèques permettent de mettre en place facilement ce type d’effet. Cela dit, cette méthode CSS reste légére et vous permet de voir en pratique l’utilisation de la propriété z-index.
5°) Ressources
Propriété z-index sur zone CSS
Ressource du tutoriel (Images + fichiers HTML et CSS) – css-images-switcher.zip
