Cómo hacer un usemap en una Div

Durante la colocación de un sitio web, muchos desarrolladores utilizan divisiones, o divs, para posicionar el contenido de sus páginas. Otro método de diseño, de uso común dentro de una división, es un mapa de imagen. Los mapas de imagen crean zonas de enlace se puede hacer clic en la parte superior de la imagen, lo que permite enlaces a integrarse en un diseño de página complejo. Utilizando el mapa de imágenes dentro de un div ofrece gran control sobre la posición, el aspecto y la función de los elementos de su sitio.

Instrucciones

Creación de un mapa de imagen

1 Crear un mapa en su cabecera HTML mediante la etiqueta "<mapa>". Dar el mapa un nombre y un identificador único. Por ejemplo, si el mapa es un menú de navegación, su etiqueta de apertura mapa puede aparecer como sigue:

<Map name = "navegación" id = "navegación">

2 Añadir un enlace asignada mediante la creación de una etiqueta "<area>". Un área contiene una, la designación forma de enlace y las coordenadas para definir la forma, un ID de referencia por otras partes de la página web y texto alternativo para los usuarios con software de texto a voz. Para crear un área en la forma de un rectángulo que es de 100 píxeles de ancho, 50 píxeles de altura y situado en la esquina superior izquierda de la imagen, añadir:

<Href = "zona" de forma http://www.linkedwebsite.com = "rect" coords = "0, 0, 100, 50" id = "vínculo1" alt = "sitio web vinculado" />

3 Añadir cada enlace asignada es necesario, a continuación, poner fin al mapa añadiendo "</ map>" después de su último eslabón.

Usemap en una Div

4 Insertar la imagen que ha creado para su mapa dentro de la división mediante la creación de una etiqueta "<img />" entre los "<div>" y "etiquetas </ div>". La barra invertida indica al navegador que, después de que los contenidos de esta etiqueta, se acababa de ser creada la imagen.

5 Añadir una ubicación de origen para la imagen y el texto alternativo para su uso con software de texto a voz. Por ejemplo:

<Img src = "images / imagemaplocation.jpg" alt = "imagen menú de navegación" />

Esto le dice a la página web que la imagen se encuentra en la carpeta "imágenes" del directorio de sitios web y nombrado "imagemaplocation.jpg." Cuando un visitante llega a su sitio usando una aplicación de conversión de texto a voz, el visitante debe ser capaz de encontrar la imagen por la descripción alternativa de "imagen del menú de navegación."

6 Introduzca el comando "usemap" antes del paréntesis de cierre de la imagen, asegurándose de que es igual al nombre del mapa que ha creado con un hashtag, o signo de libra, delante del nombre. Por ejemplo, para aplicar el mapa de menús de navegación, añadir:

usemap = "#navigation"

7 Guardar la página web localmente y cargar el nuevo contenido a su servidor para aplicar los cambios en línea.

Consejos y advertencias

• mapa de imagen áreas también se pueden formar en un círculo con los puntos de definición de ser el punto central y el radio o un polígono con múltiples puntos de coordenadas para definir la forma.