Médiaforma

Zoomer une image cliquée

Partagez cet article sur vos réseaux

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 :

 
Commentaires

Merci, je cherche maintenant a savoir comment laisser le zoom après le clic gauche :)

Bonjour,

Pour cela, le CSS seul n’est pas suffisant : vous devez utiliser du JavaScript.
Capturez l’événement clic sur une image et modifiez ses dimensions. Elles resteront comme vous les avez définies.

Laissez un commentaire