Mapear zonas en imágenes diferentes de la misma celda y posición

graccurris · #1 (**permalink**) 24/02/2010, 08:43

Hola,

Tengo una tabla con dos columnas. La columna de la izquierda tiene una imagen con varias zonas mapeadas que hacen cambiar tanto la imagen de la izquierda como la imagen de la derecha en función de la zona mapeada donde se haga click. Hasta aquí, todo correcto.

Ahora, me gustaría hacer que la imagen de la derecha también tuviese un mapeado, pero de manera que el mapeado de "contenidoDerecha1.png" fuese diferente del mapeado de "contenidoDerecha2.png" y así sucesivamente.

Con las imágenes de la columna izquierda no tengo ningún problema porque todas las imágenes tienen las mismas zonas mapeadas por igual, pero esto no debería ser así con las imágenes de la derecha.

¿Alguien me puede ayudar de alguna manera?

Gracias.

Código HTML:

 <td width="283" height="363"><img src="MenuIzquierda1.png" id="qaz" alt="" width="283" height="354" border="0" usemap="#Map4">
            <map name="Map4">
              <area shape="rect" coords="65,255,185,286" href="#" onClick="document.getElementById('qwe').src='contenidoDerecha1.png'; document.getElementById('qaz').src='MenuIzquierda2.png';">
              <area shape="rect" coords="67,196,181,229" href="#" onClick="document.getElementById('qwe').src='contenidoDerecha2.png'; document.getElementById('qaz').src='MenuIzquierda3.png';">
              <area shape="rect" coords="67,135,180,166" href="#" onClick="document.getElementById('qwe').src='contenidoDerecha3.png'; document.getElementById('qaz').src='MenuIzquierda4.png';">
              <area shape="rect" coords="68,73,244,105" href="#" onClick="document.getElementById('qwe').src='contenidoDerecha4.png'; document.getElementById('qaz').src='MenuIzquierda1.png';">
            </map>
            
            
          </td>
          <td width="585" height="363"><div align="left"><img src="contenidoDerecha4.png" width="385" height="363" border="0" Id="qwe"></div></td>

mayid · #2 (**permalink**) 25/02/2010, 19:15

No te conviene simplificar y poner solo una imagen de fondo para la tabla, sin mapear?

:)

graccurris · #3 (**permalink**) 26/02/2010, 11:21

Sí, pero la cuestión es que en la celda de la derecha aparecerán 4 imágenes diferentes según cada menú, y a su vez, cada una de estas 4 imágenes deberían tener enlaces a otros sitios... por eso me pregunto si existe una manera de hacerlo...

mayid · #4 (**permalink**) 26/02/2010, 14:13

Con javascript, no?

graccurris · #5 (**permalink**) 26/02/2010, 16:59

Precisamente ésa es mi pregunta: con javascript, ok, pero... ¿cómo?

caricatos · #6 (**permalink**) 27/02/2010, 16:50

Hola:

Tal vez, en vez de cambiar la imágen, te interese mostrar una capa distinta (ocultando la visible), y en cada capa distinta, una imagen distinta con su propio mapa...

Saludos

graccurris · #7 (**permalink**) 28/02/2010, 15:59

Pues creo que esto sería lo ideal!!!

¿Alguna ayuda de cómo comenzar?

Gracias!

graccurris · #8 (**permalink**) 02/03/2010, 08:57

Caricatos..... ¿me echas una mano con esto?...

Gracias!

caricatos · #9 (**permalink**) 02/03/2010, 12:54

Hola:

Pues la mitad del "onclick" da cada çarea (onclick con minúsculas), evidentemente está bien, y no es más que un cambio de imagen, pero la segunda parte puede ser algo así como mostrar(id)...

Entonces puedes tener varias imágenes, pero una tendrá el estilo display="block" (o por ser una imagen "inline", o si lo prefieres visibility="visible", y las demás display="none" (o visibility="hidden"), cada imagen con su propio usemap, y los correspondientes tags map con sus areas.

La parte script, más o menos...

// para ids "capa1", "capa2", "capa3"...

var capas = ["capa1", "capa2", "capa3"];
function mostrar(cual) {
for (i = 0; i < 3; i++)
document.getElementById(capas[i]).style.visibility = (capas[i] == cual) ? "visible":"hidden";
}

Trata de hacerlo y nos cuentas...

Saludos

graccurris · #10 (**permalink**) 03/03/2010, 08:06

Gracias!

¿Si no entiendo mal, para la parte del área sería esto?

Código HTML:

<map name="Map4">
              <area shape="rect" coords="65,255,185,286" href="#" onclick="document.getElementById('qwe').src='contenidoDerecha1.png'; mostrar(imagen1.png).visibility='visible';">
</map>

Si es correcto....... (que tengo mis serias dudas de haberte entendido bien del todo), ¿dónde y cómo se indica el map dentro de cada "area"?

La parte del javascript creo que la he entendido y que podré aplicarla. Entre esta tarde y mañana por la tarde, si me ayudas un momento con este paso que te pregunto, lo intentaré y si me sale lo compartiré aquí y te invitaré a una caña ;)

Gracias de nuevo.

caricatos · #11 (**permalink**) 04/03/2010, 01:31

Hola:

Con mostrar es suficiente (te sobra ".visibility='visible';")

Saludos

graccurris · #12 (**permalink**) 04/03/2010, 04:00

Pero justo antes me decías que si quiero que sea visible (que la primera, la de entrada sí lo será) debería ponerlo y quitarles la visibilidad a las demás... no?

Bueno, lo pruebo esta tarde y te cuento :)

Gracias!

caricatos · #13 (**permalink**) 04/03/2010, 04:54

Hola:

Me estaba refiriendo a esta parte:

onclick="document.getElementById('qwe').src='conte nidoDerecha1.png'; mostrar(imagen1.png).visibility='visible';"

Debería ser:

onclick="document.getElementById('qwe').src='conte nidoDerecha1.png'; mostrar('imagen1')"

Donde "imagen1" es el id de la imágen que quieres mostrar... y en el array que sean también de sus id's.

Saludos

graccurris · #14 (**permalink**) 04/03/2010, 14:13

Pues...... no me sale :(:(:(

Te cuento lo que entiendo, y cómo lo hago:

El script entre las etiquetas de <head>, tal que así:

Código HTML:

<script>
var capas = ["capa1", "capa2", "capa3"];
function mostrar(cual) {
for (i = 0; i < 3; i++)
document.getElementById(capas[i]).style.visibility = (capas[i] == cual) ? "visible":"hidden";
}
</script>

La parte conflictiva... esto es lo que hago y no acabo de entender:

id="izquierda" > es la columna de la izquierda, una imagen con 4 menús, cada uno mapeado uno encima del otro.
id="derecha" > es la columna de la derecha.

Al hacer click en cada mapeado de la izquierda, debe cambiar tanto la imagen de la izquierda como la imagen de la derecha.

* De momento no incluyo el mapeado de la imagen de la derecha para no liarme más...

Código HTML:

<tr>
          <td width="283" height="363"><img src="img/MenuIzquierda1.png" id="izquierda" style="visibility:visible" width="283" height="354" border="0" usemap="#Map4">
          <img src="img/MenuIzquierda2.png" id="izquierda" style="visibility:hidden" width="283" height="354" border="0" usemap="#Map4">
          <img src="img/MenuIzquierda3.png" id="izquierda" style="visibility:hidden" width="283" height="354" border="0" usemap="#Map4">
          <img src="img/MenuIzquierda4.png" id="izquierda" style="visibility:hidden" width="283" height="354" border="0" usemap="#Map4">

            <map name="Map4">
              <area shape="rect" coords="68,73,244,105" href="#" onclick="document.getElementById('derecha').src='img/ImagenDerecha1a.png'; mostrar('izquierda');">
              <area shape="rect" coords="65,255,185,286" href="#" onclick="document.getElementById('derecha').src='img/ImagenDerecha2.png'; mostrar('izquierda');">
              <area shape="rect" coords="67,196,181,229" href="#" onclick="document.getElementById('derecha').src='img/ImagenDerecha3.png'; mostrar('izquierda');">
              <area shape="rect" coords="67,135,180,166" href="#" onclick="document.getElementById('derecha').src='img/ImagenDerecha4.png'; mostrar('izquierda');">
            </map>
            
            
          </td>
          <td width="585" height="363"><div align="left"><img src="img/ImagenDerecha1a.png" id="derecha" style="visibility:visible" width="385" height="363" border="0"></div></td>
        </tr>

Aquí estoy perdidísimo y a pesar de creer que con la teoría te había entendido, no es así.

Al duplicar los img de la primera parte, sólo consigo aumentar las celdas y la página se va alargando... y no funciona bien, lógico. Más que nada, porque entiendo que en algún sitio debo decirle cuáles son las imágenes que deben estar ocultas y que se mostrarán en algún momento al hacer los clicks...

Quizás se pueda hacer de alguna otra manera, más sencilla, más cómoda, más eficiente... porque yo creo que ya no doy para más...

Adjunto una imagen de lo que quiero hacer, para ver si me echas una mano (otra)...

Gracias.

caricatos · #15 (**permalink**) 04/03/2010, 23:26

Hola:

El problema está en que el parámetro de mostrar tiene que ser el id de la imagen, y ahora solo pones el id de la capa contenedora... es cierto que las imágenes ensanchan la capa, pero eso tiene fácil solución usando estilos, por ejemplo con position:absolute... o en vez visibility, alternar la visibilidad con display...

Código:

            <map name="Map4">
              <area shape="rect" coords="68,73,244,105" href="#" onclick="document.getElementById('derecha').src='img/ImagenDerecha1a.png'; mostrar('capa1');">
              <area shape="rect" coords="65,255,185,286" href="#" onclick="document.getElementById('derecha').src='img/ImagenDerecha2.png'; mostrar('capa2');">
              <area shape="rect" coords="67,196,181,229" href="#" onclick="document.getElementById('derecha').src='img/ImagenDerecha3.png'; mostrar('capa3');">
              <area shape="rect" coords="67,135,180,166" href="#" onclick="document.getElementById('derecha').src='img/ImagenDerecha4.png'; mostrar('capa4');">
            </map>

...y

Código:

<td width="585" height="363"><div align="left">

<img src="img/ImagenDerecha1a.png" id="capa1" style="visibility:visible" width="385" height="363" border="0">

<img src="img/ImagenDerecha2a.png" id="capa2" style="visibility:visible" width="385" height="363" border="0">

<img src="img/ImagenDerecha3a.png" id="capa3" style="visibility:visible" width="385" height="363" border="0">

<img src="img/ImagenDerecha4a.png" id="capa4" style="visibility:visible" width="385" height="363" border="0">

</div></td>

Si no sólo va una imagen, simplemente ponlas en capas con los id's que quieras mostrar, con el resto de contyenidos de cada capa.

Saludos

graccurris · #16 (**permalink**) 15/03/2010, 06:15

Por fin lo he entendido.

Muchas gracias por tu ayuda, de verdad.