How can I get the new height of an item inside a proportionally resized image?

On a website, I have an image that takes the whole browser window, fixed at its weight. This picture has some objects that have to be clickable, so I draw absolute-positioned links on its respective coordinates. I have an onResize event that resizes them relative to the new window size like this:

//org contains img size to get aspect ratio: [originalWidth, originalHeight]
W = area.w*$('.visor img').width()/org[0]
X = area.x*$('.visor img').width()/org[0]
H = area.h*$('.visor img').height()/org[1]
Y = area.y*$(window).width()/$(window).data('originalWidth')

So, when you resize the window the area gets correctly resized according to the new image's size, and correctly positioned on X axis, but not the Y axis. It always moves more than the actual resize.

As you can assume, I'm using JQuery for this, but i think the idea is quite understandable.

Thanks in advance.

It looks like you're missing a set of parenthesis (I'm not sure why the other lines seem to work this way, but I would recommend the following change):

area.y*$(window).width()/$(window).data('originalWidth')

...should be

area.y*($(window).width()/$(window).data('originalWidth'))
      / \                                               / \
       |                                                 |

You're re-calculating the ratio between the old and new image sizes on each line, which is error prone, because the fourth line in your code is trying to do the same ratio calculation as the previous three lines. I would recommend calculating the percentage change ONCE, and multiplying all values by that.

Maybe it has something to with you using width for height? Also, I'm not sure wether getting the height or width from $(window) will do you much good, maybe it's better to get the height and width of the HTML-element.

By the way, isn't it better to use percentages instead of a fixed position? That way it is handled by CSS instead of JS. Not sure if it works though.