In this French tutorial, the presenter demonstrates how to build an image magnifier (loupe) that follows the mouse cursor using HTML, CSS, and JavaScript. The video walks through creating a div element (identified as "loop") that serves as the magnifying glass, styling the page and the lens with a background image (starfish.jpg), setting dimensions, border radius, shadow, and hiding the default cursor. Media queries are suggested for responsive sizing. The CSS also defines the lens’s background size and applies a brightness filter for clarity. In JavaScript, a zoom factor (e.g., 2) is defined, and an onMouseMove event on the body updates the lens’s left/top positions based on the mouse coordinates. The script calculates the background-size (original width multiplied by zoom) and background-position using the lens’s offset values multiplied by the zoom factor, with a centering correction (e.g., -150 px) to align the zoomed view. Additional CSS tweaks such as overflow:hidden prevent scrollbars when the lens approaches the edges. The tutorial concludes with a functional magnifier that shows detailed image sections, useful for e‑commerce product pages.
Chapters
Bonjour à tous et bienvenue dans cette nouvelle astuce. Aujourd'hui, nous allons créer une loupe afin de zoomer sur la partie survolée d'une image. Le mouvement de la loupe suivra la position de la souris. Nous aurons donc besoin d'un petit bout de code JavaScript afin de traquer la position du curseur. Bien entendu, ce genre d'application est très sollicité surtout sur les sites e-commerce où le visiteur a souvent besoin de voir les détails d'un produit comme un PC ou un téléphone. On commence par créer la div qui va faire office de loop et qui sera identifiée par loop. Ensuite, on va s'attaquer à la feuille de style CSS que l'on a déjà intégrée ici. On style le container principal qui est le body dans ce cas. On commence par annuler les marges. Ensuite, on spécifie la hauteur minimale de 100vh et le plus important, c'est que l'on va intégrer l'image d'arrière-plan. C'est cette image qui est censée contenir les détails sur lesquels on va zoomer. On mettra donc background-image. L'image en question s'appelle starfish.jpg. Exécutons déjà pour voir ce que ça va donner. Bon, ça c'est notre image. On va faire en sorte de réduire sa taille un petit peu. Par exemple, je vais mettre 1500 pixels de largeur et auto pour la hauteur. Donc Bien sûr, cette largeur, vous la personnalisez selon votre écran ou encore selon le média que vous utilisez. Alors, dans ce genre de situation, il est recommandé d'utiliser les médias queries. Donc, à la fin, notre image sera affichée de cette manière. Ensuite, c'est le tour de la loupe que l'on a intégrée en HTML. On va spécifier sa largeur et sa hauteur. Donc ça va faire 300 pixels de tous les côtés. On va lui appliquer une bordure de couleur blanche par exemple. Donc ça donne ceci. Et bien entendu l'image que l'on a de la loupe est circulaire. On va donc mettre border-radius et je mets par exemple 200 pixels. L'essentiel, il faut que ça dépasse la moitié de la largeur et de la hauteur afin d'avoir une forme arrondie. Voilà notre loupe. Et bien sûr, il faut que notre loupe bouge au-dessus de l'image, donc on va la détacher du navigateur. On mettra position absolute. On va aussi appliquer l'image d'arrière-plan à la loupe. D'ailleurs, c'est la même image utilisée en guise d'arrière-plan des body. Comme ça, on peut mettre background-size si vous voulez. On met les mêmes proportions. Bien sûr, ces dimensions restent provisoires parce qu'après on va écraser tout ça avec du JavaScript. Donc à la fin on aura ceci. On va ajouter l'ombre portée à notre loupe afin qu'elle soit plus réaliste. La couleur de l'ombre est noire avec une petite transparence. Regardons ce que ça donne. D'accord, maintenant nous avons fini avec le style, il est temps de passer au JavaScript. Je vais intégrer mon script juste avant la fermeture de la balise body. Je vais d'abord commencer par initialiser une variable que j'appellerai zoom avec la valeur 2 par exemple. Dire que je veux obtenir un zoom de 2, c'est-à-dire l'image zoomée sera 2 fois plus grande. Après, on va cibler l'objet qui va accueillir l'événement JavaScript, qui n'est rien d'autre que le body. L'événement dans ce cas, c'est onMouseMove, c'est-à-dire le fait de faire bouger le curseur de la souris. Bien sûr, j'ai déclaré une fonction anonyme et c'est à l'intérieur de cette fonction que l'on va déclarer notre code. On commence déjà par définir l'objet que l'on veut traiter, qui est dans ce cas l'objet div identifié par loop. D'ailleurs, je vais l'appeler loop. Cette méthode va m'épargner d'écrire à chaque fois document.getElementById. J'écris juste loop et le tour est joué. Notre loop va traquer le mouvement de la souris. On va donc agir sur ses propriétés left et top. Puisqu'elle est positionnée. Et pour récupérer la position de la souris, on fait appel à l'objet event. La propriété clientX retourne l'abscisse de la position de la souris sans oublier l'unité. Bon, je fais la même chose pour le top et là c'est clientY. Regardons ce que ça va donner maintenant. Voilà, notre loop bouge bel et bien sur le navigateur. On peut même faire disparaître le curseur de la souris parce que c'est un peu gênant quand même. Alors ça, on va le faire en CSS. On mettra cursor: none;. Donc là, je crois que c'est mieux. Puisque l'image qui sera visible au sein de la loupe sera 2 fois plus grande parce qu'on a spécifié la valeur zoom avec la valeur 2, donc on va jouer sur le background-size. On mettra donc, alors on met la valeur initiale qui est égale à 1500 pixels qu'on multipliera par zoom, c'est-à-dire qu'au sein de la loupe la taille réelle de l'image fera 3000 pixels de largeur. Sans oublier l'unité bien sûr. Regardons maintenant. L'image est 2 fois plus grande. Alors constatez déjà une sorte de zoom. Le traitement le plus important maintenant, c'est changer la position de l'image d'arrière-plan au sein de la loupe. On va donc mettre background-position. On va spécifier la position en pixels. Si vous vous rappelez bien, dans la leçon consacrée aux positions en CSS, j'ai utilisé principalement les pourcentages, mais on peut aussi se servir des pixels. Dans ce cas, avec les pixels, ça sera beaucoup plus facile. Alors si je déplace la loupe vers la droite, logiquement l'image d'arrière-plan va se déplacer vers la gauche. On imagine donc que la valeur de la position sera négative. On mettra donc ici moins loop.offsetLeft. OffsetLeft signifie la position actuelle de la loupe au sein du navigateur. Et bien sûr, si je déplace la loupe de 100 pixels, il faut que l'image d'arrière-plan se déplace de 200 pixels puisque dans ce cas le zoom vaut 2. Alors je mettrai multiplié fois zoom. Bon, je mettrai des parenthèses ici et je spécifie l'unité. Bon, je fais la même chose pour le Y. Dans ce cas, c'est offsetTop multiplié par zoom et encore plus px. Regardons ce que ça donne. C'est bien, on constate bien que ça change, sauf qu'il y a un gros décalage. Là, pour régler ça, c'est simple, il suffit de tout ramener vers le centre de la loupe. Donc on va ajouter ici une correction, on mettra par exemple là -150. Pourquoi 150? Parce que la largeur de la loupe fait 300 pixels. Même chose pour la hauteur. Regardons maintenant. Je crois que c'est mieux. Bien sûr, vous pouvez ajuster ceci de manière manuelle, c'est-à-dire pas la peine de faire des calculs complexes pour trouver la bonne formule. Mettez juste 10 pixels de plus ou de moins et regardez ce que ça donne. Bon, si vous estimez que le rendu est bon, alors vous conservez la valeur actuelle. Alors je pense que notre zoom est fonctionnel. Et puisqu'on y est, on va ajouter un petit effet sur la loupe. On va ajouter par exemple l'éclairage. Voilà, comme ça donc l'image sera beaucoup plus nette au sein de la loupe. Alors ça on va le faire en CSS avec la fonction brightness et on met par exemple 1,3. On va voir ce que ça donne. C'est bien, je crois que c'est plus net. Et voilà, donc maintenant on arrive à voir les détails. Il y a juste un truc, c'est que si je me rapproche trop des bords, on constate l'apparition des scrollbars. On va éliminer ça toujours avec du CSS. On mettra ici overflow hidden. Ça va régler le problème. Je pense que c'est bon. J'espère que vous avez apprécié cette astuce. Merci pour votre attention et à la vidéo prochaine.
