Astuces pratiques de développement web

Auteur: Mohamed CHINY Durée necessaire pour le cours de Astuces pratiques de développement web Niveau recommandé pour le cours de Astuces pratiques de développement web Supports vidéo disponibles pour ce cours Exercices de renforcement disponibles pour ce cours Quiz non disponibles pour ce cours

Page 11: Créer une loupe pour zoomer sur une image à l'aide de Javascript et CSS

Toutes les pages

Créer une loupe pour zoomer sur une image

Loupe qui traque le mouvement de la souris

Dans cette astuce nous allons voir comment créer une loupe qui traque le mouvement de la souris. Cette loupe permet de zoomer sur la partie souhaitée d'une image afin d'en voir les détails.

Ce genre d'application est largement utilisé sur les sites E-commerce afin de permettre aux visiteurs de zoomer sur les produits exposés comme les PC ou téléphones pour en voir les détails.

Le principe de cette application repose sur CSS qui permet de changer l'arrière plan de la loupe afin qu'il corresponde à la zone survolée de l'image originale. Javascript permet d'orchestrer ce processus en plus de la possibilité de tracker le mouvement de la souris à l'aide de l'objet event.

Passons à la pratique