¿Cómo construir mapas de imágenes en html5
páginas Web a menudo utilizan imágenes para la navegación. Son más bonita que los enlaces de texto sin formato, y se puede añadir forma y función en su página con un elemento. Cuando se utiliza una elemento con un elemento de anclaje para crear una imagen de vinculación, se puede adjuntar un único enlace a esa imagen. Para crear una imagen más grande que conecta enlaces a diferentes regiones en la página, se necesita una mapa de imagen.
Para crear un mapa de imagen, se necesitan dos cosas:
Una imagen con zonas diferenciadas obvios para los usuarios
Por ejemplo, una imagen de un parque podría mostrar un parque infantil, una zona de picnic y una zona del estanque.
Margen para mapear las diferentes regiones en el mapa a diferentes URL
Los elementos y atributos
Utilizar el elemento para agregar la imagen del mapa en tu página, al igual que lo haría con cualquier otra imagen. Además, incluir la usemap atribuir a dejar que el navegador sabe que la información de mapa de imagen debe ir con esa imagen. El valor de la usemap atributo es el nombre de su mapa.
Utiliza dos elementos y un conjunto de atributos para definir el mapa de imagen:
mapa mantiene la información del mapa. los mapa elemento utiliza el nombre atributo para identificar el mapa. El valor de nombre debe coincidir con el valor de usemap en el
elemento que va con el mapa.
zona vincula las partes específicas del mapa para las direcciones URL. los zona elemento de toma estos atributos para definir las características específicas de cada sección del mapa:
forma: Especifica la forma de la región (un punto caliente se puede hacer clic que hace que la imagen Trabajo mapa). Se puede elegir entre rect (rectángulo), circulo, y escuela politécnica (Un triángulo o polígono).
coords: Define las coordenadas de la región.
Las coordenadas de un rectángulo son la izquierda, derecha, arriba, y los puntos inferiores.
las coordenadas de un círculo incluyen la coordenadas x e y para el centro del círculo, así como el radio del círculo.
Las coordenadas de un polígono son un conjunto de coordenadas X e Y de cada vértice del polígono.
Para determinar las coordenadas de imagen, se puede usar un editor de mapas de imágenes, como MapEdit o un editor de gráficos como PaintShop Photo Pro. MapEdit también registra las coordenadas para usted.
href: Especifica la dirección URL a la que los enlaces región (puede ser absoluta o relativa).
alt: Proporciona un texto alternativo para la región de la imagen.
Margen
A continuación se define un mapa de tres región llamada NavMap vinculado al archivo de gráficos denominado images / 09fg08-navmap.jpg:
La figura muestra cómo un navegador muestra este marcado.
Cuando el ratón se encuentra sobre una región en el mapa, el cursor se convierte en una mano que señala (al igual que cambia con cualquier otro hipervínculo). Así que aproveche el texto del título para incluir información útil sobre el enlace y hacer el mapa más accesibles a los discapacitados visuales.
Un uso común de los mapas de imagen es convertir mapas de lugares (estados, países y tal) en mapas vinculables. Aquí están algunos recursos en línea que puede utilizar:
los About.com mapa de imagen tutorial proporciona más detalles sobre la construcción de mapas de imagen con la mano.
HTMLGoodies tiene una gran colección de mapas de imágenes tutoriales e información.
Creación de mapas de imagen con la mano puede ser complicado. Utilice un editor de imágenes para identificar cada punto en el mapa y entonces crear el marcado adecuado para ello. La mayoría de las herramientas HTML incluyen utilidades para ayudarle a hacer los mapas de imagen. Si se toma ventaja de una herramienta de este tipo, se pueden crear mapas de imágenes de forma rápida y con pocos errores.
Tener cuidado al usar los mapas de imagen. Si va a crear una ayuda visual (algo así como un mapa con enlaces a diferentes países muestra en ella, por ejemplo), el uso de un mapa de imagen tiene mucho sentido. Por otra parte, nunca se debe utilizar un gráfico con los mapas de imagen para su navegación principal. (Bueno, podría, pero que no le gustaría los resultados!)
Siempre use HTML y CSS para la página web principal de navegación, o si se debe utilizar un mapa de imagen gráfica, incluir una alternativa basada en texto junto con el mapa de manera que los visitantes del sitio con discapacidad visual también pueden navegar utilizando los controles alternativos en su lugar.
En general, lo mejor para la navegación es el uso de texto para las etiquetas de botón y dejar CSS manejar el trabajo implicado en la fabricación de botones se ven bien.