Estimados foreros,
La duda es la siguiente: supongamos un body 800x600 que contiene un div tb de 800x600 con una imagen de 800x600, la cual incluye un solo boton (por ej. un círculo) en el centro de la imagen ¿se puede conseguir que al pasar el ratón (onmouseover) por el botón, aparezca una nueva imagen (distinta de la inicial pero conteniendo tb el botón) de 800x600 y que al hacer mouseout recuperemos la inicial?
He probado algo como esto pero no funciona, pues como es lógico las imagenes intro2 e intro3, al estar dentro del div caja2 no se superponen exactamente sobre intro1.
¿alguna idea?
<div id="contenedor">
<img src="imagenes/intro1.jpg">
<div id="caja2">
<img src="imagenes/boton.jpg" onMouseOver="this.src='imagenes/intro2.jpg'" onMouseOut="this.src='imagenes/intro3.jpg'" border="0" style="cursor:pointer">
</div>
</div>
Aclaraciones al código:
- contenedor es el div de 800x600
- intro1 es la imagen con el recorte del botón
- div caja2 contiene la imagen del boton
- intro2 es la nueva imagen conteniendo asimismo el botón
- intro3 es la imagen inicial completa, sin el recorte del botón
Espero haberme explicado.
Saludos y gracias.