HTML | Atributo del mapa de uso del objeto

El atributo usemap de HTML se usa para especificar el nombre de un mapa de imagen para usar con el objeto. La imagen con algunas áreas en las que se puede hacer clic se llama mapa de imagen. 

El atributo usemap está relacionado con el atributo de nombre del elemento de grado asociado y crea una relación entre el objeto y el mapa. 

Sintaxis:

<object usemap="#mapname">

Valores de atributos: 

#mapname: un hash con el nombre del elemento del mapa a usar. 

Ejemplo: 

html

<!DOCTYPE html>
<html>
 
<head>
    <title>HTML object usemap Attribute</title>
     
    <style>
        body {
            text-align: center;
        }
         
        h1 {
            color: green;
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
     
    <h2>HTML <img> usemap Attribute</h2>
 
    <object src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png"
        alt="" width="300" height="119" usemap="#shapemap" />
 
    <map name="shapemap">
         
        <!-- area tag contained image. -->
        <area shape="poly" coords="59, 31, 28, 83, 91, 83" href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165802/area2.png"
            alt="Triangle">
         
        <area shape="circle" coords="155, 56, 26" href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165934/area3.png"
            alt="Circle">
         
        <area shape="rect" coords="224, 30, 276, 82" href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227170021/area4.png"
            alt="Square">
    </map>
</body>
 
</html>

Producción:

  

Navegadores compatibles: los navegadores compatibles con el atributo usemap del objeto HTML se enumeran a continuación:

  • Google Chrome 
  • Borde 12
  • explorador de Internet 
  • Firefox 1
  • Ópera 
  • Safari 

Publicación traducida automáticamente

Artículo escrito por Vijay Sirra y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *