logo El diario de Pepe Molina (Caricatos)

yo

Se trata de crear el mapa de España (y los resultados serían los mismos con cualquier otro mapa).


Última caricatura

Andrés Iniesta: Futbolista español. En la actualidad juega en el Barcelona.

Andrés Iniesta

RSS de las imágenes: rss


La Cita

Para mejorar nuestro conocimiento debemos aprender menos y contemplar más

Rene Descartes, matemático y filósofo francés (1596-1650).


En esta zona están las páginas personales del autor.


Mis clientes ahora también son mis amigos (aunque les cobre).


En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..


En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)


Las recomendaciones que proponemos son de índole variada.


Aquí un cajón de sastre de enlaces.


Nos referencian desde sitios de toda índole.


Puede contribuir a mantener esta página con su donativo.


botón pay-pal

javascript: rollover en mapas

emoticón de Caricatos Publicado el día 23 de enero de 2011
id=8; categorías: Vicisitudes de un Webmaster, Programación

España Tengo desde hace algún tiempo un proyecto que hoy me he decidido a cumplir. Se trata de crear el mapa de España (y los resultados serían los mismos con cualquier otro mapa). En principio buscaremos una versión gratuita del mismo, que hemos hallado en la wikipedia: Provincia de España.

Lo primero que hacemos es eliminar las letras del mapa (provincias, países vecinos, etc.); y al tratarse de un fichero en formato svg, usamos un programa de edición adecuado: Inkscape Portable, y adelantamos el siguiente paso: capturar las áreas de cada provincia con una aplicación propia: Capturar áreas en imágenes. Por esa razón, aprovechamos que nuestro programa permite exportar en formato de mapa de bits (png), lo hacemos y obtenemos la imágen que vemos: Ver ampliación.

Hemos insertado nuestra imagen y creado las primeras áreas con resultado satisfactorio a simple vista, pero con algunas provincias no, por lo que nos pasamos a la pestaña de edición y pulsamos el botón "Mostrar en Pop-Up". Cuando pasamos el ratón por las cuadríaculas que representan los píxeles de la imagen, advertimos que no tenemos los colores "planos", que es el requisito para que la aplicación de captura funcione correctamente.

Sabiendo que mi mapa de España no tenía colores planos, recurrí a otra aplicación para saber los colores que tenía esa paleta: Iconos online, y me sorprendió ver una paleta con más de 50 colores, cuando pensaba que debía tener menos de 10, aunque al tratarse de una imágen redimensionada en esta otra aplicación evidentemente se trata de un dato poco fiable.

Las posibilidades de conseguir mi objetivo se reducían a dos: buscar otra imagen, que aunque podía encontrarla, debería tratarse de libre uso; y ante la incertidumbre de conseguirlo, me propuse seguir adelante con la segunda posibilidad: reducir el número de colores de la paleta.

Con el programa inkscape no he encontrado la forma de reducir la paleta, así que decidí usar un editor de mapas de bits, en concreto The Gimp, también en su versión portable. Hay en la web muchos pequeños tutoriales para reducir la paleta de una imagen, aunque es tan sencillo como convertirla a modo de colores indexados, y seleccionar el número al que deseemos. Probando con 16 colores, hemos conseguido una nueva imagen: Mapa de España, pero al volver a hacer capturas, seguían siendo defectuosas.

Retocando la aplicación

Hemos decidido retocar la aplicación, para que pueda reducir la paleta, y también para poderla ver.

Una forma muy sencilla de reducirla (¿Cómo no se me ocurrió antes?), es en vez de generar una imagen png como lo hacía la aplicación original, damos la posibilidad de generar un gif, cuya paleta solo puede constar de como máximo 256 colores. Y para obtener la paleta, recorremos todos sus pixeles y guardamos su color.

También podemos leer los colores y reducir la paleta haciendo que los píxeles de un color tomen otro color de la paleta, pero nos ayudaremos de la opción "Mostrar en Pop-Up" de la pestaña edición (primero hay que capturar un área, y si fuese el caso, seleccionarlo).

Después de combinar los colores hemos notado que seguimos con algunos problemas, así que vamos a dejarlo provisionalmente, para empezar desde cero la próxima versión, pero considerando todas las vicisitudes por las que hemos pasado con el proyecto. En posteriores apuntes detallaremos esa evolución.

Vayamos al grano

Explicando el funcionamiento de la aplicación, hemos dejado de lado la explicación que origina el título del apunte, así que nos centraremos en ello. Toda imagen puede tener asociado un mapa, y sus respectivos áreas, y las coordenadas definidas en cada una de las áreas sería la zona "caliente" de un enlace; no nos olvidemos que las áreas de una imagen son una variante de los típicos enlaces de las páginas, que en lugar de usar una etiqueta "a" (anchor/ancla), la etiqueta es "area", pero los rollover son imágenes de sustitución, y la imágen no es lo que queremos sustituir sino un área de ella, así que se puede tratar de una imagen grande, sustituida por una pequeña, así que podríamos provocar un descuadre o desajuste indeseado.

Y que tal si en vez de sustituir una imagen normal, sustituímos una imágen transparente superpuesta a esa original... y por qué no superponer más imágenes. En eso consiste el truco, poner al fondo una imagen normal, y superponer otras imágenes que simplemente pueden ser transparentes junto a la figura que representa el área con colores opacos en la misma ubicación.

Aunque pueda parecer un trabajo arduo, usando las herramientas adecuadas veremos que es bastante sencillo. Solo tenemos que ver el código de la página capturadora centrándonos en la parte concerniente al efecto. Vemos que las imágenes están dentro de un contenedor o capa (div) con identificador ejemplo (id="ejemplo"). A continuación mostramos la definición de los estilos asociados:

#ejemplo	{
	margin-left: 1em;
	float: right;
	width: 302px;
	height: 102px;
	border: 1px solid gray;
	position: relative;
	background-image: url(_grid.gif);
}
 
#ejemplo img	{
	position: absolute;
	top: 0;
	left: 0;
}
 
#ej0, #ej1, #ej2, #ej3	{
	visibility: hidden;
}

efecto rollover Ahora nos fijaremos las imágenes que tenemos en el contenedor; la primera es la adjunta a este párrafo y voy adelantando que sus medidas son 300x100 píxeles. Luego hay otras imágenes con nombres raros, pero si los analizamos vemos que se tratan de ficheros "*.php", o sea ficheros con contenido dinámico conocidos como scripts php; además lleva unos parámetros que si analizamos, son parecidos a los atributos de las áreas:

<img
	id="ej0"
	src="pngshape.php?ancho=300&alto=100&shape=poly&borde=000000&relleno=0000FF&coors=21,8,29,8,29,30,8,30,8,8"
	class="efecto oculto"
	alt="figura"
/>

Solo nos falta revisar los áreas encerrados en el mapa de la imagen para descubrir que el parámetro coors de nuestra imagen "script", es idéntico al parámetro "coords" del área asociada, efecto que simplemente se consigue usando librerías php como imagepolygon y imagefilledpolygon. Para terminar observamos que cada área tiene programado su respectivo evento mouseover/mouseout, que les adelanto que solo cambian la visibilidad del objeto asociado al parámetro, que no es otro que los identificadores de éstas imágenes "rollover".

Zona de comentarios

Hemos encontrado 3 comentarios.

#Mensaje enviado por Andrés Fernández
Comentario escrito el día 06 de septiembre de 2013, a la hora 16:01:03
url: http://www.disegnocentell.com.ar
email: mobius@disegnocentell.com.ar

Este es un comentario que no sé si corresponde al artículo, pero quería hacerlo :)

Aprendí de vos que el input type image envía al servidor las coordenadas del pixel que recibe el click. Hete aquí que me he topado hace un par de días con el atributo ismap, el cual no conocía, que hace casi lo mismo: http://www.tutorialspoint.com/html/using_html_ismap.htm

Te mando un abrazo!


#Mensaje enviado por Andrés
Comentario escrito el día 04 de junio de 2012, a la hora 03:48:48
url: http://www.disegnocentell.com.ar
email: mobius@disegnocentell.com.ar

Pepe, me quedé pensando luego de leer esta serie de artículos de los mapas: no merecería la pena, ahora que hay buen soporte en los navegadores, usar svg? La verdad es que luego de ver esta página http://srufaculty.sru.edu/david.dailey/svg/, cada vez me gusta más svg.

#Mensaje enviado por Pepe Molina
Comentario escrito el día 19 de de 2012, a la hora 12:11:50
url: http://www.pepemolina.com

Hola Andrés,


Gracias por el comentario y la sugerencia, parece muy interesante, además de poderse crear simplemente con un editor de textos básico como acostumbro a escribir mis códigos. En breve me pondré a hacer algunas pruebas.


Saludos mi emoticón

Evaluación

Valoración de esta página: (apunte.8) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Historial de navegación

Esta página ha sido visitada en 9561 ocasiones


Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.


Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.


Una buena forma de buscar un apunte es a partir de su categoría.


También es posible buscar apuntes por medio de las etiquetas (tags).


Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.


Desde este recuadro se puede hacer una búsqueda cronológica.


Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

../diario.imagen.php?id=2
http://www.pepemolina.com/postales/Navidad/TgC_Navidad_31.gif
enlace a la postal
Copyright © 2002-2017 www.pepemolina.com
RSS rss | Ver Mapa del sitio