PDA

View Full Version : Image Magnification in div



sachinkakkar
29 Nov 2013, 10:31 AM
Hi There,

Wanted to do image magnification on mouse over and show enlarged image in a div next to it. Many commerical products available to do this. Was wondering if someone has written a plugin to do so. Or code they can share?

Pusedo logic is having a fixed size image and tracking the mouse movement over that image.
Depending on the co-ordinates of the mouse cursor inside that image, show a larger version
of the image to the right-hand side inside a scrollable panel.

maybe use div.scrollTo() and pass in the X and Y coordinates to scroll to,
based on a calculation defined, giving the impression of a zoomed image.

Regards
Sachin

mitchellsimoens
3 Dec 2013, 1:27 PM
I haven't seen it done personally but what I would do is to create a child <div> node that has the image as the background and have opacity set to 0.5 or whatever looks good. Then on mouseover I would move the <div> around based on a calculation.

sachinkakkar
4 Dec 2013, 1:33 AM
I am mainly server side developer and not well versed with html. can you give an example to having an image and on mouseOver event show another div?