Foros del Web » Programación web » Javascript »

Mapa con iluminación de zonas

Estas en el tema de Mapa con iluminación de zonas en el foro de Javascript en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/10/2011, 06:30
Avatar de kukat  
Fecha de Ingreso: marzo-2011
Ubicación: Castalla
Mensajes: 14
Antigüedad: 3 años, 8 meses
Puntos: 0
Mapa con iluminación de zonas

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!
  #2 (permalink)  
Antiguo 27/10/2011, 06:37
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.201
Antigüedad: 12 años, 8 meses
Puntos: 1160
Respuesta: Mapa con iluminación de zonas

Hola:

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

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 27/10/2011, 07:03
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.679
Antigüedad: 6 años, 6 meses
Puntos: 943
Respuesta: Mapa con iluminación de zonas

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
  #4 (permalink)  
Antiguo 27/10/2011, 07:18
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.201
Antigüedad: 12 años, 8 meses
Puntos: 1160
Respuesta: Mapa con iluminación de zonas

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #5 (permalink)  
Antiguo 27/10/2011, 07:51
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 4.679
Antigüedad: 6 años, 6 meses
Puntos: 943
Respuesta: Mapa con iluminación de zonas

la navegación está bien. el problema es que no sabía que los títulos de las entradas eran vínculos
  #6 (permalink)  
Antiguo 27/10/2011, 08:05
Avatar de kukat  
Fecha de Ingreso: marzo-2011
Ubicación: Castalla
Mensajes: 14
Antigüedad: 3 años, 8 meses
Puntos: 0
Respuesta: Mapa con iluminación de zonas

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!
  #7 (permalink)  
Antiguo 27/10/2011, 08:11
Avatar de kukat  
Fecha de Ingreso: marzo-2011
Ubicación: Castalla
Mensajes: 14
Antigüedad: 3 años, 8 meses
Puntos: 0
Respuesta: Mapa con iluminación de zonas

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!
  #8 (permalink)  
Antiguo 27/10/2011, 08:25
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Sabadell
Mensajes: 4.896
Antigüedad: 6 años, 9 meses
Puntos: 568
Respuesta: Mapa con iluminación de zonas

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
__________________
Quim
--------------------------------------------------
Ayudar a ayudar es una buena práctica!!! Y da buenos resultados.
  #9 (permalink)  
Antiguo 27/10/2011, 09:15
Avatar de kukat  
Fecha de Ingreso: marzo-2011
Ubicación: Castalla
Mensajes: 14
Antigüedad: 3 años, 8 meses
Puntos: 0
Respuesta: Mapa con iluminación de zonas

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!!!
  #10 (permalink)  
Antiguo 27/10/2011, 13:48
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.201
Antigüedad: 12 años, 8 meses
Puntos: 1160
Respuesta: Mapa con iluminación de zonas

Hola:

Cita:
Iniciado por kukat Ver Mensaje
...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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Etiquetas: hover, iluminar, map, mapa, zonas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 11:24.
SEO by vBSEO 3.3.2