圖像地圖

to to to

簡介

 圖像地圖是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>標籤支持以下事件:onClickonDblClick、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>

熱門詞條

聯絡我們