SpeedTuts : CSS Image Switcher

Steve Leherpeux — Fri, 16 Jul 2010 08:28:36 +0000

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.

Démo

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





CSS Image Switcher



CSS Image Switcher

Il ne reste plus qu’à insérer mon contenu, c’est à dire mes images et mes liens ; J’utilise des blocs ‘

’ 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


 Image 1
 Image 2
 Image 3
 Image 4

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 ‘’ 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 :


 Image 1
 Image 2
 Image 3
 Image 4

Nous pouvons maintenant décaler nos liens avec notre feuille de style :

Code CSS des élément ‘’ :

/** 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

s3Slider – Slidez vos images en toute simplicité avec jQuery

Steve Leherpeux — Wed, 28 Apr 2010 06:15:06 +0000

Voici un excellent plugin jQuery pour réaliser de jolie diaporama (slideshow) très simplement, le s3Slider jQuery Plugin. Je vous propose dans cet article de voir comment implémenter ce plugin à travers de brefs exemple et quelques lignes de code.

EN BREF

Le plugin jQuery s3Slider est basé sur l’exemple de JD `s bon diaporama script. Ce script a été adapté pour jQuery .

COMMENT UTILISER

Il est très facile. Premièrement, inclure la librairie jQuery javascript, puis inclure la s3Slider dans la tête de la page (s) où vous souhaitez utiliser s3Slider.

jQuery peut être télécharger à partir de jQuery `s page d’accueil .

Important: pour que le script fonctionne correctement, il est un ensemble de règles qui doivent être suivies.


 
 
 
 Your text  comes here
 
 
 
 Your  text comes here

Explication

Si vous définissez cet ID div principal est s3slider, ce que nous avons fait ici, c’est le nom qui doit être préfixe pour toutes les autres classes et id pour cette galerie spécifique (diaporama). Par exemple, si vous définissez un ID pour div principal ‘identifiant_x’, l’identifiant interne doit être ‘identifiant_x’ et la classe également comme dans l’exemple ci-dessus.

La seconde chose est que tous les éléments images doivent être suivi d’un ‘SPAN’ qui servira à inscrire un commentaire par exemple.

CSS

#s3slider {
 width: 400px; /*  important doit être la même que la largeur de l'image */
 height: 300px; /* important  doit être la même que la hauteur de l'image */
 position: relative; /* important */
 overflow: hidden; /*  important */
}

#s3sliderContent {
 width: 400px; /*  important doit être le même que la largeur de l'image */
 position: absolute;  /* important */
 top: 0; /* important */
 margin-left: 0; /*  important */
}

.s3sliderImage {
 float: left; /*  important */
 position: relative; /* important */
 display:  none; /* important */
}

.s3sliderImage span {
 position: absolute; /* important */
 left: 0;
 font: 10px/15px  Arial, Helvetica, sans-serif;
 padding: 10px 13px;
 width:  374px;
 background-color: #000;
 filter: alpha(opacity=70); /*  Fixe l'opacité de la boite de texte */
 -moz-opacity: 0.7;  /* Mozillas */
 -khtml-opacity: 0.7; /* Safari */
 opacity: 0.7; /* autre */
 color: #fff;
 display: none; /* important */
 top: 0;

/*
Si vous mettez
top: 0;  -> La boite de texte sera affichée au dessus de l'image
Si vous mettez
bottom: 0;  -> La boite de texte sera affichée en bas de l'image
*/
}

.clear {
 clear: both;
}

Ensuite, vous devez initalize s3Slider et fixer la durée de combien de temps une image est affiché sur la page (la valeur est en millisecondes).

JS

$(document).ready(function()  {
 $('#s3slider').s3Slider({
  timeOut: 4000
 });
});

Vous pouvez consulter l’exemple sur le site de l’auteur.

COPYRIGHT

Ce script est sous licence Creative Commons Attribution 2.5. Ainsi, vous pouvez l’utiliser dans tous les projets aussi bien personnels que commerciaux.

Support des navigateurs

Ce plugin a été testé et est connu pour fonctionner dans les navigateurs suivants:

Firefox 2.x (Win) Firefox 2.x (Win)
Firefox 3.0.3 (Win/Linux/Mac) Firefox 3.0.3 (Win / Linux / Mac)
Opera 9.6 (Win/Linux) Opera 9.6 (Win / Linux)
Safari 3.0.3 (Win/Mac) Safari 3.0.3 (Win / Mac)
Internet Explorer 6 (Win) Internet Explorer 6 (Win)
Internet Explorer 7 (Win) Internet Explorer 7 (Win)
Google Chrome (Win) Google Chrome (Win)

TELECHARGEMENTS

La version complète (avec des exemples) (taille: 574Kb)
Version non-minimisée (taille: 4.12kb)
Version minimisée (taille: 1.66kb)

slDesign » images