• Una vez tenemos el código podemos retocarlo. Aquí tienes un trozo del mapa de imágenes de la Caza sobre Dinosaurios. Fíjate que hemos añadido dos trozos en el enlace: target="_blank" para que el enlace se abra en una nueva ventana del navegador y title="mensaje" para que aparezca una etiqueta al pasar el ratón por encima de la zona del enlace.
  

Un mapa de imagen es una forma de crear un menú en nuestras páginas Web. Se trata de definir áreas en una imagen, de tal forma que al hacer click encima de esa área se nos abra en el navegador un enlace a una página que nosotros hayamos definido. Tienes que tener en cuenta que el resultado de hacer un mapa de imagen es un fragmento de código HTML que posteriormente insertaremos en nuestras páginas web

• Tomaremos para explicar cómo se hace un mapa de imágenes la imagen del Mapa de Andalucía. Intentaremos que al pulsar con el ratón encima de cada provincia nos conduzca a la página de sus respectivos ayuntamientos:
  

• Una vez abierta la imagen del mapa de Andalucía. Elegimos la opción: Filtros->Web->Mapa de Imagen (en la captura aparece en inglés)
  

• Nos abre una ventana con el mapa de Andalucía a la izquierda, un panel derecho donde irán apareciendo los enlaces que hayamos definido y unas herramientas de selección en la parte izquierda.
  

• Vamos a definir para la explicación el enlace a la provincia de Córdoba. Primero elegimos la herramienta Polígono irregular. Después vamos trazando un polígono que abarque la mayor extensión de la imagen correspondiente a Córdoba. Una vez terminado hacemos doble click.
  

• Se nos abrirá una ventana. En primer lugar elegimos en esta ventana la opción Sitio Web, después en el recuadro destinado a la URL (dirección) escribimos la del Ayuntamiento de Córdoba. Cuando terminemos le damos a OK.
  

• Aquí vemos la imagen del área de la provincia de Córdoba ya definida y a la derecha el enlace que se abrirá al hacer click sobre ella.
  

• Cuando hayamos terminado con todas las provincias en la ventana de la creación del mapa de imágenes elegimos la opción Ver->Fuente (código fuente). Nos mostrará el código HTML que tendremos que insertar en nuestra página web para poder tener un menú con mapa de imágenes.
  

• Vamos a ver otra forma de hacer lo anterior manipulando directamente las capas del gráfico generado.
• Debes pensar en los gráficos como si estuviesen hechos superponiendo papeles cebolla unos encima de otros. Cada papel cebolla sería una capa.

• En este apartado vamos a aprender a diseñar botones para luego insertarlos en tus páginas Web.

• capas1.jpg:
  

• capas2.jpg:
  

• capas3.jpg:
  

• http://www.omerique.net/cursos/041106FC004/elgimp.html

(Ayuda) Buscar en Internet Buscar en www.omerique.net

• Otro producto made in...

Te mostraré paso a paso a crear logotipos transparentes como éste del encabezado

* Para crear logotipos utilizamos la extensión Script-Fu del Gimp. En el ejemplo he elegido Logo Básico II

• Nos aparece una ventana para escribir el texto del logo, elegir color para el mismo, tipografía, tamaño...
  

• Al pulsar en Aceptar nos genera el logotipo deseado pero con el color de fondo elegido anteriormente
  

• El logotipo está hecho de varias capas, la de abajo del todo es transparente. Con la herramienta Mover capas y selecciones seleccionamos el fondo blanco, muévelo para asegurarte de que lo has seleccionado
  

• Elige Edición->Cortar para borrar la capa del fondo blanco. Te queda el texto sobre un fondo transparente. Siempre que trabajes con fondos transparentes guarda tu resultado en formato png.
  

Temas Relacionados: EdicionHtml

-- JuanLopez - 18 Dic 2004

El pingüino ya no tiene frío