Image Map

优质

小牛编辑

137浏览

2023-12-01

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

将使用表格将要形成地图的图像插入到页面中元素正常，除了它带有一个名为usemap的额外属性。 usemap属性的值是“map”元素上name属性的值，您将要遇到它，前面是井号或井号。

该元素实际上为图像创建了地图，通常紧跟在图像之后元件。它充当了容器实际定义可点击热点的元素。该element只携带一个属性，即name属性，它是标识地图的名称。这就是“img /”元素如何知道要使用哪个“map”元素。

元素指定定义每个可点击热点边界的形状和坐标。

当鼠标移动到图像的不同部分时，以下代码组合了图像映射和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)

您可以通过将鼠标光标放在图像对象上来感受地图概念。