Foros del Web » Creando para Internet » HTML »

Mapa interactivo en HTML efecto onmouseover

Estas en el tema de Mapa interactivo en HTML efecto onmouseover en el foro de HTML en Foros del Web. Hola a todos. Tengo un problema que me está dando dolores de cabeza. Tengo un blog en blogger, y he creado en él un mapa ...
  #1 (permalink)  
Antiguo 23/09/2010, 06:05
 
Fecha de Ingreso: septiembre-2010
Mensajes: 4
Antigüedad: 7 años, 2 meses
Puntos: 0
Mapa interactivo en HTML efecto onmouseover

Hola a todos.

Tengo un problema que me está dando dolores de cabeza. Tengo un blog en blogger, y he creado en él un mapa interactivo. Se trata de una provincia (Soria), dividida en varios municipios. Yo de HTML no tengo ni idea. Lo único que sé es por lo que he ido leyendo en foros. Con eso, lo más que he conseguido es poder seleccionar cada municipio (area) y que aparezca el nombre, y el hipervínculo al que te lleva:

<map name="soria">
<area alt="Alcubilla de Avellaneda" title="Alcubilla de Avellaneda" shape="POLY" coords="95, 218; 90, 209; 89, 201; 67, 206; 67, 193; 69, 191; 69, 186; 80, 185; 80, 181; 84, 180; 85, 176; 92, 176; 100, 187; 105, 187; 105, 197; 102, 201; 111, 213; 107, 215; 98, 216; 95, 218" href="http://lospueblosdesoria.blogspot.com/search/label/Municipio%20de%20Alcubilla%20de%20Avellaneda" />
</map>

Y así con cada municipio. El problema se me plantea a la hora de que al poner el cursor sobre esa zona, yo quiero que se sombree. Es decir, que tengo la imagen principal, que sería el mapa de la provincia, y también tengo el mapa de cada zona, para poder hacer el efecto onmouseover. Pero el problema es que no se muy bien cómo hacer el efecto, si es que me falla en esta parte del script:

<script type='text/javascript'>
function mostrar(cosa, estado) {
// document.images[cosa].style.visibility = (estado) ? 'visible':'hidden';
document.getElementById(cosa).style.visibility = (estado) ? 'visible':'hidden';
}
</script>

O me falla en esta otra parte:

<a><img alt="soria1" src=" http://lh5.ggpht.com/_zl-dqYvA7LQ/TJncIybM2aI/AAAAAAAAEh4/klK-oy5hkaM/MAPA%20BASE%20SORIA.png" usemap="#soria" style="margin: 0; border: 0" /></a>

<img id="alcubilla" src="http://lh5.ggpht.com/_zl-dqYvA7LQ/TJnhmKJDzxI/AAAAAAAAEiY/hCUgM0m9XYQ/ALCUBILLA%20DE%20AVELLANEDA.png" style="position: absolute; top: 0; left: 0; margin: 0; visibility: hidden;" />

O si falla en ésta:

<map name="soria">
<area alt="Alcubilla de Avellaneda" title="Alcubilla de Avellaneda" shape="POLY" coords="95, 218; 90, 209; 89, 201; 67, 206; 67, 193; 69, 191; 69, 186; 80, 185; 80, 181; 84, 180; 85, 176; 92, 176; 100, 187; 105, 187; 105, 197; 102, 201; 111, 213; 107, 215; 98, 216; 95, 218" href="http://lospueblosdesoria.blogspot.com/search/label/Municipio%20de%20Alcubilla%20de%20Avellaneda"
onmouseover="′mostrar(" alcubilladeavellaneda", true)′ onmouseout="′mostrar(" alcubilladeavellaneda", false)′ />
</map>

En fin, que si alguien sabe dónde está el problema o cómo puedo solucionarlo, le agradezco sobre manera la ayuda.

Muchas gracias a todos.
  #2 (permalink)  
Antiguo 23/09/2010, 11:19
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Mapa interactivo en HTML efecto onmouseover

Hola:

Teniendo las imágenes, es algo complejo, pero no imposible, yo uso una imagen transparente para usar el mapa, y las sombras son imágenes transparentes con el área/sombra visible, y simplemente mostrar/ocultar esa imagen con el evento... puedes verlo en esta página: Capturar áreas en imágenes...

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #3 (permalink)  
Antiguo 23/09/2010, 18:02
 
Fecha de Ingreso: septiembre-2010
Mensajes: 4
Antigüedad: 7 años, 2 meses
Puntos: 0
Respuesta: Mapa interactivo en HTML efecto onmouseover

Gracias por la respuesta, pero no entiendo bien el contenido del link que me has facilitado. Te paso la url de mi blog para que te hagas una idea:

http://lospueblosdesoria.blogspot.com/
  #4 (permalink)  
Antiguo 24/09/2010, 00:20
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Mapa interactivo en HTML efecto onmouseover

matxwell85:
Después de ver tu mapa, no se si se pueda, pero vi esto que es muy interesante...

http://ago.tanfa.co.uk/css/examples/europe-map.html, usa solo una imagen
http://ago.tanfa.co.uk/css/examples/europe2.gif

Con respecto a "tu" mapa, a que se le haría el efecto over, a cada una de las partes del area que está en rosa?


Dime a ver si se me ocurre algo

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 24/09/2010, 02:19
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.547
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Mapa interactivo en HTML efecto onmouseover

Hola:

Desde mi link puedes ver el efecto en la imagen que aparece con figuras... simplemente se muestra una imagen superpuesta con los bordes dibujados, aunque se podría editar y cambiar o añadir otras cosas.

Y si tu imagen tuviese colores planos, podrías subirla y obtener tanto las areas como la imágen de sustitución... pero por lo que he visto, deberías aplanar los colores de tu imagen antes.

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #6 (permalink)  
Antiguo 24/09/2010, 12:40
 
Fecha de Ingreso: septiembre-2010
Ubicación: Vallarta
Mensajes: 9
Antigüedad: 7 años, 3 meses
Puntos: 0
Respuesta: Mapa interactivo en HTML efecto onmouseover

Otra opcion es [URL="http://davidlynch.org/js/maphilight/docs/"]jquery maplight[/URL], no tendrías que modificar mucho de lo que ya tienes y conseguirías el efecto que estas buscando...

Yo he hecho un mapa con esta aplicación y me va muy bien: http://mexicoboutiquehotels.com/mexico/regions/

Saludos!
  #7 (permalink)  
Antiguo 25/09/2010, 05:12
 
Fecha de Ingreso: septiembre-2010
Mensajes: 4
Antigüedad: 7 años, 2 meses
Puntos: 0
Respuesta: Mapa interactivo en HTML efecto onmouseover

Emprear.

Gracias por la respuesta. A tu pregunta de "Con respecto a "tu" mapa, a que se le haría el efecto over, a cada una de las partes del area que está en rosa?", las áreas en "rosa" son los municipios que he visitado de momento, eso estaría visible. Cuando el ratón se colocara sobre una de esas áreas, o sobre las que no están en rosa, lo que yo quiero es que aparezcan en otro color. Por ejemplo, azul, para indicar así que se está señalando ese municipio y no otro.

Caricatos.

Estoy estudiando tu propuesta de hacer una imagen con transparencia de cada área (municipio), con colores planos, para realizar el efecto.

lgaribi.

Te agradezco mucho la ayuda, y me parece interesante y casi el más idóneo el efecto que me planteas, pero si poco o casi nada entiendo de HTML, con CSS que no lo he mirado, pufffff.... jejeje . Aún así, muchas gracias.

Muchas gracias a todos por la ayuda. Lo único pediros si sabeis lo que tendría que poner en la parte de <head> </head>, para que las cosas que me vais diciendo funcionen. Ya os digo, yo de HTML lo justo, así que si me podeis poner el código entero y por ejemplo: IMAGEN A, para el mapa estático, e IMAGEN B, para la imagen que aparece al poner el ratón encima del área; os lo agradecería, para poder orientarme. Muchas, muchas, muchas gracias.
  #8 (permalink)  
Antiguo 27/09/2010, 06:24
 
Fecha de Ingreso: septiembre-2010
Mensajes: 4
Antigüedad: 7 años, 2 meses
Puntos: 0
De acuerdo Respuesta: Mapa interactivo en HTML efecto onmouseover

Hola a todos.

¡COMPAÑEROS, HE ENCONTRADO LO QUE BUSCABA!

Pero ahora tengo un problema: no sé que parte del código del HTML de esa página he de sacar para que mi mapa salga igual que el que tiene del Mundo. El ha conseguido el efecto que yo quiero de poner el cursor sobre un determinado país y que se sombree en rojo, además de poner el nombre. Eso es lo que yo busco, solo que en vez del mundo en mi mapa de la provincia de Soria. La página en cuestión es la siguiente: http://www.netzgesta.de/mapper/

He sacado el código HTML completo de su página, y lo he estado mirando. Pero como mi idea es justita del HTML, no sé que es lo que tengo que sacar de la parte del <HEAD> </HEAD>, o de la parte posterior al mapa <MAP> </MAP>. Si me podeis ayudar con esto habré solventado el problema. Además, cuando lo haga, colgaré el código sin mis imágenes, coordenadas y cosas por el estilo, explicando paso por paso cómo hacerlo, porque la verdad, no quiero que nadie se pase el tiempo que me he pasado yo intentándolo hacerlo.

MUCHAS GRACIAS A TODOS Y ESPERO VUESTRAS RESPUESTAS.
  #9 (permalink)  
Antiguo 27/09/2010, 06:50
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Mapa interactivo en HTML efecto onmouseover

matxwell85:

no tenés que ver el código de su página, tenes que bajarte la script y la demo.
La documentación es muy amplia y no la implemente, pero la baje y funciona, tenés que empezar a leer las instrucciones y ver el ejemplo


saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #10 (permalink)  
Antiguo 08/02/2011, 21:37
 
Fecha de Ingreso: febrero-2011
Mensajes: 1
Antigüedad: 6 años, 10 meses
Puntos: 0
Respuesta: Mapa interactivo en HTML efecto onmouseover

Hola que tal he encontrado esta libreria de jquery maphilight pero no se como usarla
por ejemplo esta es la parte de codigo de una seccion
<area href="#" title="WA" shape="poly" coords="90,25, 94,27, 104,29, 112,31, 131,37, 154,42, 169,46, 168,50, 165,63, 160,83, 157,99, 157,108, 143,105, 128,101, 113,101, 113,100, 108,102, 103,102, 101,100, 100,101, 95,100, 94,99, 89,97, 88,97, 84,96, 82,98, 76,97, 70,93, 71,92, 71,85, 69,81, 65,81, 64,78, 62,78, 60,76, 58,77, 56,74, 56,72, 59,71, 61,67, 58,66, 58,63, 62,62, 60,59, 58,53, 59,50, 59,42, 57,39, 59,30, 62,30, 64,33, 67,36, 70,38, 74,40, 77,40, 80,42, 83,43, 85,42, 85,40, 87,39, 89,38, 89,39, 89,41, 87,41, 87,43, 88,44, 89,47, 90,49, 92,48, 92,47, 91,46, 90,43, 91,41, 90,40, 90,38, 92,34, 91,32, 89,27, 89,26, 90,25"></area>

pero no se que como cambiar las coordenadas ¡ alguien me podria a yudar?

Etiquetas: interactivo, mapa, onmouseover
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 04:53.