Javascript adentro de CSS

Mariianooh · #1 (**permalink**) 26/04/2012, 16:54

Hola, necesito su ayuda. Mi problema es el siguiente, quiero que el banner (imagen de cabecera) de mi blog cambie segun el horario, dividiendolo en 3 franjas horarias, para eso arme un codigo en javascript, lo probe y funciona perfecto, pero el problema surge al ponerlo donde va el link en el codigo CSS de la cabecera, ya que este no funciona, asi que les pregunto, es posible hacer lo que planteo? Aqui les dejo los codigos:

Codigo javascript:

Código:

<script>
//<![CDATA[
var hoy = new Date(), 
    hora = hoy.getHours(); 

if (hora >= 7 &amp;&amp; hora <= 14) { 
    document.write('<img src="http://i.imgur.com/7C736.png" />'); 
} 
else if (hora >= 14 &amp;&amp; hora <= 20) { 
    document.write('<img src="http://i.imgur.com/y61nh.png" />'); 
}
else if (hora >= 20 &amp;&amp; hora <= 7) { 
    document.write('<img src="http://i.imgur.com/uFaCc.png" />'); 
}
//]]>
</script>

Codigo CSS del blog sin modificar:

Código:

#body-wrapper{margin:0px;padding:0px;background:url(http://i.imgur.com/iTn7Z.png) left top repeat-x;}

Y asi es como yo lo deje y no funcionó:

Código:

#body-wrapper{margin:0px;padding:0px;background:url(<script>
//<![CDATA[
var hoy = new Date(), 
    hora = hoy.getHours(); 

if (hora >= 7 &amp;&amp; hora <= 14) { 
    document.write('<img src="http://i.imgur.com/7C736.png" />'); 
} 
else if (hora >= 14 &amp;&amp; hora <= 20) { 
    document.write('<img src="http://i.imgur.com/y61nh.png" />'); 
}
else if (hora >= 20 &amp;&amp; hora <= 7) { 
    document.write('<img src="http://i.imgur.com/uFaCc.png" />'); 
}
//]]>
</script>) left top repeat-x;}

Desde ya, gracias!

emprear · #2 (**permalink**) 26/04/2012, 21:21

En primer lugar bienvenido a FDW @Mariianooh,
te explico, con lo que estás haciendo no llegas a ninguna parte.
Se hace así, analizá las condiciones para ver en que rango de horas debe cambiar la imagen, en particular el último. Asi vas a tener 3 bloques de tiempo de 8 horas cada uno cubriedo las 24 horas del dia

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Cambiar background cada n segundos</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function banner() {
var hoy = new Date();
var hora = hoy.getHours();
 
var banner_logo = document.getElementById('banner');
 
if ((hora >= 7)&&(hora <= 14)) { // 7,8,9,10,11,12,13,14
banner_logo.src = 'sfondo03.jpg';
} 
if  ((hora >= 15)&&(hora <= 22)) { //15,16,17,18,19,20,21,22
banner_logo.src = 'sfondo07.jpg';
}
if  ((hora >= 23)||(hora < 7)){ //23,0,1,2,3,4,5,6
banner_logo.src = 'sfondo06.jpg'; 
}
 
}
//]]>
</script>
</head>
<body onload="banner();">
    
<img src="sfondo03.jpg" id="banner" alt="" />   
 
</body>
</html>

Saludos