ES6 - 影像地圖

您可以使用 JavaScript 建立客戶端影像地圖。客戶端影像地圖透過<img />標籤的 usemap 屬性啟用，並由特殊的<map>和<area>擴充套件標籤定義。

要形成地圖的影像使用<img />元素正常插入頁面，除了它帶有一個名為 usemap 的額外屬性。usemap屬性的值是您即將遇到的<map>元素的name屬性的值，前面帶有井號或雜湊符號。

<map>元素實際上為影像建立地圖，通常緊跟在<img />元素之後。它充當實際定義可點選熱點的<area />元素的容器。<map>元素只有一個屬性，即name屬性，該屬性是標識地圖的名稱。這就是<img />元素如何知道使用哪個<map>元素。

<area>元素指定定義每個可點選熱點的邊界的形狀和座標。

以下程式碼將影像地圖和 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>

在成功執行上述程式碼後，將顯示以下輸出。您可以透過將滑鼠游標放在影像物件上來感受地圖的概念。

列印頁面