Este tema es muy interesante y poco conocido en HTML.
Esta etiqueta permite al navegador procesar las coordenadas del clic internamente, por lo que es más rápido, se puede usar con cualquier servidor HTML, incluso en páginas locales o accesos vía FTP.
<IMG SRC=mapa.gif ALT=mapa USEMAP=#mapa>
Tiene la desventaja de requerir que el navegador cliente haga todo el trabajo, pero si el navegador del cliente no es capaz de interpretar el atributo USEMAP nada ocurrirá, pero por ser un proceso local es más rápido. Es por eso que si el servidor HTML donde está tu página, tiene instalado un cgi apropiado, será mejor usar también el atributo ISMAP y si el navegador cliente no es capaz de interpretar el mapa, le pasa la chamba al servidor.
La etiqueta se usa para definir un mapa de imagen. Un mapa de imagen es una imagen con áreas en las que se puede hacer clic. El atributo NAME de la etiqueta <MAP> está asociado con el atributo de USERMAP de <IMG> y crea una relación entre la imagen y el mapa.
La etiqueta <MAP> puede contener varios elementos <AREA>, que definen las áreas en las que se puede hacer clic en el mapa de imagen.
El atributo USERMAP de la etiqueta IMG debe llevar delante "#".
<IMG SRC=imagen.gif WIDTH=145 HEIGHT=126 USERMAP=#mapa> <MAP NAME=mapa> <AREA SHAPE=rect COORDES='0,0,82,126' HREF=h_01.htm ALT=h_01.htm> <AREA SHAPE=circle COORDES='90,53,3' HREF=h_02.htm ALT=h_02.htm> </MAP>
Esta etiqueta define un área dentro de un mapa de imagen (un mapa de imagen es una imagen con áreas en las que se puede hacer clic). Las etiquetas <AREA> deben estar siempre anidados dentro de una etiqueta <MAP>.
El atributo USERMAP de la etiqueta <IMG> está asociado con el atributo NAME del elemento <MAP> y crea una relación entre la imagen y el mapa.
| Atributo | Descripción |
|---|---|
| SHAPE | Las opciones son: default|rect|circle|poly |
| COORDS | Coordenadas 4 para rectangulo (x1,y1,x2,y2), 3 para circulo (x,y,radio), y mucho mas para poligono. |
| HREF | URL |
| alt | Texto |
| download | Especifica que el destino se descargará cuando un usuario haga clic en el hipervínculo |
| hrefflang | Código lenguaje |
| media | Especifica para qué medio/dispositivo está optimizado el URL de destino. |
| nohref | valor |
| rel | alternate|author|bookmark|help|license|next|nofollow|noreferrer|prefetch|prev|search|tag |
| target | _blank|_parent|_self|_top|nombre de frame |
| type | Tipo medio |
Muestra la imagen y si el navegador soporta USEMAP, las coordenadas del clic son interpretadas usando el mapeo en la misma página en la que se encuentra la imagen, en la posición marcada como "map1", si no lo puede interpretar mostrará un error.
<A HREF=image.map><IMG SRC=pic2.gif USEMAP=maps.html#map2 ISMAP></A>
Mostrará la imagen pic2.gif, si el navegador soporta USEMAP procede como ejemplo anterior, si no es el servidor quien interpreta las coordenadas usando el archivo image.map
Las regiones son descritas en aun archivo usando la etiqueta <MAP> con el siguiente formato:
<MAP NAME=nombre> <AREA [SHAPE=forma] COORDS=x,y,x,y [HREF=referencia][NOHREF]> </MAP>
Esta definición puede estar en el mismo u otro archivo. Existen varias deficiones de forma para SHAPE y estas son:
Por ejemplo para una imagen de 100x100 se tendría "0,0,99,99".
NOHREF Define la región neutral, donde un clic no hace nada. Por omisión todo lo que está fuera de AREA está en NOHREF.
Si dos áreas se sobreponen, la que se defina primero queda sobre la otra y es la que se activará en la región de solape. Esto lo entenderán rapidito con un grafiquito :)
<MAP NAME=map1> <AREA SHAPE=rect COORDS="10,10,49,49" HREF="precios.htm"> <AREA SHAPE=rect COORDS="60,10,99,49" HREF="productos.htm"> <AREA SHAPE=rect COORDS="110,10,149,49" HREF="indice.htm"> </MAP> <IMG SRC=barra.gif USEMAP="#map1">
Un uso muy común es el de una barra con botones o una pantalla bien bacán que te capturas desde cualquier programa en Windows y la editas con algún editor gráfico.
Este es un atributo boleano de IMG que se puede añadir al etiqueta para identificar una imagen como la base para la captura de un clic de mouse, de forma que se genera un enlace condicional dependiendo del lugar donde el usuario hace el clic.
<A HREF=menu.php><IMG SRC=uap.gif ALT='Logo UAP' ISMAP></A>
Esta técnica de implementar imágenes mapeadas requiere la comunicación con un servidor HTTP para producir las coordenadas de la posición del clic y generar la dirección URL.
Tiene la ventaja de no requerir nada del navegador cliente, por lo que funcionará con cualquier navegador.
Para que sea posible el uso de este etiqueta, el servidor HTML debe controlar el acceso a los documentos vía un software "cgi-bin" que interpretará la posición de clic usando los datos que contiene el archivo "menu.map" y es por esto que a este atributo se le llama SSIM (Server Side Imagen Map)
Para trabajar con imágenes en general recomiendo el software libre GIMP. Debo mencionar que no es facil de usar y necesitaras revisar algunos videos disponibles en la propia pagina.
Se trata de Paint Shop Pro v5.01 de Jasc Software un programa para Windows 95 que permite ver, crear, capturar, manipular, retocar (tiene brochas, rodillo, balde, plumones, spray etc.), puede cambiar el tamaño (también tiene 12 tipos de deformación), número de colores, arreglar tonos (tiene 20 filtros, pero le puedes añadir más en una opción llamada plug-in), soporta scanner y convertir imágenes (soporta más de 30 formatos) en masa como todos los *.BMP.
Prepara un álbum, escaneando los directorios de tu HD, ZIP-Drive o DC-ROM en busca de imágenes de cualquier tipo, guardando la ruta de cada archivo original y jalar una pequeña muestra para pegarla en un álbum, para que no pierdas tiempo a la hora de pegar una imagen en tu página HTML, usa el Browser ACDSee 32 que puedes encontrar en ACD Systems también shareware.