1. 图像地图
  1. 首页
  3. 百科
  5. 发动机系统
  7. 图像地图

图像地图

目录导航

简介

图像地图是 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>

相关百科
返回顶部
产品求购 求购