How to zoom in an image and center it?

Question

Any Idea how to zoom in a image on particular point using javascript, css ? I am using webkit based browser.

I can zoom by spe

Answer 1

What has to be done.

1. Get the location of the click inside the image. This might seem easy but it is not because the pageX and pageY of the event hold the coordinates in regard to the document. To calculate where inside the image someone clicked you need to know the position of the image in the document. But to do this you need to factor in all the parents of it, as well as if they are relative/absolute/static positioned .. it gets messy..
2. calculate the new center (the click position scaled - the top/left position of the container)
3. scale the image and scroll the container to the new center

if you do not mind using jQuery for it then use the following (tested)

and the html needed