簡介
圖像地圖是javascript中的專業術語。圖像地圖是帶有可點擊區域的圖像。通常情況下,每個區域是一個相關的超級連結。單擊某個區域,就會到達相關的連結。
實例
下面的例子演示如何創建帶有可點擊區域的html圖像地圖:
<imgsrc="planets.gif"width="145"height="126"alt="Planets"usemap="#planetmap"/>
<mapid="planetmap"name="planetmap">
<areashape="rect"coords="0,0,82,126"href="sun.htm"target="_blank"alt="Sun"/>
<areashape="circle"coords="90,58,3"href="mercur.htm"target="_blank"alt="Mercury"/>
<areashape="circle"coords="124,58,8"href="venus.htm"target="_blank"alt="Venus"/>
</map>
我們可向圖像地圖內部的<area>標籤添加(能調用JavaScript的)事件。
<area>標籤支持以下事件:onClick、onDblClick、onMouseDown、onMouseUp、onMouseOver、OnMouseMove、onMouseOut、onKeyPress、onKeyDown、OnKeyUp、onFocus和onBlur。
這是添加了JavaScript的上面的例子:
<html>
<head>
<scripttype="text/javascript">
functionwriteText(txt){document.getElementById("desc").innerHTML=txt;}
</script>
</head>
<body>
<imgsrc="planets.gif"width="145"height="126"alt="Planets"usemap="#planetmap"/>
<mapid="planetmap"name="planetmap">
<areashape="rect"coords="0,0,82,126"onMouseOver="writeText('TheSunandthegasgiantplanetslikeJupiterarebyfarthelargestobjectsinourSolarSystem.')"href="sun.htm"target="_blank"alt="Sun"/>
<areashape="circle"coords="90,58,3"onMouseOver="writeText('TheplanetMercuryisverydifficulttostudyfromtheEarthbecauseitisalwayssoclosetotheSun.')"href="mercur.htm"target="_blank"alt="Mercury"/>
<areashape="circle"coords="124,58,8"onMouseOver="writeText('Untilthe1960s,VenuswasoftenconsideredatwinsistertotheEarthbecauseVenusisthenearestplanettous,andbecausethetwoplanetsseemtosharemanycharacteristics.')"href="venus.htm"target="_blank"alt="Venus"/>
</map>
<pid="desc">
</p>
</body>
</html>