Problema mapa de españa HTML

[jmoraleda_88]

Hola a todos, tengo un problema y a ver si podeis ayudarme que no se que me pasa:

he creado un mapa interactivo que al pasar el raton por encima la provincia cambia de color. Lo he hecho cogiendo codigo de este foro, con lo cual, si alguien necesita el codigo HTML para entender todo mejor, se lo mando, pero no lo he puesto aqui porue era super largo.

bueno la cuestion es que el mapa funciona bien, lo edito en dreamwiver, etc etc, y hace todo correcto.

mi problema es : en joomla, creo un articulo, subo la carpeta de imagenes y todo eso, para que me las detecte etc etc, pero lo que me pasa es que se ve el mapa de españa, y las provincias en rojo ( que se supone que ere roller solo se ve si paso el raton por encima ) pues se me ven a continuacion del mapa, y no es interactivo.
es un mapa y todas las provincias a continuacion.

pero eso no me pasa en Dreamwiver, y el codigo HTML que copio , es el mismo... a ver si me podeis hechar una mano.

gracias!

[caricatos]

Hola:

Dices que has conseguido el mapa de estos foros... pero no vemos ni la refrencia ni tu código... usas map o svg, o tal vez canvas o flash...

Saludos

[jmoraleda_88]

Hola Pepe !!

ayer intenté estribirte en tu pagina, en la de http://www.pepemolina.com/index.php?titulo=javascript:+rollover+en+mapas , pero no podia mandar los comentarios. ( ponia el codigo de seguridad pero no funcionaba )

El que tengo es con el mapa que tu ayudaste a otro compañero, este : http://www.caricatos.net/mapas/ejemplos/spain.php , que es un trabajo magnifico por cierto.

entonces, yo segui los pasos que le explicaste a el. Lo guardé, me generó un index y una carpeta con las fotos , y 2 archivos mas en .js (otros y op ) . abri el indiex con con el dreamweaver, y por asi decierlo, en todas rutas , que ponía ./vista_previa/archivo.png , las cambie y puse mi ruta, k seria en ese caso : userimages/vistaprevia/archivo.png . Entonces el problema es el que te he comentado.

en dreamweaver funciona perfectamente, pero cuando creo un articulo en joomla, ( pongo la carpera de las imagenes el la ruta adecuada, ya que me las reconoce ) me pasa lo que expliqué. me carga la imagen del mapa, y las diferentes provincias a continuacion, sin la posibilidad de hacerlo interactivo, ya que no las " super pone " por asi decirlo, encima de las otras.

si lo necesitas te mando capturas de pantalla , o todo lo que veas oportuno. un saludo !! y muchas gracias :)

[caricatos]

Hola:

He visto que intentaste poner un comentario, pero para hacerlo, por seguridad, en vez de poner el captcha, hay que poner la palabra resaltada en rojo. Pero eso es otro asunto.

Sobre las imágenes superpuestas, lo que puede fallarte es que deben tener posicionamiento absoluto dentro de una capa contenedora (cuestión de estilos).

Puedes mostrar el código (con un área y su imagen debería bastar).

De todos modos, hay otro apunte sobre imágenes svg, y también con el mapa de España que tal vez te convenga.

Saludos

[jmoraleda_88]

hola Pepe,
aqui te muestro lo que pides :

Esto es lo de los estilos :
-------------------------------------
<style type="text/css">
* {
margin: 0;
paddin: 0;
}

h1 {
background: #eeeeee url(../dibujos/emoticon.gif) no-repeat 2% 50%; // esto //no lo tengo localizado y no se si influye.
text-align: center
}

#contenedor {
position: relative;
margin: auto;
width: 627px;
height: 573px;
background-image: url(../dibujos/_grid.gif);
}

.efecto {
position: absolute;
top: 0px;
left: 3px;
}

.oculto {
visibility: hidden;
}
</style>
<script type="text/javascript">
function tag(id) {return document.getElementById(id);}
function mostrar(que) {tag(que).style.visibility = "visible";}
function ocultar(que) {tag(que).style.visibility = "hidden";}

esto son las areas
---------------------------

<img src="./Vista previa_files/pngshape_002.png" alt="transparente" usemap="#mapa" class="efecto">
</div>
<map id="mapa" name="mapa">

<area shape="poly" coords="222,429,223,430,224,430,225,431,230,431,23 1,430,232,430,234,428,237,428,238,429,239,429,240, 430,239,431,239,432,238,433,238,434,239,435,239,43 9,238,440,238,441,239,442,239,443,242,446,244,446, 245,447,247,447,248,448,251,448,252,449,253,449,25 4,450,255,450,256,451,257,451,258,452,260,452,263, 455,264,455,266,457,248,457,247,458,240,458,239,45 9,235,459,234,460,232,460,231,461,229,461,216,474, 215,474,214,475,209,475,208,474,201,474,200,475,19 9,475,197,477,196,477,190,483,189,483,187,485,186, 484,186,483,185,482,185,481,180,476,180,475,178,47 3,178,472,183,467,183,465,184,464,184,459,185,458, 185,456,187,454,188,455,190,455,191,456,193,456,19 6,453,196,452,197,451,197,450,198,449,198,447,199, 446,199,444,205,438,205,437,209,433,213,433,214,43 2,215,432,216,431,217,431,218,430,219,430,220,429" href="javascript:%20void(0)" onMouseOver="mostrar('rollover_0')" onMouseOut="ocultar('rollover_0')">


<area shape="poly" coords="161,450,162,450,163,449,165,449,166,448,16 8,448,169,449,174,449,175,448,177,448,178,447,179, 447,180,446,183,446,185,448,192,448,193,447,192,44 8,192,449,191,450,189,450,188,449,184,449,180,453, 180,456,179,457,179,461,178,462,178,464,173,469,17 3,472,172,473,172,474,174,476,174,477,177,480,177, 481,180,484,180,485,181,486,181,487,182,488,182,48 9,181,490,181,491,180,492,178,492,177,493,176,493, 175,494,175,495,174,496,174,497,173,498,173,499,17 2,500,172,501,171,502,171,503,170,504,168,504,166, 502,165,502,162,499,161,499,160,498,159,498,158,49 7,157,497,156,496,155,496,153,494,152,494,151,493, 150,493,149,492,146,492,144,494,144,493,143,492,14 3,491,140,488,140,487,137,484,137,483,136,482,136, 480,139,477,139,476,140,475,140,474,137,471,137,47 0,136,469,135,469,131,465,130,465,127,462,126,462, 126,461,125,460,125,458,126,457,126,456,128,454,12 8,453,129,453,131,451,132,451,133,450,136,450,143, 457,145,457,146,456,148,456,149,455,151,455,152,45 4,153,454,154,453,155,453,156,452,158,452,159,451, 160,451" href="javascript:%20void(0)" onMouseOver="mostrar('rollover_1')" onMouseOut="ocultar('rollover_1')">



a ver si así puedes decirme que tengo que cambiar, porque no doy con la clave. 1 saludo! y gracias por todos tus aportes Pepe

[caricatos]

Hola:

Las áreas parece que están bien... te comento la teoría:

el mapa se aplica a una imagen totalmente transparente, pero detrás y en la misma posición (x, y) se encuentra visible una imagen sin color (o el color de fondo que prefieras), y encima se colocan con las mismas coordenadas (x=0, y=0) el resto de imágenes de las provincias. Es fundamental que todas se superpongan...

Muéstranos algunas de las imágenes (si tienes un enlace provisionalm mejor.

Saludos

[jmoraleda_88]

pepe, le he dado a problema solucionado sin querer, pero no lo está. Estoy preparandote las imagenes. Un saludo

[jmoraleda_88]

Hola Pepe, aqui te traigo las capturas :

te recuerdo lo que me pasa y todo lo que hago, por si cometo algun error:

descargué tu mapa que se llamaba " vista previa " eso me generó un index llamado vistaprevia y una carpeta con las fotos. Despues de eso, yo modifiqué el HTML, del index, unicamente en la parte de la ruta, y subí la carpeta de "vistaprevia_imageneS " a mi servidor, para que cuando hiciera referencia a ellas, me las detectara. subo todo menos ese index de vista previa.

a continuacion, creo un nuevo artículo en joomla, le doy a la pestañita de HTML, y copio y pego el codigo del index, ( que funciona e interactua,) es el tuyo, solo que al cambiarle la ruta, ya no me va, porque no encuentra las fotos. Bien, pues al copiarlo y pegarlo en joomla, me pasa lo siguiente :

http://imageshack.us/f/201/sinttuloaky.png/

estos son los archivos que genera la carpeta : vista_previa_archivos.

http://imageshack.us/f/547/archivos.png/

si necesitas cualquier otro dato mas, solo indicamelo. Y a ver si podemos resolverlo que esque no se por donde metele mano....

1 saludo !

[caricatos]

Hola:

Parece que falla la estructura... se vé que las imágenes existen, pero no están bien los estilos. Asegúrate que las imágenes están dentro de la capa id="contenedor" y las provincias tienen la clase class="efecto oculto". y la última de las imágenes sea totalmente transparente, abarque toda la capa "contenedor" y este asociado el map (usemap)

Alguna de esas cosillas no la tienes bien... échale un vistazo.

Saludos

[jmoraleda_88]

Hola Pepe,

sigo buscando y dandole vueltas pero no encuentro el error. he mirado mi código y todas las provincias tienen la case oculto como tu dices. lo que pasa que dentro del mapa, no se donde se especifica que la ultima imagen sea trnasparente y abarque toda la capa contenedor estando asociada al map. pero si lo previsualizo en dreamweaver, ese mismo codigo hace su funcion. Es al copiar y pegar en joompla, cuando no la hace.

es muy raro, porque ne dreamweaver el html funciona, y en ar artículo pasa lo de las fotos. te dejo de todos modos el trozo de código involucrado a ver si tu logras verlo, pero es que yo no le veo fallo... esta bien. Solo que no se porque en Dw funciona y en joomla no :S


<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">


<title>
Vista previa
</title>
<style type="text/css">
* {
margin: 0;
paddin: 0;
}

h1 {
background: #eeeeee url(../dibujos/emoticon.gif) no-repeat 2% 50%;
text-align: center
}

#contenedor {
position: relative;
margin: auto;
width: 627px;
height: 573px;
background-image: url(../dibujos/_grid.gif);
}

.efecto {
position: absolute;
top: 0;
left: 0;
}

.oculto {
visibility: hidden;
}
</style>
<script type="text/javascript">
function tag(id) {return document.getElementById(id);}
function mostrar(que) {tag(que).style.visibility = "visible";}
function ocultar(que) {tag(que).style.visibility = "hidden";}

</script>
<script type="text/javascript" src="userimages/Vista previa_files/op.js"></script><script type="text/javascript" src="userimages/Vista previa_files/otros.js"></script><script type="text/javascript" src="userimages/Vista previa_files/ads.js"></script></head><body>
<h1>
Vista previa
</h1>
<div id="contenedor">
<img src="userimages/Vista previa_files/imagen.png" alt="iamgen" class="efecto">

<img id="rollover_0" src="userimages/Vista previa_files/pngshape_036.png" class="efecto oculto" alt="figura">
<img id="rollover_1" src="userimages/Vista previa_files/pngshape_029.png" class="efecto oculto" alt="figura">
<img id="rollover_2" src="userimages/Vista previa_files/pngshape_009.png" class="efecto oculto" alt="figura">

<img id="rollover_3" src="userimages/Vista previa_files/pngshape_032.png" class="efecto oculto" alt="figura" style="visibility: visible;">

<img id="rollover_4" src="userimages/Vista previa_files/pngshape_046.png" class="efecto oculto" alt="figura">
<img id="rollover_5" src="userimages/Vista previa_files/pngshape_038.png" class="efecto oculto" alt="figura">
<img id="rollover_6" src="userimages/Vista previa_files/pngshape_003.png" class="efecto oculto" alt="figura">
<img id="rollover_7" src="userimages/Vista previa_files/pngshape_024.png" class="efecto oculto" alt="figura">

<img style="visibility: hidden;" id="rollover_8" src="userimages/Vista previa_files/pngshape_007.png" class="efecto oculto" alt="figura">

<img id="rollover_9" src="userimages/Vista previa_files/pngshape_050.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_10" src="userimages/Vista previa_files/pngshape_048.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_11" src="userimages/Vista previa_files/pngshape_021.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_12" src="userimages/Vista previa_files/pngshape_014.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_13" src="userimages/Vista previa_files/pngshape_033.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_14" src="userimages/Vista previa_files/pngshape_051.png" class="efecto oculto" alt="figura">

<img id="rollover_15" src="userimages/Vista previa_files/pngshape_026.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_16" src="userimages/Vista previa_files/pngshape_019.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_17" src="userimages/Vista previa_files/pngshape_006.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_18" src="userimages/Vista previa_files/pngshape_020.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_19" src="userimages/Vista previa_files/pngshape_008.png" class="efecto oculto" alt="figura">
<img id="rollover_20" src="userimages/Vista previa_files/pngshape_035.png" class="efecto oculto" alt="figura" style="visibility: hidden;">

<img id="rollover_21" src="userimages/Vista previa_files/pngshape_028.png" class="efecto oculto" alt="figura">

<img style="visibility: hidden;" id="rollover_22" src="userimages/Vista previa_files/pngshape.png" class="efecto oculto" alt="figura">

<img style="visibility: hidden;" id="rollover_23" src="userimages/Vista previa_files/pngshape_034.png" class="efecto oculto" alt="figura">
<img id="rollover_24" src="userimages/Vista previa_files/pngshape_037.png" class="efecto oculto" alt="figura" style="visibility: hidden;">
<img style="visibility: hidden;" id="rollover_25" src="userimages/Vista previa_files/pngshape_017.png" class="efecto oculto" alt="figura">
<img id="rollover_26" src="userimages/Vista previa_files/pngshape_022.png" class="efecto oculto" alt="figura" style="visibility: hidden;">
<img id="rollover_27" src="userimages/Vista previa_files/pngshape_010.png" class="efecto oculto" alt="figura" style="visibility: hidden;">
<img id="rollover_28" src="userimages/Vista previa_files/pngshape_030.png" class="efecto oculto" alt="figura" style="visibility: hidden;">
<img style="visibility: hidden;" id="rollover_29" src="userimages/Vista previa_files/pngshape_044.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_30" src="userimages/Vista previa_files/pngshape_052.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_31" src="userimages/Vista previa_files/pngshape_025.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_32" src="userimages/Vista previa_files/pngshape_011.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_33" src="userimages/Vista previa_files/pngshape_031.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_34" src="userimages/Vista previa_files/pngshape_045.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_35" src="userimages/Vista previa_files/pngshape_042.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_36" src="userimages/Vista previa_files/pngshape_013.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_37" src="userimages/Vista previa_files/pngshape_004.png" class="efecto oculto" alt="figura">

<img id="rollover_38" src="userimages/Vista previa_files/pngshape_018.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_39" src="userimages/Vista previa_files/pngshape_041.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_40" src="userimages/Vista previa_files/pngshape_043.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_41" src="userimages/Vista previa_files/pngshape_049.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_42" src="userimages/Vista previa_files/pngshape_012.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_43" src="userimages/Vista previa_files/pngshape_047.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_44" src="userimages/Vista previa_files/pngshape_040.png" class="efecto oculto" alt="figura">
<img style="visibility: hidden;" id="rollover_45" src="userimages/Vista previa_files/pngshape_023.png" class="efecto oculto" alt="figura">
<img id="rollover_46" src="userimages/Vista previa_files/pngshape_039.png" class="efecto oculto" alt="figura" style="visibility: hidden;">
<img style="visibility: hidden;" id="rollover_47" src="userimages/Vista previa_files/pngshape_016.png" class="efecto oculto" alt="figura">
<img id="rollover_48" src="userimages/Vista previa_files/pngshape_027.png" class="efecto oculto" alt="figura">

<img style="visibility: hidden;" id="rollover_49" src="userimages/Vista previa_files/pngshape_015.png" class="efecto oculto" alt="figura">

<img id="rollover_50" src="userimages/Vista previa_files/pngshape_005.png" class="efecto oculto" alt="figura">
<img id="rollover_51" src="userimages/Vista previa_files/pngshape_002.png" class="efecto oculto" alt="figura">


<img src="userimages/Vista previa_files/transpa.gif" alt="transparente" usemap="#mapa" class="efecto">
</div>
<map id="mapa" name="mapa">
<area shape="poly" coords="222,429,223,430,224,430,225,431,230,431,23 1,430,232,430,234,428,237,428,238,429,239,429,240, 430,239,431,239,432,238,433,238,434,239,435,239,43 9,238,440,238,441,239,442,239,443," href="javascript:%20void(0)" onMouseOver="mostrar('rollover_0')" onMouseOut="ocultar('rollover_0')">
....
....
....
..... ( asi todas las areas / provincias )
</map>
<img src="userimages/Vista previa_files/inkanime9.png" style="display: none;"></body></html>

Un saludo, y gracias pro toda tu ayuda Pepe