基本介紹
- 中文名：圖像地圖
- 類型：javascript中的專業術語
- 定義：帶有可點擊區域的圖像
- 功能：單擊某個區域，就會到達連結
簡介,實例,
簡介
單擊某個區域，就會到達相關的連結。
實例
下面的例子演示如何創建帶有可點擊區域的 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>
我們可向圖像地圖內部的 <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>
