Diccionario HTML
<area shape=" " coords=" " href=" ">
La etiqueta <area> define un área dentro de un mapa de imagen (un mapa de imagen es una imagen con áreas en las que se puede hacer clic).
  • Los elementos siempre están anidados dentro de una etiqueta <map>.
  • El tributo usemapa en <img> está asociado con el atributo <map> del elemento name y crea una relación entre la imagen y el mapa.


  • Ejemplo

    <map name="workmap">
    ⠀⠀⠀<area shape="rect" coords="34,44,270,350" alt="Computadora" href="https://html.conjasifweb.com/<area>/computer.php">
    ⠀⠀⠀<area shape="rect" coords="290,172,333,250" alt="Teléfono" href="https://html.conjasifweb.com/<area>/phone.php">
    ⠀⠀⠀<area shape="circle" coords="337,300,44" alt="Taza de café" href="https://html.conjasifweb.com/<area>/coffee.php">
    </map>

    Resultado en el navegador

    El mapa y los elementos de área

    Haga clic en la computadora, el teléfono o la taza de café para ir a una nueva página y leer más sobre el tema:


    Workplace Computer Phone Cup of coffee


    Atributos globales

  • La etiqueta <area> también es compatible con los atributos globales en HTML.

  • Atributos de eventos

  • La etiqueta <area> también es compatible con los atributos de eventos en HTML.



  • Atributos

    Atributo

    Valor

    Descripción

    alt

    text

    Especifica un texto alternativo para el área. Obligatorio si el atributo href está presente

    coords

    filename

    Especifica que el objetivo se descargará cuando un usuario haga clic en el hipervínculo

    href

    URL

    Especifica el destino del hipervínculo para el área

    hreflang

    language_code

    Especifica el idioma de la URL de destino

    media

    media query

    Especifica para qué medio/dispositivo está optimizada la URL de destino

    referrerpolicy

    - no-referrer
    - no-referrer-when-downgrade
    - origin
    - origin-when-cross-origin
    - same-origin
    - strict-origin-when-cross-origin
    - unsafe-url

    Especifica qué información de referencia enviar con el enlace

    rel

    - alternate
    - author
    - bookmark
    - help
    - license
    - next
    - nofollow
    - noreferrer
    - prefetch
    - prev
    - search
    - tag

    Especifica la relación entre el documento actual y la URL de destino

    shape

    - default
    - rect
    - circle
    - poly

    Especifica para qué medio/dispositivo está optimizada la URL de destino

    target

    - _blank
    - _parent
    - _self
    - _top
    - framename

    Especifica dónde abrir la URL de destino

    type

    media_type

    Especifica el tipo de medio de la URL de destino

    Anuncio