[Résolu] Zoomer sur une image en fonction du curseur

Bonjour à tous,

Je m'arrache les cheveux depuis cette après-midi pour trouver une règle de calcul qui me permette de décaler l'image sur laquelle j'applique un zoom en fonction de l'endroit où se trouve mon curseur.

Je vous explique, j'ai un cadre qui est en overflow hidden ; et qui a un gabarit de 940 par 520.
Dans cet élément j'ai un div avec un background qui sera mon l'image.

Cette image est plus grande que mon cadre ; actuellement je peux déplacer mon image de gauche à droite et de haut en bas grâce à draggable et sa mise à jour de ses données top et left.

Maintenant je souhaite appliquer un zoom sur le scroll. A chaque scroll, j'ajoute en hauteur et en largeur 50px. Pas de soucis non plus jusque là.

Mais voila, je souhaiterais que le zoom se face en fonction de l'emplacement de me curseur ; c'est à dire déplacer mon image en même tant que de l'agrandir.

Et je n'arrive pas a trouvé une règle de calcul qui tienne la route

J'ai les coordonnées de mon curseur :

			
l__mouse_coord_x = i__event.pageX - $l__map_image_current.offset().left;
l__mouse_coord_y = i__event.pageY - $l__map_image_current.offset().top;

J'ai tenté des drôles de truc ; ex:retirer 50px au top et au left. Sauf que çà n'a rien à voir.

Merci pour votre lecture et votre aide potentielle

Bonsoir !

mini-truc a écrit :

J'ai tenté des drôles de truc ; ex:retirer 50px au top et au left. Sauf que çà n'a rien à voir.

Je sens que je ne vais pas être d'une grande aide d'autant plus que je n'ai pas bien compris votre question... mais faire des choses au hasard est le plus sûr moyen de continuer à s'arracher les cheveux.

C'est un problème purement mathématique... et mon seul conseil - mais vous êtes venu là pour une solution et non un conseil - est de faire un dessin.



(Désolée de ne pas être plus secourable... )
Modifié par Zelena (08 Jun 2016 - 20:59)