Scaling Image Maps

[Ardit]

Hello! My original account seems to have been deleted so here's to starting over again!

 

I have an image map:

<img id="imgmap" src="topbanner.png" usemap="#imgmap" border="0" width="100%" height="auto" alt="" />
<map id="_imgmap" name="imgmap">
<area shape="rect" coords="286,193,461,227" href="http://www.link1.com/" alt="" title=""    />
<area shape="rect" coords="488,196,665,226" href="http://www.link2.com/" alt="" title=""    />
<area shape="rect" coords="695,195,870,229" href="http://www.link3.com/" alt="" title=""    />
<area shape="rect" coords="905,194,1080,228" href="http://www.link4.com/" alt="" title=""    />
</map>

--So the scaling part is handled by the height & width attributes. The problem with it of course is that the image map relies on coordinates & those coordinates won't change with a resized image. My question is is there any way of using an image map to get this accomplished? If not can you point me in a direction where I would be able to achieve something similar?

 

 

 

I have thought maybe doing something server side as presented here http://www.w3.org/TR/html4/struct/objects.html#h-13.6.1.2 . But apparently it won't show the mouse as being over a clickable object (I'm sure there are ways around it but it seems it would only be across the entire image & not specific locations).

 

Then there was this http://stackoverflow.com/questions/4137302/how-can-i-incorporate-an-image-map-into-a-fluid-layout but it's a bit out of my reach and it turns out it doesn't quite work.

 

 

My only idea right now is to create a select number of image resolutions, accompanying image maps, and switching them out based on the page width. Though I'm trying to shoot for something more fluid.

Edited May 10, 2013 by Ardit