HTML | Atributo de medios <área>

El atributo de medios del área HTML se utiliza para especificar los medios o dispositivos para los que se optimiza la URL de destino. 
este atributo especifica el estilo para dispositivos específicos como medios impresos o voz. Este atributo puede aceptar varios valores. Solo se usa si el atributo href está presente. Este atributo es puramente consultivo.
Sintaxis: 
 

<area media="value">

Operadores posibles: 
 

Valor Descripción
y Y operador
no NO operador
, O operador

Dispositivos: 
 

Valor Descripción
todos Apto para todos los dispositivos
auditivo sintetizadores de voz
braille Dispositivos de retroalimentación braille
Mano Dispositivos portátiles (pantalla pequeña, ancho de banda limitado)
proyección Proyectores
impresión Modo de vista previa de impresión/páginas impresas
pantalla pantallas de computadora
tty Teletipos y medios similares que utilizan una cuadrícula de caracteres de paso fijo
televisión Dispositivos de baja resolución o capacidad de desplazamiento limitada como la televisión.

Valores: 
 

Valor Descripción
ancho Ancho del área de visualización objetivo.
altura Altura del área de visualización objetivo
ancho del dispositivo Pantalla de destino o ancho del papel.
altura del dispositivo Pantalla de destino o altura del papel.
orientación Pantalla de destino u orientación del papel.
relación de aspecto Relación ancho/alto del área de visualización de destino.
relación de aspecto del dispositivo Proporción de dispositivo-ancho/dispositivo-alto de la pantalla/papel de destino.
color Bits por color de la pantalla de destino.
Indice de color Número de colores que puede manejar la pantalla de destino.
monocromo Bits por píxel en un búfer de cuadro monocromático.
resolución Densidad de píxeles (ppp o dpcm) de la pantalla/papel de destino.
escanear Método de escaneo de una pantalla de televisión.
cuadrícula Si el dispositivo de salida es cuadrícula o mapa de bits.

Nota: Se pueden usar prefijos como «min-« y «max-» .
Ejemplo: 
 

html

<!DOCTYPE html>
<html>
 
<head>
    <title>
        HTML area rel Attribute
    </title>
</head>
 
<body style="text-align:center;">
    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165729/area11.png"
         alt=""
         width="300"
         height="119"
         class="aligncenter"
         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"
              rel="alternate"
              media="screen and (min-color-index:256)">
 
        <area shape="circle"
              coords="155, 56, 26"
              href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227165934/area3.png"
              alt="Circle"
              rel="alternate">
 
        <area shape="rect"
              coords="224, 30, 276, 82"
              href=
"https://media.geeksforgeeks.org/wp-content/uploads/20190227170021/area4.png"
              alt="Square"
              rel="alternate">
    </map>
</body>
 
</html>

Producción: 
 

Antes de hacer clic en un área específica en la que se puede hacer clic 

Después de hacer clic en un área específica en la que se puede hacer clic 

Navegadores compatibles: los navegadores compatibles con el atributo multimedia del área HTML se enumeran a continuación: 
 

  • Google Chrome
  • Borde 12 y superior
  • explorador de Internet
  • Firefox
  • safari de manzana
  • Ópera

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 *