JavaScript 图像地图 http://www.w3cschool.cn/js_image_maps.html
我们已经从 HTML 教程中了解到，图像地图是带有可点击区域的图像。通常情况下，每个区域是一个相关的超级链接。单击某个区域，就回到达相关的链接
添加 JavaScript
我们可向图像地图内部的 <area> 标签添加（能调用JavaScript的）事件。<area> 标签支持以下事件：onClick、onDblClick、onMouseDown、onMouseUp、onMouseOver、onMouseMove、onMouseOut、onKeyPress、onKeyDown、onKeyUp、onFocus和onBlur。
<html>
<head>
<script type="text/javascript">
function writeText(txt)
{
document.getElementById("desc").innerHTML=txt
}
</script>
</head>
<body>
<img src="eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" />
<map name="planetmap" id="planetmap">
<area shape="circle" coords="180,139,14"
onMouseOver="writeText('直到 20 世纪 60 年代，金星一直被认为是地球的孪生姐妹，因为金星是离我们最近的行星，同时还由于两者拥有很多共同的特征。')"
href ="venus.html" target ="_blank" alt="Venus" />
<area shape="circle" coords="129,161,10"
onMouseOver="writeText('从地球上是很难研究水星的，这是由于它和太阳的距离总是很近。')"
href ="mercur.html" target ="_blank" alt="Mercury" />
<area shape="rect" coords="0,0,110,260"
onMouseOver="writeText('太阳和类似木星这样的气态行星是到目前为止太阳系中最大的物体。')"
href ="sun.html" target ="_blank" alt="Sun" />
</map>
<p id="desc"></p>
</body>
</html>
HTML <area> 标签的 coords 属性http://www.w3cschool.cn/att_area_coords.html
详细解释：
<area> 标签的 coords 属性定义了客户端图像映射中对鼠标敏感的区域的坐标。坐标的数字及其含义取决于 shape 属性中决定的区域形状。可以将客户端图像映射中的超链接区域定义为矩形、圆形或多边形等。
例如，下面的 XHTML 片段在一个 100x100 像素图像的右下方四分之一处，定义了一个对鼠标敏感的区域，并在图像的正中间定义了一个圆形区域。
<map name="map"> <area shape="rect" coords="75,75,99,99" nohref="nohref"> <area shape="circ" coords="50,50,25" nohref="nohref"> </map>
提示和注释
注释：如果某个 area 标签中的坐标和其他区域发生了重叠，会优先采用最先出现的 area 标签。浏览器会忽略超过图像边界范围之外的坐标。
扫一扫
336
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
