Tag HTML area

 Nota: Si no sabes lo que es un elemento/tag o cómo debes utilizarlo, te recomiendo que leas el tutorial "Tags y atributos en HTML", que puedes encontrar en la sección de tutoriales HTML.

Descripción

El elemento HTML area define un sercor o área en un mapa de imagen. Existen tres tipos de áreas: circular, rectangular ó poligonal.

Los mapas de imagen son comúnmente usados junto con imágenes para especificar zonas en ellas, las cuales son habitualmente vinculadas a otros documentos o recursos. Estas zonas son declaradas con el elmeento HTML area. De este modo, los autores pueden establecer un vínculo, por ejemplo, en una porción circular de una imagen, hacia otro documento.

Ejemplos

En el siguiente ejemplo definimos un mapa de imagen asociado a una imagen menú. Allí, especificamos tres áreas cuadradas para cada texto y tres circulares para los dibujos asociados a ellos. Los vínculos apuntan a los recursos enunciados en el texto.

Atributos

id (name)

El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en todo el documento y puede ser usado para referirse a este elemento en otras instancias (por ejemplo, desde un script del lado cliente).

class (cdata)

El atributo "class" asigna un nombre de clase (o una lista de nombres de clases separadas por espacios) al elemento contenedor. Es usado junto con hojas de estilos y le dice al navegador la clase (o clases) a las que el elemento está asociado.

Una clase da atributos presentacionales a los elementos (lee más en el tutorial "Hojas de estilo en cascada").

style (style)

Este atributo es utilizado para definir atributos presentacionales para el elemento contenedor, y su valor debería estar compuesto por propiedades de hojas de estilo. Aunque en algunos casos es particularmente útil, es una mejor práctica poner los atributos presentacionales en archivos externos, relacionándolos a los elementos a través del atributo "class". De este modos, se mejora la separación de las partes semántica y presentacional de tu documento.

Puedes encontrar más información acerca de los atributos presentacionales en el tutorial "Hojas de estilo en cascada".

title (text)

El propósito de este atributo es proveer un título para el elemento. Su valor debe ser una descripción corta y precisa del contenido del elemento. Habitualmente, los navegadores muestran el contenido de este atributo en un recuadro al posar el mouse encima del contenido del elemento por un pequeño período de tiempo.

lang (langcode)

Especifica el lenguaje del contenido de un elemento. El valor por defecto es "desconocido".

Al escribir documentos XHTML 1.0, el atributo usado para especificar el lenguaje de un elemento es "xml:lang". Para compatibilidad con los dos tipos de estándar ambos atributos pueden ser usados simultáneamente como en el ejemplo a continuación. Nota que en XHTML 1.1, el atributo "lang" ha sido completamente reemplazado por "xml:lang" y su uso ya no es válido.

dir

Este atributo indica la dirección en que el texto del elemento debe ser leído. Esto incluye al contenido, los valores de los atributos y las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:

• RTL: derecha a izquierda.
• LTR: izquierda a derecha.

shape

Especifica la forma de la figura usada para definir un área en un mapa de imagen. Los valores son insensibles a mayúsculas/minúsculas y deben corresponderse con los listados a continuación:

• default: selecciona todo el área.
• rect: define una región rectangular.
• circle: define una región circular.
• poly: define una región poligonal.

coords

Especifica las coordenadas y la posición de la figura definida en el atributo "shape". Las coordenadas dependen de la figura utilizada:

• rect: izquierdo-x, superior-y, derecho-x, inferior-y (por ejemplo, "0, 0, 10, 10" define un cuadrado con diez píxeles de lado que toca los border superior e izquierdo de la imagen).
• circle: centro-x, centro-y, radio (por ejemplo, "20, 20, 20" define un círculo con un radio de 20 píxeles que toca los bordes superior e izquierdo de la imagen). si el radio es medido en porcentaje, éste se calcula como un porcentaje del menor de los lados del objeto asociado (imagen).
• poly: x1, y1, x2, y2, ..., xN, yN (Por ejemplo, "0, 20, 20, 20, 10, 0, 0, 20" define un triángulo con base y altura de 20 píxeles que toca los bordes superior e izquierdo de la imagen). Esto define un polígono cerrado. si defines un polígino abierto, el navegador debería cerrarlo, agregando un segmento desde el primer punto al último.

Las coordenadas son relativas a la esquina superior izquierda del objeto asociado. Las coordenadas son de tipo length y se separan por comas.

href (uri)

El atributo "href" especifica un recurso destino al cual el elemento hace referencia. Puede especificar un recurso en el mismo sitio o en uno externo.

alt (text)

El valor de este atributo provee una alternativa textual para la pieza de imagen que el elemento afecta y, por lo tanto, debe describirlo exactamente. Esto es vital cuando el desarrollo del sitio necesita alcanzar audiencias con discapacidades visuales.

target (frame-target)

Especifica el nombre del marco donde el documento destino debería cargarse. Refiérete a la definición del tipo frame-target para mayor información.

tabindex (number)

Especifica la posición de este elemento en el orden de tabulación. El orden de tabulación define una secuencua con todos los elementos que pueden recibir el enfoque. Los usuarios pueden navegar esta secuencia mediante el teclado (usualmente con la tecla "tab").

accesskey (character)

Relaciona al elemento con una tecla. La mayoría de los navegadores permite acceder al elemento presionando dicha tecla mientras se mantiene presionada la tecla "alt". El resultado de la activacióndepende de la naturaleza del elemento. Para vínculos, esta acción automáticamente sigue el vínculo, mientras que otros elementos simplemente reciben el enfoque.

nohref

La presencia de este atributo booleano significa que el área definida por el elemento no apunta a ningún recurso (esto significa, que no hay vínculo a seguir).

Recuerda que en XHTML, los atributos booleanos deben tomar sus propios nombres como valor (por ejemplo, nombre_atrib="nombre_atrib").

Eventos

• onfocus
• onblur
• onclick
• ondblclick
• onmousedown
• onmouseup
• onmouseover
• onmousemove
• onmouseout
• onkeypress
• onkeydown
• onkeyup

Ve a la lista completa de eventos en HTML.