problemas cambio backgroundimage de div en explorer

#1 (**permalink**) 31/12/2010, 11:39

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)';
}

maycolalvarez · #2 (**permalink**) 31/12/2010, 13:06

porque no utilizas la pseudo clase :hover en CSS, es mucho más simple y te ahorras el js

#3 (**permalink**) 31/12/2010, 13:13

gracias por tu respuesta, pero no lo veo. Con el hover podré cambiar el estado del botón, pero como consigo que al mismo tiempo cambie la imagen uno por la dos?

maycolalvarez · #4 (**permalink**) 31/12/2010, 13:24

Cita:

Iniciado por prozaius

gracias por tu respuesta, pero no lo veo. Con el hover podré cambiar el estado del botón, pero como consigo que al mismo tiempo cambie la imagen uno por la dos?

con :hover se puede hacer todo eso, incluso cambiar el background completo de cualquier elemento, investiga un poco más y te darás cuanta de sus beneficios

#5 (**permalink**) 31/12/2010, 13:52

Cita:

Iniciado por maycolalvarez

con :hover se puede hacer todo eso, incluso cambiar el background completo de cualquier elemento, investiga un poco más y te darás cuanta de sus beneficios

Perdona mi ignorancia, pero lo que me estás diciendo es que al aplicar el :hover sobre el boton (div caja2) para que su background cambie, al mismo tiempo va a cambiar el background del div caja1. Ni idea de cómo se hace. No obstante investigaré. Gracias

#6 (**permalink**) 31/12/2010, 23:52

Cita:

Iniciado por prozaius

Perdona mi ignorancia, pero lo que me estás diciendo es que al aplicar el :hover sobre el boton (div caja2) para que su background cambie, al mismo tiempo va a cambiar el background del div caja1. Ni idea de cómo se hace. No obstante investigaré. Gracias

De todas formas, hacerlo con :hover me asegura que se arregla el problema con el explorer? porque tal como está funciona en todos los navegadores excepto en explorer. También y por aprender agradecería que si alguien lo sabe me explique el porque.

#7 (**permalink**) 01/01/2011, 06:20

Continuando con el tema y después de haber investigado el tema del :hover, sigo sin hallar la solución, pues por lo que he averiguado un div hijo no puede cambiar una propiedad de un div padre. A modo de ejemplo pongo un texto de otro foro:

Lo que no se puede hacer es seleccionar un ascendiente (ej. un padre). Por lo tanto el siquiente ejemplo ni funciona ni debe hacerlo:

<meta http-equiv='Content-Type' content='text/html; charset=UTF-8'>
<style type='text/css'>

em:hover #div { color: red; }

</style>

<h1>Este ejemplo ni funciona ni debe hacerlo.</h1>

<div id='div'>
<em>Este em</em>
no puede cambiar las propiedades de su padre.
</div>

No obstante he probado lo siguiente a ver si funcionaba: he quitado todo el javascript y he dejado el código como sigue:

Código html:

<body>
<div id="caja1">
<div id="caja2"></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
}
#caja2:hover{
position:relative;
width:131px;
height:32px;
float:right;
top:412px;
right:308px;
background-image:url(../imagenes/boton2.jpg);
background-repeat:no-repeat

}
#caja2:hover #caja1 {
background-image:url(../imagenes/dos.jpg);
background-repeat:no-repeat
}

Y efectivamente no funciona, al pasar sobre el botón cambia su estado según el :hover pero el background de caja1 se mantiene igual, no cambia a la imagen dos.

AYUDA!!!

#8 (**permalink**) 02/01/2011, 06:17

Para el que le pueda servir, finalmente he conseguido solucionar el asunto mediante una combinación de css y js. Aplico el :hover a botón para cambiar su backgroundimage y asimismo se ejecuta el onmouseover y onmouseout con la llamada a las funciones. Pero hay que incluir una precarga de las imágenes uno y dos en las funciones para que funcione correctamente en el explorer.

Muchas gracias a los que han contestado y saludos.