Aller aux menus

#CSS {débutant;}

• Premiers pas
• CSS3
• Tutoriels
• Livre
• Boite à Outils

Zoomer une image façon thumbnail en CSS

Première technique

Cette première technique m'a été inspirée par Olivier, le webmestre du site Boolsite. Merci à lui.

Code (X)HTML

Les images sont déclarées dans le code HTML sans valeurs de tailles (ni width, ni height), chacune d'elle est dans un <div class="thumb"> dont les propriétés seront déclarées dans la feuille de style. Une seule image par zoom est nécessaire, le poids de la page doit pouvoir rester raisonnable si l'on n'utilise pas d'images trop grandes.

<div class="thumb">
  <a href="#">
  <img src="300_inachis-io.jpg" alt="Inachis-io" />
  </a>
</div>
<div class="thumb">
  <a href="#">
  <img src="300_machaon.jpg" alt="Machaon" />
  </a>
</div>
<div class="thumb">
  <a href="#">
  <img src="300_polyommatus-icarus.jpg" alt="Polyommatus-icarus" />
  </a>
</div>	

Code CSS

J'ai choisi de présenter les photos sur un fond noir déclaré dans body. La hauteur de 500px n'est là que pour faire apparaître un ascenseur vertical en cas de résolution d'écran inférieure à 1024*768, et dont l'absence peut rendre difficile la visualisation des photos agrandies. Puis on fixe une bonne fois pour toute la largeur des bords des images à zéro.

Les vignettes déclarées dans la classe .thumb ont une taille de 100*75 pixels. Je désire qu'elles flottent les unes par rapport aux autres à gauche (float:left), qu'elles soient un petit peu espacées (margin:1px). Lorsqu'elles disparaîtront au profit de l'image zoomée, il apparaîtra à la place un rectangle gris. (background-color:#D3D3D3;). Et surtout, pour éviter des sauts intempestifs, on les fixe grâce au display:block.

Vient ensuite le comportement que doivent avoir ces vignettes lors du survol par le curseur de la souris, et c'est là que ça se corse.

Tout d'abord il va falloir s'affranchir des différences de comportements entre MSIE et Mozilla. On commence par stabiliser le tout avec (encore...) un display:block pour les liens.
Le a:focus permet de profiter du zoom avec une navigation au clavier et pallie ainsi à certains problèmes d'accessibilité.

Il est ensuite nécessaire de déclarer la taille des images liées : .thumb a img donne donc au navigateur les instructions nécessaires à la taille des images mises en lien dans le <div class="thumb">.

Et enfin, on déclare la taille et la position que devront avoir les images zoomées. La position est donc relative aux vignettes, et la taille de 300*225 px.

Vous avez tout suivi ? tout compris ? non ?!! ah flute... voilà le code quand même :

body {
 background-color:black;	 
 color:white;
 height:500px;
 } 

img {
 border:0
 } 

.thumb {
 width:100px;
 height:75px; 
 margin:1px;
 float:left; 
 background-color:#D3D3D3; 
 display:block;
 } 

.thumb a {
 display:block;
 }

.thumb a:hover {
 position:absolute;	
 color:black;
 }	 
	
.thumb a img { 
 margin:0;
 padding:0;
 width:100px;
 height:75px; 
 }

.thumb a:hover img, .thumb a:focus img {
 position:relative;
 left:0px;
 top:80px;
 width:300px;
 height:225px;  
 } 

Résultat

Tester le résultat

Seconde technique

La première technique fait disparaître la vignette au profit de l'image zoomée et celles-ci se décalent au fur et à mesure vers la droite. La vignette ne disparaît pas avec cette seconde technique, et les images zoomées apparaissent toujours au même endroit. Par contre, le poids de la page sera plus élevé car dans le code (x)html on déclarera la vignette et l'image zoomée.
Pour cet exemple, il y aura donc six images en tout contre trois précédemment.

Code (X)HTML

<div class="thumb">
  <a href="#">
  <img src="100_inachis-io.jpg" alt="miniature Inachis-Io" />
  <img src="300_inachis-io.jpg" alt="Inachis-io" class="grand" />
  </a>
  
  <a href="#">
  <img src="100_machaon.jpg" alt="miniature Machaon" />
  <img src="300_machaon.jpg" alt="Machaon" class="grand"  />
  </a>

  <a href="#">
  <img src="100_polyommatus-icarus.jpg" alt="miniature Polyommatus-icarus" />
  <img src="300_polyommatus-icarus.jpg" alt="Polyommatus-Icarus" class="grand"  />
  </a>
</div>

Comme vous le constatez, il n'y a cette fois qu'un seul cadre (<div class="thumb">), par contre une autre classe est nécessaire pour les photos zoomées (class="grand").

Code CSS

Même topo que précédemment pour les attributs de body, par contre un bord de 1 pixel noir est déclaré pour les images, mais on peut s'en passer, c'est juste une histoire de goût.

La classe .thumb définit une position relative du cadre en haut à gauche (à partir de ce qu'il y a juste au-dessus).
Dans .thumb a on fixe les marges à zéro et le non soulignement des liens pour éviter tout parasite.
Et alors là, attention : pour que le survol puisse prendre corps, il faut absolument déclarer quelque chose pour les liens survolés, quelque chose de neutre... un fond de couleur noire par exemple (thumb a:hover).

On passe maintenant aux caractéristiques des images zoomées.
La classe .grand est appliquée aux images liées, incluses elle-mêmes dans la classe thumb (ah ben oui, je sais, ça fait un peu poupées gigognes tout ça...). Donc, dans .thumb a .grand on aura un display:block et une position absolue (sinon, tout ce petit monde va aller se balader n'importe où), et surtout, une largeur de 0px pour éviter des chevauchements intempestifs.

Il n'y a plus qu'à s'occuper de la taille et de la position de l'image zoomée au moment du survol du curseur : position absolue, à 80px en dessous de la position initiale (cad du haut des vignettes), complètement à gauche, et de taille 300*225 pixels.

OUF ! Mal à la tête ? c'est normal, c'est le métier qui rentre. Bon, en même temps ce n'est pas très grave si vous n'avez pas tout compris, moi non plus de toute façon...

body {
 background-color:black;	
 color:white;
 height:500px; 
 }

img {
 border:1px solid black;
 }	

.thumb {
 position:relative; 
 top:0;
 left:0; 
 }
  
.thumb a {
 margin:0;
 text-decoration:none;
 }

.thumb a .grand {
 display:block;
 position:absolute; 
 width:0; 
 }	  
  
.thumb a:hover .grand, .thumb a:focus .grand { 
 position:absolute; 
 top:80px;
 left:0;
 width:300px; 
 height:225px; 
 }

Résultat

Tester le résultat

Avec l'arrivée des CSS3, on peut à présent obtenir des résultats similaires avec des effets plus sympathiques. Je vous invite à découvrir cet article de mon blog pour en avoir un aperçu.

Haut