Mapa con iluminación de zonas

kukat · #1 (**permalink**) 27/10/2011, 05:30

Hola!!!

Estoy buscando la forma de hacer algo como esto:

http://davidlynch.org/projects/maphilight/docs/demo_usa.html

He visto el codigo en js -> http://davidlynch.org/projects/maphilight/jquery.maphilight.js

I me pregunto si és la única forma de hacer algo así..

quiero que las comarcas de la COmunidad Valenciana se iluminen.

Por ejemplo:

Código:

<area	shape="poly"
                        coords="33,552,46,558,48,564,62,566,60,584,66,589,56,597,55,608,46,603,45,600,28,570,34,560"
                        href="http://ca.wikipedia.org/wiki/Baix_Segura"
                        target="_blank"
                        title="Baix Segura"
                        alt="Baix Segura"
                        id="Zona"
                        />

Pensava que seria más fàcil. Poner alguna cosa en jQuery que cogiera la etiqueta "area" y le canviara el background...però la verdad, no funciona.

Sabeis alguna forma senzilla de hacerlo???

grácias a todos!

caricatos · #2 (**permalink**) 27/10/2011, 05:37

Hola:

Puedes ver como se hace en este apunte: Mapa de España (tendrás que seguir algún enlace)

Saludos

IsaBelM · #3 (**permalink**) 27/10/2011, 06:03

caricatos, como se llega a esa url?? en este post en el foro css le di esta otra y que se buscara la vida. por que no tuve forma de llegar a la url que tu le das

caricatos · #4 (**permalink**) 27/10/2011, 06:18

Hola IsaBelM:

Quise darle a esa página formato de blog, donde hay enlaces directos a los apuntes (en los blogs suelen ser noticias o artículos), pero la página principal es un listado de los últimos 5 apuntes con paginación (de 5 en 5, al pie del listado, antes de la zona de comentarios y valoraciones), también son listados los enlaces de las etiquetas y categorías... Puede que haya errores porque lo estoy haciendo con el notepad, y le hago constantes modificaciones. Pensaba que se navegaba bien...

Saludos

IsaBelM · #5 (**permalink**) 27/10/2011, 06:51

la navegación está bien. el problema es que no sabía que los títulos de las entradas eran vínculos

kukat · #6 (**permalink**) 27/10/2011, 07:05

grácias a los dos!!!

estoy viendo el post, y aunque parezca senzillo... joder que curro!!! heheh

Los <area> los he hecho con esta herramienta que hay similar a la tuya:
http://www.kolchose.org/simon/ajaximagemapcreator/

!!! Supongo que en eso no afecta nada a lo que he pedido! heheh

Por lo que veo:
El primer trozo de código lo haces para ordenar alfabeticamente todas las provincias de España.

Luego creas un array con todos los elementos area, que a su vez te lo curras mogollón para que se haga todo lo posible con arrays.

Y estas dos fucniones javascript llaman a "onmouseover/onmouseout", para canviar el color DE LA LETRA.

Código:

function ocultarArea(cual)	{
	document.images[cual].style.visibility = "hidden";
	document.anchors[cual].style.backgroundColor = "transparent";
}
function mostrarArea(cual)	{
	document.images[cual].style.visibility = "visible";
	document.anchors[cual].style.backgroundColor = "yellow";
}

Lo que no veo ahora mismo és donde le canvias el color a la província a rojo! No lo veo, lo siento!!!

muchas grácias, me esta sirviendo de mucha ayuda!

kukat · #7 (**permalink**) 27/10/2011, 07:11

perdon! creo que me he saltado este enlace:

http://www.pepemolina.com/index.php?titulo=javascript:+rollover+en+mapas

Que supongo que és donde haces concretamente la parte de iluminar las províncias!!!

Vale, voy a mirarmelo detenidamente y si tengo alguna duda la pregunto. Por lo que veo hay que recurrir a PHP!

gràcies! de nuevo!

quimfv · #8 (**permalink**) 27/10/2011, 07:25

Me apunto a la conversación, pero añado, una pregunta.

Sabriais como pasar de un conjunto de coordenadas UTM a las coordenadas de un mapa html.

Suponiendo que conocemos la UTM del punto 0,0 de la imagen y la UTM del punto max,max....

Grácias

kukat · #9 (**permalink**) 27/10/2011, 08:15

Vale!!! Creo que ya lo entiendo... A ver si me aclaro.

Tienes una imagen del mapa de España.

Con Javascript, al situar el puntero encima de una determinada zona, superpones otra imagen de color rojo.

Esa imagen tiene extensión PHP.

Le pasas como parámetro las coordenadas del área y así obtienes el tamaño exacto que se superpone a la imagen de España

Es eso?

En el caso de que sea eso... que es el pngshape.php??? O sea, el codigo de "pngshape.php" ???
Madre mia, me estoy haciendo un lio!!!

caricatos · #10 (**permalink**) 27/10/2011, 12:48

Hola:

Cita:

Iniciado por kukat

...Los <area> los he hecho con esta herramienta que hay similar a la tuya:
http://www.kolchose.org/simon/ajaximagemapcreator/

!!! Supongo que en eso no afecta nada a lo que he pedido! heheh

...

¡Je, je!, me haces un verdadero halago poniendo que es similar, pero hace años hice lo mismo, pinchando punto a punto, pero la aplicación actual se pincha una sola vez, y la misma aplicación detecta el área; eso sí, debe tratarse de una imagen plana, tal como usé en el ejemplo.

Sobre el pngshape es la aplicación mágica que le pasas parámetros como las coordenadas, tamaño y color de fondo para desde la nada se cree la imagen de sustitución... si tienes esos datos, solo debes ponerlos como parámetros...

Saludos