html map标签

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>