Javascript 简明教程

JavaScript - Image Map

你可以使用 JavaScript 来创建客户端图像映射。客户端图像映射是由 <img /> 标记的 usemap 属性启用的，并由特殊的 <map> 和 <area> 扩展标记定义。

构成映射的图像通过 <img /> 元素插入页面与平时一样，除了它带有称为 usemap 的额外属性。usemap 属性的值是 <map> 元素上 name 属性值，你即将遇到，前面有一个井号或磅号。

<map> 元素实际创建图像的映射，通常紧跟在 <img /> 元素之后。它充当 <area /> 元素的容器，<area /> 元素实际定义可点击热点。<map> 元素只有一个属性， name 属性，它是标识映射的名称。这是 <img /> 元素知道要使用哪个 <map> 元素的方式。

<area> 元素指定形状和坐标，它们定义每个可点击热点的边界。

Example

以下代码结合了图像映射和 JavaScript，当鼠标移动到图像的不同部分时，在文本框中生成一条消息。

<html>
   <head>
      <title>Using JavaScript Image Map</title>

      <script type = "text/javascript">
         function showTutorial(name) {
            document.myform.stage.value = name
         }
      </script>
   </head>

   <body>
      <form name = "myform">
         <input type = "text" name = "stage" size = "20" />
      </form>

      <!-- Create  Mappings -->
      <img src = "/images/usemap.gif" alt = "HTML Map" border = "0" usemap = "#tutorials"/>

      <map name = "tutorials">
         <area shape="poly"
            coords = "74,0,113,29,98,72,52,72,38,27"
            href = "/perl/index.htm" alt = "Perl Tutorial"
            target = "_self"
            onMouseOver = "showTutorial('perl')"
            onMouseOut = "showTutorial('')"/>

         <area shape = "rect"
            coords = "22,83,126,125"
            href = "/html/index.htm" alt = "HTML Tutorial"
            target = "_self"
            onMouseOver = "showTutorial('html')"
            onMouseOut = "showTutorial('')"/>

         <area shape = "circle"
            coords = "73,168,32"
            href = "/php/index.htm" alt = "PHP Tutorial"
            target = "_self"
            onMouseOver = "showTutorial('php')"
            onMouseOut = "showTutorial('')"/>
      </map>
   </body>
</html>

Output

你可以将鼠标光标放在图像对象上感受映射概念。