20.4.09

TUTO DE MI AMIGA ODISEA

Lo pongo aquí, para no perderlo nunca... me gusta ésta chica y su capacidad y conocimiento con el programa... no dejéis de visitarla... PINCHA AQUÍ PARA VER SU FORO

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:

Image


- Abrimos la imagen del menu en el Paint Shop Pro y nos vamos a Archivo / Exportar / Mapa de imagen, se nos abrirá esta ventana.

Image


-Clikamos en herramienta desplazar (1), y arrastraremos la imagen hacia abajo, para empezar a seleccionar nuestro primer enlace (2).

Image

- Clikamos en la herramienta poligono (1) y seleccionamos la zona en la que está escrito "Portal" (2)

Image

- 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

Image

- 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"

Image

- 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.

Image

- 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">


PORTAL
FORO
USUARIOS
F.A.Q.
TUTORIALES

BUSCADOR
MUSICA


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.