JavaScript 图像地图 图像地图指的是带有可点击区域的图像. 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('TheSun and the gas giantplanets like Jupiter are by far the largest objects in our Solar System.')" href ="sun.htm" target ="_blank" alt="Sun" /><area shape ="circle" coords ="90,58,3"onMouseOver="writeText('Theplanet Mercury is verydifficult to study from the Earth because it is always so close to the Sun.')" href ="mercur.htm" target ="_blank" alt="Mercury" /><area shape ="circle" coords ="124,58,8"onMouseOver="writeText('Untilthe 1960s, Venus wasoften considered a twin sister to the Earth because Venus is the nearest planet to us, and because the two planets seem to share many characteristics.')" href ="venus.htm" target ="_blank" alt="Venus" /> </map><p id="desc"></p></body> </html>实例 1.简单的 HTML 图像映射 本例演示一幅没有添加 JavaScript 的图像映射 <html> <body> <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" /> </map> </body> </html> 2.添加了 JavaScript 的图像映射 本例演示一幅添加了 JavaScript 的图像映射,当鼠标浮动 于某个热点上时,会调用 JavaScript 函数来显示热点所对应的星球的简介 <html> <head> <script type="text/javascript"> function writeText(txt) { document.getElementById("desc").innerHTML=txt } </script> </head> <body> <img src="/i/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 ="/example/html/venus.html" target ="_blank" alt="Venus" /> <area shape="circle" coords="129,161,10" onMouseOver="writeText('从地球上是很难研究水星的,这样由于它和太阳的距离总是很近. ')" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" onMouseOver="writeText('太阳和类似木星这样的气态行星是到目前为止太阳系中最大的物 体.')" href ="/example/html/sun.html" target ="_blank" alt="Sun" /> </map> <p id="desc"></p> </body> </html>。