Mapas De Imágenes

Los mapas de imágenes es un nuevo planteamiento de navegación que incorpora una serie de enlaces dentro de una misma imagen. Estos enlaces son definidos por figuras geométricas y funcionan exactamente del mismo modo que los otros enlaces.  En un principio, estos mapas no eran directamente reconocidos por los navegadores y recurrían a tecnologías de lado del servidor para ser visualizados. Hoy en día pueden ser implementados por medio de código HTML.

Podemos utilizar estos mapas, por ejemplo, en portadas donde damos a conocer cada una de las secciones del sitio por medio de una imagen. También puede ser muy práctico en mapas geográficos donde cada ciudad, provincia o punto cualquiera representa un enlace a una página. En cualquier caso, el uso de estos mapas ha de estar sistemáticamente acompañado de un texto explicativo que dé a conocer al usuario la posibilidad de hacer clic sobre los distintos puntos de la imagen.

Un mapa de imagen esta compuesto de dos partes:

  • La imagen propiamente dicha que estará situada como de costumbre dentro de la etiqueta <body> de nuestro documento HTML.
  • Un código, situado en el interior de la etiqueta <map>, que delimitara por medio de líneas geométricas imaginarias cada una de las áreas de los enlaces presentados en la imagen.

Ejemplo:

Puede hacer que parte de la imagen sea un enlace a otra página, o a un punto de la propia página, es decir, puede hacer un mapa sobre la imagen de manera que secciones de la imagen sean enlaces.

Las etiquetas empleadas para esto son:

1) La etiqueta <map>…..</map>. Las cuales engloban el mapa de imágenes.

Atributos de la etiqueta <map>:

Name=”nombre del mapa”. Atributo opcional al cual podemos poner entre las comillas el nombre del mapa o un texto explicativo.

2) La etiqueta <area>. Define las áreas que vamos a poder activar en esa imagen.

Atributos de la etiqueta <area>:

shape=”rect / poly / circle”. estableceremos el tipo de área a definir, rectágulo, poligono o círculo respectivamente.

Coords= “x1,y1,x2,y2,,” entre comillas indicamos los pares de coordenadas de cada punto(x,y) del área a mapear. Las áreas rectangulares se denotan las coordenadas de la esquina superior izquierda y las de la esquina inferior derecha. Las áreas poligonales especificaremos las coordenadas de todos los vértices del área. En las circulares indicaremos las coordenadas del centro del círculo y el valor del radio.

Href= “dirección página”. La dirección de la página a la que accederemos si pulsamos en el mapa de imágenes.

usemap=”#nombre del mapa” Deberemos de usar este atributo para que la imagen sea tratada como un mapa de imágenes.

Ejemplo:

<img src=”img/simpson_hit.jpg” width=”200″ heitgh=”250″

border=”0″ alt=”Hoomer Simpson” usemap=”#fire”>

<map name=”fire”>

<area shape=”circle” coords=”55,110,40″

href=”#” >

</map>

Visualización:

Referencias:

http://www.desarrolloweb.com/articulos/753.php

http://www.pcweb.es/manual_html/mostrar.php?opcion=Mapas_de_im

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Páginas

A %d blogueros les gusta esto: