- Los mapas de imagen de cliente: toda la información necesaria está contenida en la página y por tanto el navegador es capaz de realizar la acción.
- Los mapas de imágenes de servidor: en ellos, el navegador envía la posición del ratón al servidor y es el servidor el que evalúa y realiza la acción.
¿Cómo hacerlo?
En Blogger al estar situados en el editor del artículo y insertamos la imagen a través del botón "Insertar Imagen"
Un mapa de imagen en el cliente se define con la etiqueta map y cada una de las zonas activas se define con la etiqueta area. La etiqueta area posee los atributos shape coords (su valor depende del valor de shape), que se emplean para definir la forma geométrica de la zona activa, y el atributo href, que se emplea para indicar la acción asociada:
- shape="default": define la acción por defecto para toda la imagen.
- shape="rect": define una región rectangular; el atributo coords contiene las coordenadas de la esquina superior izquierda y de la esquina inferior derecha del rectángulo.
- shape="circle": define una región circular; el atributo coords contiene las coordenadas del centro del círculo y del radio.
- shape="poly": define una región poligonal; el atributo coords contiene las coordenadas de cada uno de los puntos que forman el polígono; el último punto tiene que coincidir con el primero para que el polígono se cierre.
| <img src="201204210012_p01wesp0.jpg"
alt="Seleccione Comunidad o Ciudad Autónoma para más detalle"
title="Seleccione Comunidad o Ciudad Autónoma para más detalle"
usemap="#map" id="mapa_espanha" /> <map name="map" id="map"> <area href="#maps " coords="184,233,190,237" shape="poly" alt="Andalucía" title="Andalucía" > <area href="#maps " coords="341,71,341,76 shape="poly" alt="Aragón" title="Aragón" > <area href="#maps " coords="2,299,26,275" shape="poly" alt="Canarias" title="Canarias" > <area href="#maps " coords="253,57,267,53" shape="poly" alt="Cantabria" title="Cantabria" > <area href="#maps " coords="291,167,286,161" shape="poly" alt="Castilla-La Mancha" title="Castilla-La Mancha" > <area href="#maps " coords="196,75,208,71" shape="poly" alt="Castilla y León" title="Castilla y León" > <area href="#maps " coords="382,88,377,74" shape="poly" alt="Cataluña" title="Cataluña" > <area href="#maps " coords="221,309,251,332" shape="rect" alt="Ciudad de Ceuta" title="Ciudad de Ceuta" > <area href="#maps " coords="283,324,313,345" shape="rect" alt="Ciudad de Melilla" title="Ciudad de Melilla" > <area href="#maps " coords="252,161,259,150" shape="poly" alt="Comunidad de Madrid" title="Comunidad de Madrid" > <area href="#maps " coords="317,59,310" shape="poly" alt="Comunidad Foral de Navarra" title="Comunidad Foral de Navarra" > <area href="#maps " coords="361,142,359,148" shape="poly" alt="Comunitat Valenciana" title="Comunitat Valenciana" > <area href="#maps " coords="186,162,193,163" shape="poly" alt="Extremadura" title="Extremadura" > <area href="#maps " coords="136,59,147,56" shape="poly" alt="Galicia" title="Galicia" > <area href="#maps " coords="392,190,391,204" shape="poly" alt="Illes Balears" title="Illes Balears" > <area href="#maps " coords="288,101,294,101" shape="poly" alt="La Rioja" title="La Rioja" > <area href="#maps " coords="280,63,291,55" shape="poly" alt="País Vasco" title="País Vasco" > <area href="#maps " coords="190,50,207,49" shape="poly" alt="Principado de Asturias" title="Principado de Asturias" > <area #maps " coords="309,236,316,231" shape="poly" alt="Región de Murcia" title="Región de Murcia" > </map> |
En el detalle del código se puede ver cuál es el texto alternativo empleado para cada zona activa de los mapas de imagen de cliente y, por tanto, comprobar la adecuación de los mismos.
Se han añadido dos cosas:
- Se ha colocado el atributo alt en la etiqueta img informando a los que no vean la imagen de qué es y para qué sirve.
- El atributo title proporciona información adicional de forma visual, al pasar el puntero del ratón por la imagen aparecerá un pequeño cuadro emergente junto al puntero.