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.