Parmi les multiples techniques permettant de zoomer une image à l'écran, voici celle qui, uniquement à l'aide de CSS2, permet un zoom au survol d'une image avec la souris.
Zoomer une image, à l'aide des
CSS2, lors de son survol de la souris peut se faire très facilement. Il suffit de combiner la valeur :hover à la balise img (image).
L'image est déclarée dans le code HTML sans valeurs de tailles (ni width, ni height) :
<div class="zoom">
<p>
<img src="machaon.jpg"
alt="photo d'un papillon machaon butinant une fleur" />
</p>
</div>
Pour éviter tout saut ou recouvrement du texte sous-jacent lors du zoom, on peut déclarer cette image dans un cadre (ici appelé zoom) de hauteur égale à la photo zoomée (ici 400px). Ce cadre permettra aussi de limiter l'effet grossissant à cette seule image.
Les valeurs de tailles sont déclarées au sein de la feuille de style tout d'abord dans son état initial (img), puis dans son état survolé (img:hover). Ici, les tailles de l'image passeront de 300x225 pixels à 400x300 pixels
.zoom {
height:400px;
margin:auto;
}
.zoom p {
text-align:center;
}
.zoom img {
width:300px;
height:225px;
}
.zoom img:hover {
width:400px;
height:300px;
}
Testez le résultat dans votre navigateur.
Au survol :
Hélas cette technique simplissime ne fonctionne pas avec MSIE car celui-ci ne supporte la règle :hover que pour les éléments liens.
Pour avoir un effet similaire avec MSIE, il va donc falloir tricher en lui faisant croire que l'image est un lien.
Cette fois elle ne sera plus déclarée dans la page HTML mais uniquement dans la feuille de style en fond d'écran (background). De plus, il faudra au préalable modifier l'image pour y faire figurer, l'une en dessous de l'autre, l'image initiale et l'image à apparaître lors du zoom.
Cette méthode a trois inconvénients :
img, il n'est plus possible d'en donner un équivalent textuel via l'attribut "alt". Cet équivalent (description de l'image) doit donc figurer en clair dans le contenu de la page afin que celle-ci respecte les règles d'accessibilité ;<div class="zoom1">
<p>
<a href="#"
title="photo d'un papillon machaon butinant une fleur">
</a>
</p>
</div>
L'image machaon1.jpg a donc été créée avec un logiciel de traitement d'images. Elle a une taille finale de 400x600 pixels pour un poids de 45 ko.
Toute l'astuce va être de faire apparaître les morceaux choisis de cette image : la partie haute par défaut (400x300 pixels) puis la partie basse (400x300 pixels aussi) au survol de la souris. Cette dernière devant « remonter » de 300 pixels vers le haut, on indiquera pour la position de fond de page background-position:0px -300px ; le 0 étant relatif à la position horizontale et le -300px à la position verticale.
Ne pas oublier surtout le très important display:block qui permet ici le « remplacement » de la première portion d'image par la seconde.
.zoom1 {
width: 400px;
height: 300px;
background-image: url(machaon1.jpg);
background-repeat: no-repeat;
margin: 0 auto;
}
.zoom1 p, .zoom1 a {
height: 300px;
display: block;
margin:0
}
.zoom1 a:hover {
background-image: url(machaon1.jpg);
background-position: 0px -300px;
background-repeat:no-repeat;
cursor:help;
}
margin:0 auto déclaré dans .zoom1 permet de centrer horizontalement l'image dans la page. (Attention : MSIE ne l'implémente pas.)
cursor:help déclaré dans zoom1_1 a:hover permet de changer l'apparence du curseur lors du survol de l'image. D'autres valeurs, comme cursor, crosshair, default sont aussi disponibles.
Testez le résultat dans votre navigateur.
Au survol :
On peut choisir évidemment de garder les mêmes dimensions d'images pour ne zoomer qu'une partie.
Pour cette variante, j'ai choisi de zoomer la partie colorée de l'aile du papillon. L'image (machaon2.jpg) a une taille de 300x450 pixels pour un poids de 31 ko. Cette fois, la « remontée » de l'image ne doit être que de 225 pixels.
Avec le même code (X)HTML que ci-dessus, le code CSS devient :
.zoom1 {
width: 300px;
height: 225px;
background: url(machaon2.jpg);
background-repeat:no-repeat;
margin: 0 auto;
}
.zoom1 p, .zoom1 a {
height: 225px;
display: block;
margin:0 auto;
}
.zoom1 a:hover {
background-image: url(machaon2.jpg);
background-position: 0px -225px;
background-repeat: no-repeat;
cursor:help;
}
Testez le résultat dans votre navigateur.
Par défaut :
Au survol :
Cette technique d'images « glissantes » appliquée au zoom est inspirée de l'article Les Portes Coulissantes de CSS - Chapitre II. Elle peut être aussi appliquée à des pseudo-découpes d'images, comme le décrit très bien cet autre article : Sprites CSS : Meurs, découpe d'images, meurs !. (Traductions réalisées par l'équipe de pompage.net.)
Photos 2004 - Pascale Lambert-Charreteur.