EL BLOG DE PEAZODECOCK

El lobo de internet

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

20 de abril de 2009 Posted by | ESTUDIO, GRÁFICOS, MENÚ, ODISEA, TUTORIAL | Deja un comentario

   

El BOE nuestro de cada día

Web de noticias extraídas del Boletín Oficial del Estado

NOTICIAS EN GENERAL

Selección de noticias por PEAZODECOCK

FOTOGRAFÍA DE PEAZODECOCK

Hablemos de fotografía.

EL BLOG DE PEAZODECOCK

El lobo de internet

LA COLINA

Un libro de PEAZODECOCK

SEMU DEL ACEHÚCHI

El blog de todos los acehucheños.

A %d blogueros les gusta esto: