在图片的局部添加a标签链接
<img src="./images/new.gif" data-rel="./background.jpg" style="width:100%;padding: 0px;vertical-align:top;margin: 0px auto;display:block;border: none;" alt="" usemap="#planetmap"/>
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="190,380,110"
href ="http://www.gugu123.cn/fmtg.html"
alt="Sun" />
</map>
自动适应屏幕调整区域坐标
<script type="text/javascript">
adjust();
var timeout = null;//onresize触发次数过多,设置定时器
window.onresize = function () {
clearTimeout(timeout);
timeout = setTimeout(function () { window.location.reload(); }, 100);//页面大小变化,重新加载页面以刷新MAP
}
//获取MAP中元素属性
function adjust() {
var map = document.getElementById("planetmap");
var element = document.getElementById("a_circle");
var oldCoords = element.coords;
var newcoords = adjustPosition(oldCoords);
element.setAttribute("coords", newcoords);
var test = element;
}
//调整MAP中坐标
function adjustPosition(position) {
var imageWidth = document.getElementById("img").width;
var imageHeigth = document.getElementById("img").height;
newPosition = parseInt(imageWidth*0.5) + ',' + parseInt(imageHeigth*0.6) + ','+parseInt(imageWidth*0.6/2);
return newPosition;
}
</script>