Html 不同屏幕分辨率下的地图区域大小和位置问题

我在JPEG上有一个地图区域，用于导航栏，其中有指向不同网页的链接：

<div id="container">
<img src="home.jpg" usemap="#imagemap" id="main-nav" style="max-width:100%;" />
<map name="imagemap">
<area shape="circle" coords="93,225,83" href="home.html" id="home">
<area shape="circle" coords="287,226,83" href="about.html" id="about"/>
<area shape="circle" coords="685,224,84" href="gallery.html" id="gallery" />
<area shape="circle" coords="876,226,87" href="facilities.html" id="facilities"/>
<area shape="rect" coords="-2,-8,1095,106" href="home.html" />
</map>
</div>

为了使我的导航图像适合我的“容器”分区（宽度75%），我已将最大宽度设置为100%（这符合我的要求），但这是一个问题，因为当我以不同的分辨率加载我的站点时，地图区域的位置和大小都不合适

有什么办法吗？最好是一个能在IE7+中工作的解决方案，但任何东西都是好的

---

干杯

我建议您将home.jpg分成5个部分，或者使用jQuery根据网站宽度设置适当的区域坐标

比如说

var winWidht = $(window).width(); //detect widht of window
$('#home').attr('coords',winWidth/5 + ',' + 225 + ',' + winWidth/6); //set coord X and radius of your circle

举个例子，创建基本的数学修改，你必须好好玩玩：）

---

您可以通过替换主页来设置其他坐标

我认为使用单一图像和区域映射来创建导航栏不是最好的方法。你为什么不把它切片，按你想要的方式放置，然后把每一张图片都放到

标签中？