Créer des vignettes redimensionnables
Date de publication : 18/09/2008
Par
CSS Globe (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.
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.
| (1) |
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
|
| (2) |
Article traduit par l'équipe de traduction de la rédaction de developpez.com
|
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 oeuvre intellectuelle protégée par les droits d'auteurs. 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'à 3 ans de prison et jusqu'à 300 000 E
de dommages et intérêts.
Cette page est déposée à la
SACD.
