Voici une astuce sympa trouvée sur A List Apart : Comment gérer automatiquement l’affichage d’images avec leur légende et auteurs dans une page web en prenant en compte la gestion des colonnes de la page.

Le gros avantage de ce système dans le cas d’une page avec de nombreuses images est d’avoir un rendu cohérent (style journal) en quart de colonne, tiers de colonne, demi colonne, etc…

Pour utiliser ce système, il suffit d’intégrer FigureHandler.js dans la page et de créer un nouveau FigureHandler en javascript, par exemple :

if( typeof( Prototype ) != ‘undefined’ &&
typeof( FigureHandler ) != ‘undefined’ ){
Event.observe( window, ‘load’, function(){
new FigureHandler; } );
}

Le FigureHandler scannera alors la page pour trouver des divs dont la classe commence par figure et appliquera un style correspondant au colonage (calculé en fonction de la taille de l’image et du div parent). On utilisera par exemple un div comme :

<div class= »figure photograph »>
<img src= »main-full-col.gif » alt= » » />
<p class= »credit »>Photo de <cite>Totor LeDeb</cite></p>
<p class= »caption »><em class= »title »>Figure 1</em> petit test.</p>
</div>

Concrètement, voilà ce que ça donne :

Sympathique, non ? Pour plus d’exemples, regardez la démo ci-dessous.

[ La démo ]

[ A List Apart: If I Told You You Had a Beautiful Figure… ]

[ FigureHandler sur Google Code ]