Spot the ball game, zooming problems, jQuery

Question

I am trying to create a spot the ball game, so it will (eventually) be an image of a player kicking a ball but the ball has been removed and the player needs to click where the ball should be.

The first version went well and works.

http://enjoythespace.com/sites/game/test.html

But what I need to add is some sort of zooming so you can see more accurately where you are clicking. I been playing around and have come up with this

http://enjoythespace.com/sites/v2/demo.html

But once you click it looks great when zoomed in but when you go back to the image its way off.

I think its todo with how the image is setup, the #webpage is half the original size of the image and the #retina uses the full size of the image.

Any help?

Answer 1

It looks like you are passing the top/left position click point of the zoomed image to highlight where you have clicked. What you will need to do is alter your top/left position based on whether the fisheye is over the image or not.

Does the un-zoomed image have to be part of the news page or can it be a standalone image?

If it can be standalone then the solution should be quite simple. If the zoomed in image is twice the size of the unzoomed one then you can just set the top/left values of the highlight to half the value of the zoomed, when looking at the unzoomed.

Jquery position will allow you to accurately get the position.

jQuery Position()