Hola amigos,
Tengo una página con una sola imagen (uno.jpg) en un div y superpuesto sobre ella un botón en otro div. Al situarnos sobre el botón cambia la imagen (dos.jpg) así como el botón (efecto onmouseover) y al retirarnos vuelve a la situación incial. Los cambios de imagen los he hecho con funciones javascript modificando los backgroundimage de los div combinados con onmouseover y onmouseout. El caso es que
funciona perfectamente en firefox, opera, chrome y safari, pero (qué extraño!!
) en explorer hace un efecto visual desagradable al hacer over/out por el botón, es decir, como un pequeño retardo al cambiar las imágenes.
Y creo que no es un problema de precarga de imágenes, pues la hago antes de comenzar el código.
A ver si alguien sabe como arreglarlo.
Muchas gracias por adelantado.
Pongo el código para facilitar:
Código html:
<body>
<div id="caja1">
<div id="caja2" onmouseover="javascript
:cambio()" onmouseout="javascript
:inicio()" style="cursor:pointer"></div>
</div>
</body>
Css:
#caja1{
position:absolute;
width:1280px;
height:1024px;
background-image:url(../imagenes/uno.jpg);
background-repeat:no-repeat;
}
#caja2{
position:relative;
width:131px;
height:32px;
float:right;
top:412px;
right:308px;
background-image:url(../imagenes/boton1.jpg);
background-repeat:no-repeat
}
Código javascript:
function cambio(){
document.getElementById('caja1').style.backgroundI mage='url(imagenes/dos.jpg)';
document.getElementById('caja2').style.backgroundI mage='url(imagenes/boton2.jpg)';
}
function inicio(){
document.getElementById('contenedor1').style.backg roundImage='url(imagenes/uno.jpg)';
document.getElementById('caja2').style.backgroundI mage='url(imagenes/boton1.jpg)';
}