JS图像映射的应用,在一个图片点击或移动到不同位置有不同响应
<html>
<head>
<script type="text/JavaScript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>
<body>
<img src="treatmentscheme.png" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="39,188,35" onmouseover="writeText('起点坐标为(39,188)和半径为35圆形区域。')"
href="javascript:void(0);" alt="开始"/>
<area shape="rect" coords="125,112,233,170" onmouseover="writeText('起点坐标为(125,112)和终点坐标为(233,170)的红色矩形区域。')"
href="#" id="HospitalDrugTag_Dict" class="hid" alt="人工关联"/>
<area shape="rect" coords="125,212,233,270" onmouseover="writeText('起点坐标为(125,212)和终点坐标为(233,270)的红色矩形区域。')"
href="#" class="hid" alt="待添加商品药物"/>
<area shape="rect" coords="290,113,399,169" onmouseover="writeText('起点坐标为(290,113)和终点坐标为(399,169)的红色矩形区域。')"
href="#" class="hid" alt="关联审核"/>
<area shape="rect" coords="292,7,399,63" onmouseover="writeText('起点坐标为(292,7)和终点坐标为(399,63)的红色矩形区域。')"
href="#" class="hid" alt="问题数据"/>
<area shape="rect" coords="292,213,398,269" onmouseover="writeText('起点坐标为(292,213)和终点坐标为(398,269)的红色矩形区域。')"
href="#" class="hid" alt="待添加商品药物审核"/>
<area shape="rect" coords="437,161,542,217" href="javascript:void(0);" class="hid" alt="审核通过"/>
<area shape="rect" coords="591,161,697,217" href="#" class="hid" alt="复查"/>
<area shape="circle" coords="781,188,33" href="javascript:void(0);" class="hid" alt="结束"/>
</map>
<span style="left: 15px;top: 160px;">50</span>
<span style="left: 180px;top: 110px;">100</span>
<p id="desc">
</p>
</body>
</html>