Mapas de imagen con el Gimp
Hoy en los foros de Gimp-Es, el usuario Mr. Reivaj ha preguntado acerca de los mapas de imagen, algo que he visto en alguna ocasión pero que nunca se me había ocurrido pensar en cómo se hacen. Manos a la obra, he hecho algunas pruebas y es realmente sencillo crear tus propios mapas de imágenes.
Para verlo, pongo un ejemplo de una página con una imagen normal y corriente en formato JPG. Al pasar el ratón sobre el logo de Firefox, dicho logo se ilumina y aparece un letrerito con el nombre del programa. Y lo mismo con el logo de Ubuntu, el del Gimp y el texto de HacheMuda.Com. Al hacer click sobre cualquiera de ellos, se va a su correspondiente página web.
Haz click sobre la imagen para ver el ejemplo:
¿Cómo se hace?
- Abre tu imagen en el Gimp y vete a Filtros -> Web -> Mapa de imagen. Se abre una nueva ventana con un nuevo editor. Es muy sencillo de usar, tan sólo tienes que seleccionar una zona con una de las herramientas de la izquierda (rectángulos, círculos o polígonos).
- Ve haciendo clicks para crear los nodos de tu selección y en el último haz un doble click. Se abrirá entonces una nueva ventana en la que puedes seleccionar el tipo de enlace (sitio web, correo, ftp…) y poner la dirección de internet a la que quieres que se dirija el navegador al pulsar sobre esa zona de la imagen.
- Una vez le das a aceptar, te crea una entrada para esa zona recién seleccionada en la pila de selecciones, que está a la derecha de la ventana, debajo del título Selección. Para editarla, sólo tendrás que seleccionarla de ahí y darle al iconito de editar. Ya puedes crear más zonas diferentes, con sus propios enlaces, y se van agregando a la pila de selecciones.
- Cuando ya tengas todas las zonas creadas y sus correspondientes enlaces, ve a File -> Save as y guárdalo con el nombre que tú quieras, mapaImagen.html en mi caso. Ya puedes abrir ese fichero con tu navegador preferido y comprobar que funciona.
- Por supuesto, puedes editar ese fichero HTML y tratarlo como una página web con una imagen en su interior, añadirle los tags de <html>, <body>, <head>, <title>…
Para conseguir los efectos del ejemplo que he puesto, tienes que añadir el código javascript necesario en el fichero HTML que acabas de crear con el editor de mapas de imagen del Gimp. Tendrás que crear una función que cambie de una imagen a otra, y así en cada una de las regiones que has creado decirle que cambie la imagen de fondo al pasar el ratón por encima.
Es sencillo, así que lo mejor es que te descargues el código que he usado yo y así lo verás más fácilmente. Modifícalo, cambia las imágenes, los efectos, añade cosas…
Deja tu comentario