Chapitre 1
Généralités sur les éléments
Retour Accueil CSS
2 Zoom sur image
Termes CSS clés employés : hover
Compatibilité navigateurs : tous.
Théoriquement, pour minimiser les temps de chargement, les images inclues dans un contenu doivent être redimensionnées de façon à être affichées en taille réelle. Parfois cependant il est nécessaire ou intéressant de réduire leur taille d’affichage initiale à l’aide de l’attribut width de la balise HTML IMG :
<IMG width=tailleaffichée src=url de l’image>
La méthode proposée ici peut être astucieusement employée pour afficher une image en plus grande taille lorsqu’on la survole avec la souris, obtenant ainsi un effet « zoom » automatique.
Le code CSS à employer est de type :
IMG.zoom:hover {
position:absolute;
float:left;
z-index:2;
width : taille
}
où taille est une dimension absolue ou relative supérieure à la taille définie dans l’élément HTML IMG,
mais inférieure ou égale à la dimension réelle de l’image, faute de quoi vous obtenez une image
pixelisée. L’élément est défini comme flottant avec un z-index de 2 pour sortir du flux normal et se
situer au premier plan. Vous pouvez bien sûr ajouter la décoration de votre choix, comme ici des
coins arrondis et une ombre portée.
IMG.zoom:hover {
...
border:3px solid black;
border-radius:25px;
box-shadow:5px 5px black;
}
Zoom
Retour Accueil CSS
|
|
|---|