地图面积大小和位置问题在不同的屏幕分辨率

Question

我有一个地图区域在一个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>

为了让我的导航图像适合我的"容器"div(宽度75%)，我已经将max-width设置为100%(这是我想要的)，但这是一个问题，因为当我以不同的分辨率加载我的网站时，地图区域不在位置和大小。

有什么办法吗?最好是一个可以在IE7+中工作的解决方案，但任何解决方案都是好的。

干杯!

Answer 1

我建议你将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

它只是例如，创建你的基本数学修改，你必须一点点玩它:)您可以通过替换home