map标签常用在为图像的某区域添加超链接,主要定义一个客户端图像映射,图像映射(image-map)指带有可点击区域的一幅图像。
作用:定义一个客户端图像映射。
说明:图像映射(image-map)指带有可点击区域的一幅图像。
1、标记结构:
<map name="FPMap0">
<area href="javascript:void(0)" shape="rect" id="iDShowOptions" coords="641, 466, 724, 527" onClick="ShowOptions()">
<area href="javascript:void(0)" shape="rect" id="iDShowHelp" coords="718, 512, 790, 558" onClick="ShowHelp()">
<area href="javascript:void(0)" shape="rect" id="iDSetNone" coords="800, 495, 879, 548" onclick="SetNone($('dSurface'))">
</map>
<img src="images/surface.png" usemap="#FPMap0" border="0" style="width:100%;height: 100%">
2、<area>标记的常用属性
Shape:热区的形状,取值:rect(矩形)、circle(圆形)、polygon(多边形)
Coords:执区的坐标(位置)
如果 shape = rect 时,那么,coords = “x1,y1,x2,y2” 例如:coords = “50,50,200,150”
(x1,y1)为矩形左上角的坐标值,(x2,y2)为矩形右下角的坐标值
如果 shape = circle 时,那么, coords = “x,y,r” ,其中(x,y)为圆心坐标,r为半径
3、js 修改area属性
<map name="FPMap0">
<area href="javascript:void(0)" shape="rect" id="iDShowOptions" coords="641, 466, 724, 527" onClick="ShowOptions()">
<area href="javascript:void(0)" shape="rect" id="iDShowHelp" coords="718, 512, 790, 558" onClick="ShowHelp()">
<area href="javascript:void(0)" shape="rect" id="iDSetNone" coords="800, 495, 879, 548" οnclick="SetNone($('dSurface'))">
</map>
<img src="images/surface.png" usemap="#FPMap0" border="0" style="width:100%;height: 100%"><script type="text/javascript">
//重新定位map位置
function rsz(){
//正常情况下为386尺寸:计算比例
var bl1=document.body.clientWidth/900;
var bl2=document.body.clientHeight/600;
var x1=bl1*641;
var y1=bl2*466;
var x2=bl1*724;
var y2=bl2*527;
//重新计算位置
document.querySelector('#iDShowOptions').coords= x1+","+y1+","+x2+","+y2
var x1=bl1*718;
var y1=bl2*512;
var x2=bl1*790;
var y2=bl2*558;
//重新计算位置
document.querySelector('#iDShowHelp').coords= x1+","+y1+","+x2+","+y2
var x1=bl1*800;
var y1=bl2*495;
var x2=bl1*879;
var y2=bl2*548;
//重新计算位置
document.querySelector('#iDSetNone').coords= x1+","+y1+","+x2+","+y2
}
rsz()
</script>