Problema al cambiar imagen de fondo en Google Chrome

mau_87lp · #1 (**permalink**) 16/05/2012, 09:06

Buenas, quiero a traves de javascript cambiar la imagen de fondo apretando en miniaturas de imagenes. Esto me funciona en IE8 pero cuando lo quiero probar en google chrome, al apretar en la miniatura para cambiar la imagen de fondo no hace nada.

Código HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>No Body Thinks</title>
<script language="JavaScript">
function tile(){
if (!document.all)
return
var source=event.srcElement
if (source.tagName=="IMG")
document.body.style.backgroundImage="url("+source.src+")"
document.body.style.backgroundRepeat="no-repeat"
document.body.style.backgroundAttachment="fixed"
document.body.style.backgroundPosition="center center"
}
</script>
<style type="text/css">
.bgimages img {
	cursor:hand;
	border:2 solid red;
}
</style>
</head>
<body>
<div id="cuerpo">
		<div>
			<div class="bgimages" onClick="tile()">
				<img src="http://st-listas.20minutos.es/images/2011-10/307413/3223568_640px.jpg?1321149309" border=0 width=100 height=100 alt="Background 1">
			</div>
		</div>
	</div>
</body>
</html>

Muchas Gracias
Saludos

zerokilled · #2 (**permalink**) 16/05/2012, 11:13

buenas,
no te funciona ‒ y me extraña que te funcione en iexplorer ‒ porque estás usando un modelo propio de iexplorer. no es por eso que me extrañe que te funcione en iexplorer, sino porque tienes esta línea if(!document.all) return, que significa si no existe document.all, salir de la función. por tanto, en iexplorer y chrome (desgraciadamente) existe dicho objeto. sobre el modelo me refiero al de eventos. iexplorer crea el objeto event en el ambito global mientras que chrome parece que define la variable pero la deja undefined. chrome usa el modelo estándar, el cual consiste en que el handler recibe el objeto event cuando el evento se inicia. además, las propiedades tienen diferentes nombres.

Código:

function handler(evt){
console.log(evt.target);
}

<span onclick="handler(event);">click y revisa consola</span>

mau_87lp · #3 (**permalink**) 24/05/2012, 07:14

Buenas, gracias por la respuesta. Pongo el codigo con lo que solucione el problema.

Código:

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Ejemplo</title>
<script language="JavaScript">
img = new Array(); 
img.push('http://1.bp.blogspot.com/_dNgOLhC2RxU/Sl6gE6ih6eI/AAAAAAAAAq4/2x5VifyAOFo/s400/a-estudiantes.gif'); 
img.push('http://1.bp.blogspot.com/_DekTfBXp6Ls/TOXOe0pmsBI/AAAAAAAAHJE/AIbR5x9OJpU/s1600/estudiantesdelaplatalogu.png'); 
img.push('http://images.wikia.com/futbool/es/images/3/3c/O_estudiantes_de_la_plata_escudo_y_equipacion-1383612-1-.jpg'); 
img.push('http://www.hinchadapincha.com.ar/media/galeria/141/6/2/8/1/o_estudiantes_de_la_plata_afiches-1001826.jpg'); 
img.push('http://sp4.fotolog.com/photo/52/30/120/equiposmundiales/1211916849_f.jpg'); 
img.push('http://www.hinchadapincha.com.ar/media/galeria/141/7/0/9/0/o_estudiantes_de_la_plata_tierra_de_campeones-1070907.jpg'); 
index = 0; 
function ejemplo(){ 
document.body.style.backgroundImage  = 'url(' + img[index % img.length] + ')';
document.body.style.backgroundRepeat ="no-repeat";
document.body.style.backgroundAttachment="fixed";
document.body.style.backgroundPosition ="center center";
index++;
} 
window.onload = function(){ 
setInterval('ejemplo()', 5000); 
// 5000 milisegundos equivalente a 5 segundos
};
</script>
</head>
<body>

</body>
</html>

Con este codigo se puede cambiar la imagen de fondo de la pagina cada cierto tiempo. Yo lo probe en IE8, Google Chrome 19 y Mozilla 12.

Saludos