Cambiar imagen fondo de DIV al pasar puntero

ItzcoatlMX · #1 (**permalink**) 27/06/2007, 17:07

Hola, soy nuevo en el foro, y la verdad vengo algo apurado en busca de ayuda de los sabios. Resulta que necesito cambiar el fondo de una capa DIV cuando se le pase el puntero, y lo mas obvio era intentar con:

Código:

onmouseover="this.style.background=url('imagen.jpg')"

Pero por alguna razón no me funciona, cambiar el color si, pero cuando es la URL de una imagen no lo consigo, lamentablemente no he encontrado referencia en internet, o no he sabido encontrarla, así que acudo a ustedes esperando me ayuden o me den una pequeña guia de como lograrlo, por este metodo u otro.

De antemano gracias. Saludos!

derkenuke · #2 (**permalink**) 27/06/2007, 20:42

No debería haber problema si es una imagen que pueda encontrarse, y si el objeto es lo suficientemente grande para mostrar la imagen. Deberás darle el tiempo necesario al navegador para que cargue imagen.jpg.

Si te sigue dando problemas prueba con
this.style.backgroundImage=url('...')

Un saludo.

Panino5001 · #3 (**permalink**) 27/06/2007, 22:41

Otra manera:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<title>test</title>

<script>

function addCss(cssCode) {

var styleElement = document.createElement("style");

styleElement.type = "text/css";

if (styleElement.styleSheet) {

styleElement.styleSheet.cssText = cssCode;

} else {

styleElement.appendChild(document.createTextNode(cssCode));

}

document.getElementsByTagName("head")[0].appendChild(styleElement);

} 

</script>

</head>

 
<body>

<div id="pepe" onmouseover="addCss('#'+this.id+'{background:url(http://www.forosdelweb.com/customavatars/avatar65984_1.gif) center center no-repeat;}')" onmouseout="addCss('#'+this.id+'{background:none;}')"><br />

<br />

<br />

</div></body>

</html>

MaBoRaK · #4 (**permalink**) 28/06/2007, 11:12

loading.........

mmm no pues si le falta la funcion...

Código PHP:

  onmouseover=function(){this.style.background="url('imagen.jpg')";}

O funciona igual sin una funcion?....

connection closed.

ItzcoatlMX · #5 (**permalink**) 28/06/2007, 12:16

Muchas gracias por su valiosa ayuda. Les cuento, estuve intentando varios métodos como los que sugirieron derkenuke y MaBoRaK, pero seguia sin funcionarme por alguna razón que desconozco, al final utilice el script que hizo el favor de compartir Panino5001 y funciono de maravilla, y lo mejor que jala hasta en Firefox; me ha sido de gran ayuda.

De nuevo muchas gracias.

Saludos!!!

Panino5001 · #6 (**permalink**) 28/06/2007, 12:31

Sólo para dar el crédito a quien se merece: el script lo tomé de http://yuiblog.com/blog/2007/06/07/style/

MaBoRaK · #7 (**permalink**) 28/06/2007, 16:04

loading..................

Como sugerencia:

En el evento onmouseout, se debería eliminar el objeto creado... porque si lo vez, por cada onmouseover estas creando un elemento DOM STYLESHEET... y no los quitas... puedes llegar hasta hacer un overflow :|

connection closed.

MaBoRaK · #8 (**permalink**) 28/06/2007, 16:06

loading.........

no ví que usabas innerHTML, entonces debería ser asi

Código PHP:

  onmouseover="this.style.background=\"url('imagen.jpg')\";"

connection closed.