HTML DOM Image useMap属性用法及代码示例

HTML DOM Image usemap 属性用于设置或返回 Image 元素的 usemap 属性的值。 usemap 属性将图像定义为客户端 image-map。 image-map 是可点击的图像区域。它用于创建图像和Map之间的关系。此属性的值与Map元素的 name 属性的值相同。

用法:

它返回 usemap 属性。

imageObject.useMap

它用于设置图像 usemap 属性。

imageObject.useMap = #mapname

属性值：

#Map名称：它用于保存包含哈希 (#) 字符的Map名称。

返回值：它返回一个字符串值，该值表示包含散列字符 (“#”) 的 usemap 属性的值。

范例1：此示例返回一个 useMap 属性。

HTML


<!DOCTYPE html>
<html>
  
<body style="text-align:center">
    <h2 style="color:green">
        GeeksforGeeks
    </h2>
    <b>
        HTML Dom Image useMap Property
    </b><br />
  
    <map name="Geeks1">
        <area id="Geeks" shape="rect" 
            coords="0, 0, 110, 100" alt="Geeks"
            href=
https://manaschhabra:manaschhabra499@www.geeksforgeeks.org />
    </map>
  
    <img id="GFG" src=
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"
        width="300" height="100"
        alt="geeksforgeeks" usemap="#Geeks1">
    </br>
  
    <button onclick="GFG()">
        Click Here!
    </button>
  
    <p id="GEEK!"></p>
  
    <script>
        function GFG() {
  
            // Return value of usemap attribute.
            var x = document.getElementById("GFG").useMap;
            document.getElementById("GEEK!").innerHTML = x;
        }
    </script>
</body>
  
</html>

输出：

返回 usemap 属性

范例2：此示例设置 useMap 属性。

HTML


<!DOCTYPE html>
<html>
  
<body style="text-align:center">
    <h2 style="color:green">
        GeeksforGeeks
    </h2>
    <b>
        HTML Dom Image useMap Property
    </b>
  
    <map name="Geeks1">
        <area id="Geeks" shape="rect" 
            coords="0, 0, 110, 100" alt="Geeks"
            href=
https://manaschhabra:manaschhabra499@www.geeksforgeeks.org />
    </map>
  
    <img id="GFG" src=
"https://media.geeksforgeeks.org/wp-content/uploads/a1-25.png"
        width="300" height="100"
        alt="Geeksforgeeks" usemap="#Geeks1">
    </br>
  
    <button onclick="GFG()">
        Click Here!
    </button>
  
    <p id="paraID"></p>
  
    <script>
        function GFG() {
  
            // Return value of usemap attribute.
            var x = document.getElementById(
                    "GFG").useMap = "#Geeks2";
            document.getElementById("paraID")
                .innerHTML = "The value of the useMap "
                + "attribute was changed to:" + x;
        }
    </script>
</body>
  
</html>

输出：

设置 usemap 属性

支持的浏览器：

谷歌浏览器
IE浏览器
Firefox
Opera
Safari

相关用法

注：本文由纯净天空筛选整理自ManasChhabra2大神的英文原创作品 HTML DOM Image useMap Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。