MAPAS DE IMAGENES
¿ Que son los mapas de imagen ?
Los mapas de imágenes es otro planteamiento de navegación que incorpora una serie de enlaces dentro de una misma imagen. Estos enlaces son definidos por figuras geométricas ( cuadrados, rectangulos, etc ) y funcionan exactamente del mismo modo que cualquier otro enlace.
¿ Para que se pueden utilizar?
Podemos utilizar estos mapas, por ejemplo, en portadas donde dar 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 otra página. Los usos son variados, y depende de la necesidad de cada webmaster.
TUTORIAL
En este tutorial concreto,vamos a utilizarlo, para hacer un menu principal de nuestro foro, para ello he preparado en el Paint shop Pro esta imagen, que despues nos servira como menú principal con sus correspondientes enlaces:
- Abrimos la imagen del menu en el Paint Shop Pro y nos vamos a Archivo / Exportar / Mapa de imagen, se nos abrirá esta ventana.
-Clikamos en herramienta desplazar (1), y arrastraremos la imagen hacia abajo, para empezar a seleccionar nuestro primer enlace (2).
- Clikamos en la herramienta poligono (1) y seleccionamos la zona en la que está escrito "Portal" (2)
- Ahora vamos a enlazar esa parte de la imagen, con nuestro portal, para ello rellenaremos las casillas de "propiedades del objeto " de esta forma:
URL: http://www.odiseapsp.es/foro/ ( La url del portal )
Texto alt: PORTAL ( El texto que saldrá en ese enlace si falla la imagen, o si situamos el cursor encima )
Destino: _blank ( para que se abra el enlace en una ventana nueva al clikar )
_self ( el enlace se abrirá en la misma ventana. Este seria el valor por defecto si no indicamos nada )
- Nos quedará asi
- Volvemos a la herramienta "poligono" y seleccionamos el siguiente enlace, lo configuramos de igual forma que el anterior ( cambiando la url ) , y hacemos la misma operacion con todos los enlaces que tenga la imagen.
- Cuando hayamos acabado de configurar todos los enlaces, clikamos en "vista previa en navegador"
- Se abrirá una ventana nueva, con la imagen del menu , en el navegador , comprobamos que todos los enlaces funcionan correctamente, y nos vamos a : Ver / Codigo fuente de la pagina.
- Se nos abrirá una nueva ventana, de la que obtendremos el codigo de nuestro mapa de imagenes, copiamos todo lo que se encuentra entre las etiquetas y BODY Y /BODY :
BODY (ENTRE ><)
AQUI LA URL DE LA IMAGEN" WIDTH="165" HEIGHT="660" BORDER="0" USEMAP="#menu_principal">
BODY (ENTRE <>)
- Subimos la imagen del menu a un servidor, y ponemos la url de la imagen en la parte del codigo que os he puesto en rojo.
- Ya tenemos listo nuestro menu con mapa de imagenes, podeis ver el ejemplo AQUI
Tutorial realizado por Odisea
No hay comentarios:
Publicar un comentario
Deja tu comentario, seguro que todos aprendemos algo de ti.