0

我有一个 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%），我已将最大宽度设置为 100%（这是我想要的），但这是我加载网站时的问题在不同的分辨率下，地图区域的位置和大小都不合适。

有没有办法解决它？最好是一个可以在 IE7+ 中工作的解决方案，但任何事情都会很好。

干杯!

4

1 回答 1

0

I would recommend you to slice home.jpg to 5 parts or use jQuery to set proper coordinates of your areas depending of website width.

for example

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

it's just for example, create your basic math modifications, you have to llbit play with it :) you can set other coords by replacing home

于 2013-04-27T21:52:10.810 回答