HTML - ismap 屬性

HTML ismap 屬性用於指定圖片是伺服器端影像地圖的一部分。

如果在<img> 元素內使用<a> 元素並使用 ismap 屬性（無需 img 元素），當用戶點選伺服器端影像地圖時，點選座標將作為 URL 查詢字串傳送到伺服器。

可以使用 JavaScript 和 ismap 屬性來驗證該屬性是否存在於元素中。它根據屬性的存在與否在使用 JavaScript 時返回 true/false。

語法

<img ismap>

應用於

以下列出的元素允許使用 HTML ismap 屬性

元素	描述
<img>	HTML <img> 標籤用於在網頁中渲染影像。

HTML ismap 屬性示例

以下示例將說明 HTML ismap 屬性，以及我們應該在哪裡以及如何使用此屬性！

伺服器端影像地圖

在以下示例中，我們在<img> 元素中使用了 HTML 'ismap' 屬性。當我們點選輸出螢幕中的影像時，點選區域的座標將傳遞到伺服器進行處理。在此示例中，由於後端支援的限制，無法共享處理資料。PHP 教程 將教您伺服器如何處理輸入

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'ismap' attribute</title>
</head>

<body>
   <!--HTML 'ismap' attribute-->
   <h3>HTML 'ismap' attribute</h3>
   <a href="">
      <img src="static/images/logo.png?v3" 
           alt="tutorialspointlogo" 
           width="300" 
           height="60" 
           ismap>
   </a>
   <p>
      Click on the above image, the click 
      coordinate will sent to server as 
      URL query.
   </p>
</body>

</html>

檢查文件中是否存在 ismap

考慮另一種情況，我們將使用 ismap 屬性以及影像元素執行指令碼。

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'ismap' attribute</title>
   <style>
      button {
         width: 100px;
         padding: 10px;
         border-radius: 5px;
         cursor: pointer;
         background-color: blueviolet;
         color: white;
      }
   </style>
</head>

<body>
   <!--HTML 'ismap' attribute-->
   <h3>Example of the HTML 'ismap' attribute</h3>
   <a href="">
      <img src="/static/images/logo.png?v3" a
           alt="tutorialspoint_logo" 
           width="300" 
           height="150" 
           id='demo' 
           ismap>
   </a>
   <br>
   <p>
      Click on the below button to check 
      whether the 'ismap' attribute is present.
   </p>
   <button onclick="func()">Check</button>
   <br>
   <br>
   <span id='res'></span>
   <p id="par"></p>
   <script>
      function func() {
         let x = document.getElementById('demo').isMap;
         let res = document.getElementById('res');
         res.innerHTML = "Is 'ismap' attribute is present 
         within the 'img' element or not? " + x;

         if(x){
         let par = document.getElementById('par');
         par.innerHTML = "Try removing ismap attribute from img tag."
         }
         else{
         let par = document.getElementById('par');
         par.innerHTML = "Try adding ismap attribute to img tag."
         }

      }
   </script>
</body>

</html>

支援的瀏覽器

屬性
ismap	是	是	是	是	是

html_attributes_reference.htm

列印頁面