Guia y Documentacion HTML: ImageMap
Guía y Documentación HTML: IMAGEMAP

Una de las técnicas mas apreciadas constituye el poder situar links sobre imágenes de forma que según sobre que región de estas pulsemos con el ratón, nos dirija a determinada localización.
El sistema es facil de implementar y posibilita el crear unos menus de navegación sobre imagenes de cualquier tipo.
Para ello crearemos una imagen y la insertaremos en forma de imagen mediante el ya conocido tag

< img src=/tutoriales/manuales/htmldocs/mapa.gif >
Añadamos algunos comandos para indicarle que se trata de un IMAGEMAP:
<img src=/tutoriales/manuales/htmldocs/mapa.gif border=0 align=center ISMAP=yes usemap=#maptoc >

Observemos que hemos llamado "usemap=#maptoc", donde #maptoc es el nombre que hemos dado a nuestro mapa de coordenadas y links.
Básicamente la creación de IMAGEMAP se hace con un mapa o tabla que asocia las direcciones URL con determinadas coordenadas de la imagen donde hacemos click con el ratón.
En el ejemplo anterior, la imagen se ha llamado con la etiqueta #maptoc.
A continuacion podremos insertar en nuestro propio código HTML la tabla de coordenadas y direcciones a las que dirigimos dicho link.
Por ejemplo:

<map name="maptoc">
<area shap="rect" coords="106,205,131,218" href="/tutoriales/manuales/htmldocs/sevilla.phtml">
<area shap="rect" coords="109,229,146,243" href="/tutoriales/manuales/htmldocs/madrid.phtml">
<area shap="rect" coords="99,191,138,199" href="/tutoriales/manuales/htmldocs/cordoba.phtml">
<area shap="rect" coords="153,194,177,202" href="/tutoriales/manuales/htmldocs/jaen.phtml">
<area shap="rect" coords="184,183,220,192" href="/tutoriales/manuales/htmldocs/barcelona.phtml">
<area shap="rect" coords="212,220,260,224" href="/tutoriales/manuales/htmldocs/almeria.phtml"><


El campo shap,nos indica la forma de la zona que especificamos con las coordenadas y puede ser:
  • default - No se introducen coordenadas, solo una URL por defecto si se requiere.
  • circle - Se entran las variable center=x,y y edgepoint=x,y
  • poly - Se pueden insertar hasta 100 vertices para crear polígonos.
  • rect - Se introducen cuatro coordenadas cada una de un vertice del cuadrilatero.
  • point - Solo se introduce un punto.


Estas páginas han sido actualizadas : 06.NOV.2000