Comment créer un effet de loupe sur un site Web

Contenu

• Les instructions
• Comment
• Avis

Donner aux visiteurs de votre site Web la possibilité de regarder une image en détail nécessite un peu de manipulation de ces images. En ajoutant un peu de CSS, JavaScript et jQuery à la composition, vous pouvez créer l’effet d’une loupe lorsque le pointeur de la souris se déplace sur une image de votre page. Cet effet est obtenu en créant une petite fenêtre qui affiche l'image d'arrière-plan lorsque le pointeur de la souris se déplace sur l'image affichée au premier plan.

Les instructions

Donnez aux visiteurs de votre site Web un "gros plan" de l'image (Marque X Pictures / Marque X Pictures / Getty Images)

1. Incluez JavaScript et jQuery dans la section "head" du code HTML avec les instructions:

   Dans cet exemple, la bibliothèque jQuery est située dans le répertoire HTML par défaut.

2. Insérez une balise CDATA pour empêcher le navigateur d’analyser les opérateurs jQuery:

3. Définissez les variables de hauteur et de largeur utilisées pour afficher les images:

   var W = 743; var H = 1155; var w = 192; var h = 300;

4. Définissez les conditions qui démarrent la fonction d’agrandissement. Lorsqu'elle est appelée, cette fonction remplace le pointeur de la souris par une visionneuse circulaire de la plus grande image couverte lorsque l'utilisateur survole la plus petite image affichée sur la page. Créez cette instance avec le code:

   
   

   $ (document) .ready (fonction () {

   $ ("#myimage"). mouseover (fonction (e) {$ (document) .mousemove (myMM); $ ("# verre"). fadeIn ('fast');

   });

5. Définissez la fonction d’agrandissement et les paramètres de finalisation. Dans cet exemple, l'image cachée est agrandie par deux fois la taille de la plus petite image et la fenêtre d'agrandissement disparaît lorsque le pointeur de la souris se déplace en dehors des limites de la plus petite image. Vous pouvez le faire avec le code:

   function myMM (e) {var myImage = $ ("# myimage"); var glassImage = $ ("# image-verre"); var glass = $ ("# verre"); var xs = e.pageX - myImage.offset (). left; var ys = e.pageY - myImage.offset (). top; var bx = glassImage.width () / 2 - xsW / w; var by = glassImage.height () / 2 - ysH / h; glass.css ("left", e.pageX-75-89 + "px"). css ("top", e.pageY-75-10 + "px"); glassImage.css ("background-position", bx + "px" + by + "px"); if (bx <-W || par <-H || bx> 150 || sur> 150) {myImage.unbind ('mousemove', myMM); glass.fadeOut ('fast'); }}

   
   

6. Fermez le "script" jQuery et supprimez l’analyseur CDATA avec les instructions:

   // ]]>

7. Définissez la mise en page avec CSS pour positionner la plus grande image d’arrière-plan et les bordures de la fenêtre d’agrandissement avec le code:

   type = "text / css"> #monaimage {margin-left: 200px; } #glass {background-repeat: no-repeat; position de fond: en haut à gauche; largeur: 250px; hauteur: 170px; rembourrage en haut: 10px; padding-left: 89px; marge: 0; position: absolue; affichage: aucun; } # glass-image {background-image: url ('myImageLarge.jpg'); largeur: 150px; hauteur: 150px; border-radius: 75px; -moz-border-radius: 75px; répétition de fond: non répétée; couleur d'arrière-plan: #fff; marge: 0; rembourrage: 0; curseur: aucun; }

8. Écrivez le code HTML pour afficher la page dans la section "corps":

   >

   Déplacez la souris sur l'image

   

Comment

• Ce code dépend de CSS3 pour créer un champ d’agrandissement arrondi et peut ne pas fonctionner avec les navigateurs plus anciens. Pour assurer la compatibilité ascendante avec les anciennes implémentations CSS, définissez un champ rectangulaire pour "# glass-image" (loupe).

Avis

• Sans les balises CDATA, les navigateurs essaient d'analyser les opérateurs inférieurs à "<" et supérieurs à ">" sous forme de balises HTML. Impliquez toujours les opérateurs JavaScript et jQuery avec les balises CDATA pour éviter les échecs de "script".