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.