Créer des vignettes redimensionnables

CSS Globe

Ce tutoriel aborde le contrôle de la taille des vignettes qui figurent sur votre site web. Il nous arrive parfois de ne pas avoir suffisamment d'espace pour intégrer des vignettes de grande taille et pourtant on souhaite éviter les petites images à peine reconnaissables. En utilisant cette astuce on peut modifier les dimensions de base de la vignette, pour l'afficher en grand au survol de la souris.

Cet article a été publié à l'origine, le 14 février 2008, en version anglaise et est visible à l'adresse suivante : Create Resizing Thumbnails Using Overflow Property

- Titre : Créer des vignettes redimensionnables

- Auteur : CSS Globe

- Parution : 18 septembre 2008

- Licence : Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright ® 18/09/2008 CSS Globe. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- Vue d'ensemble

- Le Principe

- Le Code

- Remerciements

Vue d'ensemble

On n'effectue pas véritablement un redimensionnement de l'image en tant que tel. Il s'agit d'un redimensionnement spécifique à la zone de la vignette survolée par la souris. Comment faisons-nous cela ? En utilisant la propriété CSS overflow !

La propriété overflow détermine l'apparence du contenu lors du survol de la zone contenante. Si le conteneur a une taille fixe, pour une raison ou une autre, on utilise alors overflow pour définir ce qu'il se produit. Les valeurs possibles pour la propriété overflow sont : visible, hidden, scroll et auto. C'est la combinaison de ces valeurs que nous utiliserons ici afin que notre astuce puisse marcher. Fondamentalement, nous cacherons une partie de la vignette dans son état de base, et nous la montrerons entièrement lors du survol de la souris.

Le Principe

L'idée qui se cache derrière tout ceci est de placer une image dans un certain conteneur. Étant donné que l'on aborde les vignettes, ce conteneur sera une balise <a>. On définit la taille (largeur et hauteur) du conteneur avec les valeurs souhaitées et on met la propriété CSS position du conteneur à relative. L'image incluse a une position absolue. On utilise des valeurs négatives à haut et à gauche pour déplacer l'image. Le conteneur voit sa propriété overflow mise à hidden. Ainsi il n'y aura qu'une seule partie visible de l'image dans sa zone. Le reste sera caché, donc hidden. Pour a:hover, on met à la propriété overflow du conteneur la valeur visible, et on affiche l'image en entier.

Disposition des éléments sur la page

Le Code

Cette astuce peut être utilisée pour les listes de vignettes ou une seule, comme indiqué sur la page de demo. Pour le code, on utilise des balises standards :

<a href="#"><img src="image.jpg"  alt="mon image" /></a>

L'état initial des vignettes pourrait se présenter comme suit :

ul#thumbs a
{
display     :   block;
float       :   left;
width       :   100px;
height      :   100px;
line-height :   100px;
overflow    :   hidden;
position    :   relative;
z-index     :   1;
}

ul#thumbs a img
{
float       :   left;
position    :   absolute;
top         :   -20px;
left        :   -50px;
}

La balise <a> a une certaine largeur et hauteur pour les éléments qui entrent en compte dans la conception de votre site. De même, overflow est mis à hidden. On manipule par la suite les valeurs négatives en haut et à gauche pour "rogner" l'image et la mettre à la taille souhaitée. Si vous voulez aller plus loin, vous pouvez définir une zone de rognage pour chaque image de votre liste et cibler précisément la zone que vous voulez montrer.

ul#thumbs a img
{
float       :   left;
position    :   absolute;
top         :   -20px;
left        :   -50px;
}

ul#thumbs li#image1 a img
{
top         :   -28px;
left        :   -55px;
}

ul#thumbs li#image2 a img
{
top         :   -18px;
left        :   -48px;
}

ul#thumbs li#image3 a img
{
top         :   -21px;
left        :   -30px;
}
.
.
.

Dorénavant, lorsque l'utilisateur survole l'image avec la souris on met overflow à visible :

ul#thumbs a:hover
{
overflow    :   visible;
z-index     :   1000;
border      :   none;
}

Notez l'utilisation de z-index pour le conteneur par défaut et celui survolé. Cela est extrêmement important étant donné que nous voulons placer l'image survolée au-dessus des autres. Autrement elle se retrouverait dessous et notre astuce serait incomplète.

Remerciements

Tous mes remerciements à romaintaz pour sa relecture.