Tag HTML map
Nota: Si no sabes lo que es un tag y/o cómo se debe utilizar, te recomendamos que leas nuestro tutorial "tags y atributos HTML" que puedes encontrar en nuestra sección de tutoriales HTML.
Descripción
El tag
HTML map define un mapa de imagen del lado cliente que provee una forma de asociar áreas de una imagen con vínculos a otros documentos. Estas áreas vinculadas son definidas con el
tag HTML area.
Atributos
El atributo "id" asigna un identificador al elemento asociado. Este identificador debe ser único en el documento y puede ser usado para referirse a ese elemento.
Ejemplo:
Code begin
<p id="parrafo1">Este es el primer párrafo nombrado parrafo1. Para cambiar dinámicamente las propiedades del mismo usa este identificador.</p>
Code end
El atributo "class" asigna un nombre de clase (o una lista de nombres de clase separados por espacios) al elemento contenedor. Es usado con hojas de estilos e indica al navegador la clase a la cual el elemento está asociado. Una clase provee atributos visuales para los elementos.
Ejemplo:
Code begin
<p class="referencias">Este artículo está basado en el libro "Viento en los árboles" por Jhon L. Brooks</p>
<p class="referencias importante">Este artículo está basado en el libro "Viento en los árboles" por Jhon L. Brooks... y es más importante que el anterior.</p>
Code end
Define un estilo visual para el elemento. Es una mejor práctica definir atributos en hojas de estilos externas agrupándolos en clases. Los atributos en el parámetro "style" deben preservar este orden "nombre : valor" y ser separados por un punto y coma.
Si estás escribiendo
código XHTML te recomendamos no utilizar este atributo y probar con las clases de hojas de estilo (con el atributo "class").
Ejemplo:
Code begin
<p style="color: #0000FF; font-size: 12pt">Este es un párrafo con un estilo definido</p>
<p>Y este es otro texto sin estilo.</p>
Code end
Indica un título para el elemento. Usado para dar una descripción acerca del elemento que es usualmente mostrado como un "tool tip" cuando el usuario pone el puntero del mouse sobre el elemento.
Ejemplo:
| Código |
Visualización |
|
<a title="HTMLQuick.com" href="http://www.htmlquick.com">Código HTML</a> |
Código HTML |
Especifica el lenguaje del contenido de un elemento. El valor predeterminado es "desconocido".
Al escribir
código XHTML la sintaxis "xml:lang" representa una alternativa preferida en XHTML 1.0 y un reemplazo en XHTML 1.1 (por ejemeplo, xml:lang="en").
Ejemplo:
Code begin
<p lang="en">This is a paragraph in english.</p>
<p lang="es">Este es un párrafo en español.</p>
Code end
dir
Especifica la dirección de texto del contenido y atributos del elemento, así como la direccionalidad de las tablas. Tiene dos valores posibles que son insensibles a mayúsculas/minúsculas:
- RTL: Derecha a izquierda.
- LTR: Izquierda a derecha.
Ejemplo:
Code begin
<q lang="he" dir="rtl">...Una cita en Hebreo...</q>Code end
Asigna un nombre al elemento para referencias futuras. Se recomienda el uso del atributo "id" en su lugar para compatibilidad con
código XHTML.
Eventos
- onclick
- ondblclick
- onmousedown
- onmouseup
- onmouseover
- onmousemove
- onmouseout
- onkeypress
- onkeydown
- onkeyup
- onfocus
- onblur
Lista completa e información acerca de
eventos en HTML
Ejemplos
Ejemplo de cómo las áreas son definidas para un mapa de imagen.
| Código |
Visualización |
<!-- En esta imagen definimos las areas que estaran vinculadas. Las areas 1 y 2 se vincularan a la referencia de tags HTML, las areas 3 y 4 se vincularan a la referencia de eventos HTML y las areas 5 y 6 se vincularan a la referencia de tipos. -->
<img src="../../img/examples/nav1exp.jpg" alt="Explicación del menú de navegación" /> |
 |
Un mapa de imágen con vínculos hechos con el tag HTML area.
| Código |
Visualización |
<map name="nav1" id="nav1">
<area alt="Tags HTML" href="../tags.html" shape="circle" coords="50,50,39" />
<area href="../tags.html" alt="Tags HTML" shape="rect" coords="31,49,189,81" />
<area alt="Eventos HTML" href="../events.html" shape="circle" coords="155,165,39" />
<area href="../events.html" alt="Eventos HTML" shape="rect" coords="55,137,155,163" />
<area alt="Tipos HTML" href="../types.html" shape="circle" coords="75,250,39" />
<area href="../types.html" alt="Tipos HTML" shape="rect" coords="107,240,153,260" />
</map>
<img src="../../img/examples/nav1.jpg" usemap="#nav1" alt="Menú de navegación" /> |
 |
