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

它只是例如，创建你的基本数学修改，你必须llbit玩它:) 您可以通过替换主页来设置其他坐标

在不同的屏幕分辨率上映射区域大小和位置问题

1 个答案: