Foros del Web » Creando para Internet » HTML »

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

Estas en el tema de Mapear zonas en imágenes diferentes de la misma celda y posición en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 24/02/2010, 08:43
 
Fecha de Ingreso: noviembre-2008
Mensajes: 48
Antigüedad: 9 años, 1 mes
Puntos: 1
Mapear zonas en imágenes diferentes de la misma celda y posición

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> 
  #2 (permalink)  
Antiguo 25/02/2010, 19:15
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Mapear zonas en imágenes diferentes de la misma celda y posición

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

:)
  #3 (permalink)  
Antiguo 26/02/2010, 11:21
 
Fecha de Ingreso: noviembre-2008
Mensajes: 48
Antigüedad: 9 años, 1 mes
Puntos: 1
Respuesta: Mapear zonas en imágenes diferentes de la misma celda y posición

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...
  #4 (permalink)  
Antiguo 26/02/2010, 14:13
Avatar de mayid
Colaborador
 
Fecha de Ingreso: marzo-2009
Ubicación: BsAs
Mensajes: 4.014
Antigüedad: 8 años, 8 meses
Puntos: 101
Respuesta: Mapear zonas en imágenes diferentes de la misma celda y posición

Con javascript, no?
  #5 (permalink)  
Antiguo 26/02/2010, 16:59
 
Fecha de Ingreso: noviembre-2008
Mensajes: 48
Antigüedad: 9 años, 1 mes
Puntos: 1
Respuesta: Mapear zonas en imágenes diferentes de la misma celda y posición

Precisamente ésa es mi pregunta: con javascript, ok, pero... ¿cómo?
  #6 (permalink)  
Antiguo 27/02/2010, 16:50
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Mapear zonas en imágenes diferentes de la misma celda y posición

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #7 (permalink)  
Antiguo 28/02/2010, 15:59
 
Fecha de Ingreso: noviembre-2008
Mensajes: 48
Antigüedad: 9 años, 1 mes
Puntos: 1
Respuesta: Mapear zonas en imágenes diferentes de la misma celda y posición

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

¿Alguna ayuda de cómo comenzar?

Gracias!
  #8 (permalink)  
Antiguo 02/03/2010, 08:57
 
Fecha de Ingreso: noviembre-2008
Mensajes: 48
Antigüedad: 9 años, 1 mes
Puntos: 1
Respuesta: Mapear zonas en imágenes diferentes de la misma celda y posición

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

Gracias!
  #9 (permalink)  
Antiguo 02/03/2010, 12:54
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Mapear zonas en imágenes diferentes de la misma celda y posición

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #10 (permalink)  
Antiguo 03/03/2010, 08:06
 
Fecha de Ingreso: noviembre-2008
Mensajes: 48
Antigüedad: 9 años, 1 mes
Puntos: 1
Respuesta: Mapear zonas en imágenes diferentes de la misma celda y posición

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.
  #11 (permalink)  
Antiguo 04/03/2010, 01:31
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Mapear zonas en imágenes diferentes de la misma celda y posición

Hola:

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

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #12 (permalink)  
Antiguo 04/03/2010, 04:00
 
Fecha de Ingreso: noviembre-2008
Mensajes: 48
Antigüedad: 9 años, 1 mes
Puntos: 1
Respuesta: Mapear zonas en imágenes diferentes de la misma celda y posición

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!
  #13 (permalink)  
Antiguo 04/03/2010, 04:54
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Mapear zonas en imágenes diferentes de la misma celda y posición

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
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #14 (permalink)  
Antiguo 04/03/2010, 14:13
 
Fecha de Ingreso: noviembre-2008
Mensajes: 48
Antigüedad: 9 años, 1 mes
Puntos: 1
Respuesta: Mapear zonas en imágenes diferentes de la misma celda y posición

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.
  #15 (permalink)  
Antiguo 04/03/2010, 23:26
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.544
Antigüedad: 15 años, 8 meses
Puntos: 1262
Respuesta: Mapear zonas en imágenes diferentes de la misma celda y posición

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

Última edición por caricatos; 04/03/2010 a las 23:28 Razón: un añadido
  #16 (permalink)  
Antiguo 15/03/2010, 07:15
 
Fecha de Ingreso: noviembre-2008
Mensajes: 48
Antigüedad: 9 años, 1 mes
Puntos: 1
Respuesta: Mapear zonas en imágenes diferentes de la misma celda y posición

Por fin lo he entendido.

Muchas gracias por tu ayuda, de verdad.

Etiquetas: celda, diferentes, 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 20:34.