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).

 
The view from Ponte Garibaldi, 
Roma, August 2003

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

 
  Images and thumbnails, a pure CSS hack
  
.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"); 
}
  
 
 
  
    
   The view from Ponte Garibaldi, Roma, August 2003
  

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 ). 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