• Home
• effet loupe
• démineur

Effet loupe sur une image

Déplacez le curseur sur l'image pour en visualiser les détails.

NB: l'image fait 1Mo et se charge en plusieurs passes, merci d'attendre qu'elle apparaise dans le cadre de droite

Remarques sur le script

Le script tient compte de plusieurs paramètres liés à la taille de la fenêtre de l'utilisateur :
fonction positionCurseur()

• les positions des barres de scroll verticales et horizontales sont calculées par document.body.scrollLeft
• la position de l'image par rapport aux bords de la fenêtre sont déterminées par une boucle while qui va additionner les positions respectives, calculées par element.offsetLeft, element.offsetTop et element.offsetParent, de tous les éléments parents du conteneur "apercu". (l'aperçu est l'image vue en entier)
• la position du curseur dans le cadre d'aperçu est calculé en X puis en Y par :
  (position de la souris + position du scroll ) - position du bloc apercu
• Notre fonction de zoom est donc indépendante du redimensionnement de la fenêtre ainsi que de la position du scroll.

 

Ensuite on va ajuster le background-position du bloc zoom afin qu'il suive les déplacement du curseur dans l'image :
fonction zoomImage(), en tenant bien compte des différence de proportion.

• l'image originale à une taille de 2048x1280, l'aperçu est de 600x375, le coefficient de proportionnalité arrondi à une décimale près est égal à 3.4 (on divise la taille originale par la taille réduite...)
• pour connaitre la position du curseur dans l'image originale en fonction de sa position dans l'image réduite, on caclul :
  valeur grande taille = parseInt(valeur taille réduite * coef de proportionnalité ) - 100
  • on soustrait 100 afin de centrer l'image grossie dans le cadre de 200x200 (on obtient donc parfois des valeurs négatives! voir plus bas pour les corrections)
  • on utilise la fonction mathématique parseInt afin d'obtenir un nombre entier au résultat de la multiplication
• afin de rendre l'effet plus ergonomique, on va éviter d'apercevoir les bords blanc situé en dehors de l'image.
  on va donc limiter la position X du fond à la taille de l'image - la taille du cadre, soit 2048-200 = 1848px
  idem en Y : 1280-200=1080px
  • du fait des valeurs négatives qui engendrent des erreurs du style background-position: --50px --10px
    on limite les valeurs prises par X entre 0 et 1848
    on limite les valeurs prises par Y entre 0 et 1080
  • Si les valeurs en X et Y sont négatives on attribut d'office un background-position à 1px: ainsi l'image ne sors pas en haut ni à gauche.
  • Si les valeurs en X sont supérieures à 1848, on fixe le background-position à 1848px: l'image ne dépasse pas à droite.
  • Si les valeurs en Y sont supérieures à 1080, on fixe le background-position à 1080px: l'image ne dépasse pas en bas.
• Il ne reste plus qu'à créer la chaine de caractère sous la forme background-position: -(valeurX)px -(valeurY)px;
  on remarquera qu'il faut des coordonnées négatives pour déplacer l'image de fond tout en la conservant visible dans le cadre.