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>