Scalable image menu not working with Javascript

[xanderwhite]

Hi,
I'm probably doing something daft here, but I haven't been able to figure it out, so after 4hrs trying I'll try and explain...
I'm trying to build a scalable image based menu for my front page, to direct my clients to various sites depending on their choice, up until now the image size has been fixed, which isn't so great for iPad's, iPhones....you catch my drift. So I've pretty much hacked my site and got the image scalable, but I'm struggling with the hit areas as they don't seem to be able to position themselves properly (left to right) despite lots of attempts to make them behave. I can manually line them up in css, but because it's a dynamically sized image that breaks everything on different size screens, so I'm having to take a crash course in Javascript.

My test page is currently at http://www.purephotos.co.uk/test-menu/ and hopefully you will be able to see what I'm trying to do. The code that moves the hit areas around should all be visible in the source code view as I'm using Javascript in the page to do the work for me.

Any help getting everything lined up would be hugely appreciated.

Thanks in advance

[student101]

Each image looks to be 166px in width.

#region1{
left:0;
}
#region2{
left:166;
}
... & so on

u get it?

[xanderwhite]

That won't work because the image is scalable so for you it's 166, for me it's 250 which would make the hit areas all wrong on my screen, the 'left' attribute has to be set onLoad so we know how big the image is and therefore how big the hit area needs to be. Hence the JavaScript.
Thanks for trying!

[student101]

I would use a different style sheet 4 each resolution.

Edit:
I would personally suggest CSS.

http://www.fuelyourcreativity.com/ho...-your-website/

extras:
http://www.blissfulinterfaces.com/ma...es-responsive/

http://css-tricks.com/resolution-specific-stylesheets/
http://www.javascriptkit.com/dhtmltu...aqueries.shtml
http://dev.w3.org/csswg/css4-images/#image-set-notation

[xanderwhite]

As I said....

I can manually line them up in css, but because it's a dynamically sized image that breaks everything on different size screens

So that's a hell of a lot of resolutions to cater for.... try it, resize your browser to any size and refresh, the image changes to match your browser size. It's not like there is a minimum size it can go. The maximum is easy though it's 900px wide and won't go bigger than that. But downsizing...it goes all the way. And I need maximum compatability, I'm not just setting this up for specific devices, it needs to work on any screen of any size! Hence the scalable image.
Does anyone else have any ideas?