图像地图指的是带有可点击区域的图像。
实例
JavaScript 图像地图
我们已经从 HTML 教程中了解到,图像地图是带有可点击区域的图像。通常情况下,每个区域是一个相关的超级链接。单击某个区域,就回到达相关的链接。
实例
下面的例子演示如何创建带有可点击区域的 html 图像地图:
<img src ="planets.gif" width ="145" height ="126" alt="Planets"usemap ="#planetmap" /><map id ="planetmap" name="planetmap"><area shape ="rect" coords ="0,0,82,126" href ="sun.htm" target ="_blank" alt="Sun" /><area shape ="circle" coords ="90,58,3" href ="mercur.htm" target ="_blank" alt="Mercury" /><area shape ="circle" coords ="124,58,8" href ="venus.htm" target ="_blank" alt="Venus" /></map>
结果
添加 JavaScript
我们可向图像地图内部的 <area> 标签添加(能调用JavaScript的)事件。<area> 标签支持以下事件:onClick、onDblClick、onMouseDown、onMouseUp、onMouseOver、onMouseMove、onMouseOut、onKeyPress、onKeyDown、onKeyUp、onFocus和onBlur。
这是添加了 JavaScript 的上面的例子:
<html><head><script type="text/javascript">function writeText(txt){document.getElementById("desc").innerHTML=txt}</script></head><body><img src="planets.gif" width="145" height="126"alt="Planets" usemap="#planetmap" /><map id ="planetmap" name="planetmap"><area shape ="rect" coords ="0,0,82,126"
onMouseOver
="
writeText
('The Sun and the gas giantplanets like Jupiter are by far the largest objectsin our Solar System.')"href ="sun.htm" target ="_blank" alt="Sun" /><area shape ="circle" coords ="90,58,3"
onMouseOver
="
writeText
('The planet Mercury is verydifficult to study from the Earth because it isalways so close to the Sun.')"href ="mercur.htm" target ="_blank" alt="Mercury" /><area shape ="circle" coords ="124,58,8"
onMouseOver
="
writeText
('Until the 1960s, Venus wasoften considered a twin sister to the Earth becauseVenus is the nearest planet to us, and because thetwo planets seem to share many characteristics.')"href ="venus.htm" target ="_blank" alt="Venus" /></map> <p id="desc"></p></body></html>
评论