Cambiar imagen en mapas

senit · #1 (**permalink**) 22/11/2008, 04:11

Mi problema es el siguiente:

Quiero poner un mapa en una web, y quiero que cuando pase el cursor por una provincia, esta cambie de color y aparezca el nombre de la provincia, esto segundo lo consigo, pero lo primero no.

Utilizo los atributos onMouseover y onMouseout, y tambien tengo una imagen de cada provincia para cambiar en el mapa al pasar el cursor, pero fallo en algo, ya que no me llega a cambiar dicha imagen.

Alguien puede ayudarme.

Gracias.

Panino5001 · #2 (**permalink**) 22/11/2008, 04:42

Podrías tener una imagen con todos los estados (sprite) asignada como background de una capa con estilo overflow:hidden, asignar una clase por estado (en cada clase jugar con la posición horizontal y vertical, ejemplo: background:url(sprite.jpg) 100px 200px;) y establecer en cada mapa un className para el evento onmouseover y otro para el evento onmouseout, relacionados con el nombre de clase que quieras.

senit · #3 (**permalink**) 22/11/2008, 04:50

Gracias, pero la verdad es que llevo muy poco tiempo utilizando javascript y lo que me dices no lo se hacer, mi idea era la de poner la imagen del mapa completo en un div en html, y sobre esa imagen que se superponga la imagen pequeña de la provincia, o con que cambiara de color dicha area me valdría, ya que la imagen pequeña es el mismo area que la provincia pero de distinto color.

Saludos.

caricatos · #4 (**permalink**) 22/11/2008, 05:22

Hola:

Creo que en esta página: Creación de áreas en imágenes está el efecto que quieres... puedes crear las áreas y ver los resultados...

Saludos

senit · #5 (**permalink**) 22/11/2008, 05:39

Exacto, ese es el efecto, lo que ocurre al pinchar sobre madagascar.

Pero en esa página no te genera el código completo, o por lo menos yo no lo he podido descifrar, por que en una parte del código mete php para rellenar el area seleccionada, que ademas creo que lo coge accediendo a una base de datos suya. He intentado varias veces generar código y despues no me funciona.

Gracias y saludos.

caricatos · #6 (**permalink**) 22/11/2008, 06:07

Hola:

La página la hice yo, y la base de datos es para poder usar imágenes subidas (sé que podría obviar el uso de una base de datos trabajando con variables de sesió... ya lo hice en otros sitios)... entonces el único uso de esa base de datos es por usar imágenes de los visitantes... y en alguna parte de la página se explica...

La parte php, a grandes rasgos es para crear los recortes a partir de la imagen subida... se debería guardar la imagen creada y que se muestra a pie de página por cada recorte que se hace...

Sé que no lo he documentado suficientemente, pero incluso guardando la página "completa", se pueden conseguir los ficheros generados (según el naveqador que uses, claro está...)

Saludos

senit · #7 (**permalink**) 24/11/2008, 04:06

A ver, yo en este código que me ha generado la página:

<html><head><title>Prever Mapa</title>
<script type='text/javascript'>
function mostrar(cosa, estado) {
document.images[cosa].style.visibility = (estado) ? 'visible':'hidden';
}
var area1 = 'area1';
var area2 = 'area2';
var area3 = 'area3';
</script>
</head><body>
<div id='contenedor_de_imagenes' style='position: relative;' >
<img alt='mapa21.gif' src='imagenid.php?id=1461' style='position: relative; margin: 0; top: 0; left: 0;' />
<img name='area1' src='gifshape.php?ancho=660&alto=530&shape=rect&bo rde=000000&relleno=CCFF33&coors=183,11,72,119' alt='' style='position: absolute; top: 0; left: 0; margin: 0; visibility: hidden;' />
<img name='area2' src='gifshape.php?ancho=660&alto=530&shape=rect&bo rde=000000&relleno=CCFF33&coors=179,198,258,322' alt='' style='position: absolute; top: 0; left: 0; margin: 0; visibility: hidden;' />
<img name='area3' src='gifshape.php?ancho=660&alto=530&shape=rect&bo rde=000000&relleno=CCFF33&coors=1,438,168,522' alt='' style='position: absolute; top: 0; left: 0; margin: 0; visibility: hidden;' />
<img src='transpa.php?ancho=660&alto=530' usemap='#mapa' style='position: absolute; margin: 0; top: 0; left: 0;' />
</div>
<map name='mapa' >
<area name='area1' shape='rect' coords='72,11,183,119' alt='' target='' title='' onmouseover='mostrar("area1", true)' onmouseout='mostrar("area1", false)' href='#' >
<area name='area2' shape='rect' coords='179,198,258,322' alt='' target='' title='' onmouseover='mostrar("area2", true)' onmouseout='mostrar("area2", false)' href='#' >
<area name='area3' shape='rect' coords='1,438,168,522' alt='' target='' title='' onmouseover='mostrar("area3", true)' onmouseout='mostrar("area3", false)' href='#' >
</map>
</body></html>

Como tendría que poner para que me cargara una imagen que se llama mapa21.gif, y como tendría que llamar a las partes que se generan en php.

Donde pone al principio: src='imagenid.php?id=1461', que tendría que poner? y donde pone src='gifshape.php?ancho=660&alto=530&shape=rect&bo rde=000000&relleno=CCFF33&coors=183,11,72,119' en las diferentes areas, que tendría que poner?

El código en php tendría yo que ponerlo en mi página o no?

Saludos

senit · #8 (**permalink**) 03/12/2008, 06:22

A ver, yo en este código que me ha generado la página:

<html><head><title>Prever Mapa</title>
<script type='text/javascript'>
function mostrar(cosa, estado) {
document.images[cosa].style.visibility = (estado) ? 'visible':'hidden';
}
var area1 = 'area1';
var area2 = 'area2';
var area3 = 'area3';
</script>
</head><body>
<div id='contenedor_de_imagenes' style='position: relative;' >
<img alt='mapa21.gif' src='imagenid.php?id=1461' style='position: relative; margin: 0; top: 0; left: 0;' />
<img name='area1' src='gifshape.php?ancho=660&alto=530&shape=rect&bo rde=000000&relleno=CCFF33&coors=183,11,72,119' alt='' style='position: absolute; top: 0; left: 0; margin: 0; visibility: hidden;' />
<img name='area2' src='gifshape.php?ancho=660&alto=530&shape=rect&bo rde=000000&relleno=CCFF33&coors=179,198,258,322' alt='' style='position: absolute; top: 0; left: 0; margin: 0; visibility: hidden;' />
<img name='area3' src='gifshape.php?ancho=660&alto=530&shape=rect&bo rde=000000&relleno=CCFF33&coors=1,438,168,522' alt='' style='position: absolute; top: 0; left: 0; margin: 0; visibility: hidden;' />
<img src='transpa.php?ancho=660&alto=530' usemap='#mapa' style='position: absolute; margin: 0; top: 0; left: 0;' />
</div>
<map name='mapa' >
<area name='area1' shape='rect' coords='72,11,183,119' alt='' target='' title='' onmouseover='mostrar("area1", true)' onmouseout='mostrar("area1", false)' href='#' >
<area name='area2' shape='rect' coords='179,198,258,322' alt='' target='' title='' onmouseover='mostrar("area2", true)' onmouseout='mostrar("area2", false)' href='#' >
<area name='area3' shape='rect' coords='1,438,168,522' alt='' target='' title='' onmouseover='mostrar("area3", true)' onmouseout='mostrar("area3", false)' href='#' >
</map>
</body></html>

Como tendría que poner para que me cargara una imagen que se llama mapa21.gif, y como tendría que llamar a las partes que se generan en php.

Donde pone al principio: src='imagenid.php?id=1461', que tendría que poner? y donde pone src='gifshape.php?ancho=660&alto=530&shape=rect&bo rde=000000&relleno=CCFF33&coors=183,11,72,119' en las diferentes areas, que tendría que poner?

El código en php tendría yo que ponerlo en mi página o no?

Saludos

caricatos · #9 (**permalink**) 03/12/2008, 09:03

Hola:

Ahora el servidor debe estar con problemas, pero es evidente que se trata de rutas relativas, así que hay que poner antes la dirección absoluta de la carpeta de la página: http://www.caricatos.net/mapas/... y ya teniendo la imágen es mejor que la copies en una carpeta tuya.

Saludos

senit · #10 (**permalink**) 02/06/2009, 10:37

Estoy haciendo una web en la que quiero poner un mapa de españa con sus provincias, y quiero que cuando pase el ratón por encima de una provincia, esta cambie de color.

Alguien me puede ayudar?

Carxl · #11 (**permalink**) 02/06/2009, 10:54

Hola senit, cómo vas?

Php no te ayudaría con eso... Necesitarías de jaavascript, o quizás CSS.

Pregunta en el foro adecuado.

Saludos

GatorV · #12 (**permalink**) 02/06/2009, 11:28

Tema trasladado desde PHP

pakillo · #13 (**permalink**) 26/08/2009, 00:56

Cita:

Iniciado por caricatos

Hola:

Ahora el servidor debe estar con problemas, pero es evidente que se trata de rutas relativas, así que hay que poner antes la dirección absoluta de la carpeta de la página: http://www.caricatos.net/mapas/... y ya teniendo la imágen es mejor que la copies en una carpeta tuya.

Saludos

Muy bueno caricatos, solo una cosa es un poco dificil colocar bien los puntos por el puntero, hay que calcular mas o menos si esta sobre la linea :) lo probe con una imagen de unos 300 x 300 que es el tamaño que quiero utilizar.

Saludos