Médiaforma

Zoomer une image cliquée

Print Friendly

Dans cette rubrique, je vais vous montrer comment zoomer des images lorsque l’utilisateur clique dessus avec le bouton gauche de la souris. Voici le code utilisé :

Le code HTML est très classique. Trois images de classe zac (pour zoom au clic) sont insérées entre les balises <body> et </body>.

Le code CSS est plus intéressant.

Dans un premier temps, toutes les images sont redimensionnées à 200×133 pixels. Ce redimensionnement est envisageable car nos trois images ont une même dimension. Dans votre cas, vous devrez certainement adapter le redimensionnement, et éventuellement redimensionner individuellement chacune des photos si leurs dimensions sont différentes.

Pour modifier les dimensions de la photo sur laquelle l’utilisateur clique, nous utilisons la pseudo-classe active, appliquée à la classe zac. L’image cliquée est affichée à sa dimension originale : 600×400 pixels. Ici encore, vous devrez adapter ce code aux dimensions de vos propres images, en différentiant le traitement si les images ont des dimensions différentes.

Voyons ce que donne ce code dans un navigateur :

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply