Cool Black by Free CSS Templates

mapas

Mapas sensibles

Los mapas sensibles son imágenes que presentan múltiples enlaces según la zona donde se sitúe el cursor. Para conseguir esto se divide la imagen en zonas mediante las coordenadas de las mismas.

Procedimiento

Primero conseguimos una imagen y la declaramos como mapa, en este caso con el nombre de directorio

Abrimos el mapa recién creado

Definimos las zonas del mapa y los enlaces que le asignamos a cada una.

comentario

Cerramos el mapa

Valores de SHAPE y COORDS

Los valores que pueden tomar la forma y las coordenadas son:

RECT. Rectángulo o cuadrado

COORDS="x,y,u,v" donde x,y son las coordenadas del vértice superior izquierdo del rectángulo y u,v es el vértice inferior derecho. El origen de coordenadas 0,0 es el vértice superior izquierdo

CIRCLE. Círculo

COORDS="x,y,z", donde x,y es el cetro de la circunferencia y z el radio

POLY. Línea poligonal cerrada

COORDS="X,x, Y,y, Z,z...,X,x", donde los pares X,x, Y,y, etc representan los vértices del polígono. El primero coincidirá con el último.

DEFAULT. La zona no referenciada anteriormente

Para hallar las coordenada necesitarás un editor de imágenes, como los señalados en la página de imágenes. Si te empeñas también puedes hacerlo a ojo, siempre que la imagen no sea muy complicada, ya que cuando pulsas la zona en el navegador aparece definida un instante.

Ejemplo

Vamos a crear un mapa sensible con una imagen capturada del explorador de Windows95. Para hacerlo pulsa la tecla Imprimir Pantalla (Print Screen SysRq) y luego pega la imagen capturada con cualquier editor de imágenes. El Paint que viene con Windows 95 y 98 no vale ya que, aunque captua la pantalla, luego no puedes guardar la imagen en formato gif o jpg. Usa el Adobe Photoshop, el Paint Shop Pro o el Corel.

Vamos a  crear un mapa que nos podría servir como menú en la página principal.

Para conseguir el mapa de la izquierda hemos escrito















No te asustes con tanto número, fíjate en las regularidades que presentan. La 1ª columna y la 3ª indican donde empieza y donde acaba horizontalmente. La 2ª y la 4ª lo hacen en sentido vertical. 
Cualquiera de los programas citados anteriormente te indican las coordenadas de cualquier punto de una imagen.

Fíjate también que la etiqueta inicial es una etiqueta de imagen y como tal acepta todos sus atributos.

 



 
Este sitio web fue creado de forma gratuita con PaginaWebGratis.es. ¿Quieres también tu sitio web propio?
Registrarse gratis