Images et vignettes : un truc purement CSS

Contribution de Aaron Straup Cope, octobre 2005

Comment ajouter des images?

On peut ajouter des images en utilisant des techniques ninja de CSS pour passer d'une petite version - pour une mise en page plus agréable - à une version plus grande pour faciliter le visionnement.

Pour cela, il suffit de réassigner les attributs width et height de l'image au survol de la souris (:hover).

À deux détails près, cela fonctionnait bien.

Ce qui veut dire que, même lorsque quelqu'un ne veut pas voir la grande image, il faut quand même la télécharger.
Lorsque l'image est vue sans feuille de style, comme dans un lecteur RSS, ça a l'air... pourri!

En réfléchissant à une méthode pour inclure deux images qui pourrait :

changer entre une petite et une grande versions sans télécharger la grande image avant qu'elle ne soit demandée,
changer entre une petite et une grande versions sans JavaScript,
se dégrader gracieusement lorsque le fureteur ne supporte pas les images ou lorsqu'elles ne sont pas forcément nécessaires,

il semble que ceci devrait être possible en réassignant la propriété background-image du div contenant l'image lorsqu'on passe dessus (:hover).

<span class = "image" id = "pnd"> </span>
<span class = "caption">The view from Ponte Garibaldi, 
Roma, August 2003</span>

Pour le moment, ceci n'a été testé que dans Mozilla. Voici la source :

<html>
 <head>
  <title>Images and thumbnails, a pure CSS hack</title>
  <style type = "text/css">
.picture { 
   max-width: 450px;
   max-height: 450px;
   padding-left:20px;
   padding-bottom:10px;
}

.image { 
   display:block;
   border:1px dotted #666;
   margin:5px;
   margin-bottom: 0px;
   padding:5px;
   height:175px; 
   width:200px;
   background-repeat:no-repeat;
   background-position:5px 5px;
   background-attachment:scroll;
}

 .caption { 
   display:block; 
   font-family:serif; 
   color:#666; 
   margin-top:10px; 
   margin-left:5px;
}

span.image + span.caption:after {
   content : "mouse over to enlarge; may take a moment to load";
   display:block;
   color: #ccc;
}

#pnd { 
   background-image:url("/img/weblog/20030810-roma-punksnotdead-sm.jpg"); 
}

#pnd:hover { 
   height:350px;
   width:400px;
   background-image:url("/img/weblog/20030810-roma-punksnotdead.jpg"); 
}
  </style>
 </head>
 <body>
  <div class="picture">
   <span class="image" id="pnd"> </span>
   <span class="caption">The view from Ponte Garibaldi, Roma, August 2003</span>
  </div>
</body>
</html>

Bon à savoir

Le code ne fonctionnera jamais dans IE5, IE6 puisqu'il y a utilisation du sélecteur CSS :hover sur des balises qui ne sont pas des ancres (anchor <a>). Il s'agit d'une limitation du navigateur de Microsoft, car le sélecteur :hover dans CSS2 s'applique à tous les éléments.

Pour en savoir plus sur ce truc purement technique

http://aaronland.info/html/css/20030828-css-toggle-images.html

W3Québec : C.P. 58508, COP Complexe Les Ailes, Montréal, QC, Canada, H3B 5K8

Téléphone : +1 514.924.2401 | Courriel : decouvrir@w3qc.org

Avis légal | Confidentialité | Accessibilité | Conformité