Plot points relative to fullscreen background image

Question

I have run into a positioning problem on a site I am building. I have a fullscreen background image that scales according to the browser dimensions. What I want to do is plot "Points of Interest" across the image so when a user hovers over one, a description will pop-up. The problem is, the image will shrink and grow according to the browser dimensions and I am having trouble keeping the point in the correct position.

Here is a test build: http://recoverstudio.com/test-build/gallery.html The little "+" is the point of interest. I would like the have that stay on the TV when resizing the browser window.

Any help is much appreciated.

Answer 1

One thing you could do is to have the points of interest be an image map on top of your image.

Another option would be to treat the base image as a vector image and then have the whole page be one big SVG image. This will let you define the points in vector space, which will stay constant as it scales.

Answer 2

Looking at how ezBgResize works, is seems that you would need to re-calculate the position of each place of interest on resize.

You would essentially have to check the dimensions of $("#jq_ez_bg") and move all of your points accordingly. You would of course have to somehow ensure that the moving of the points was done after the resizing of the image.