Cambiar imagen y css dependiendo de la hora

paxarin · #1 (**permalink**) 02/07/2012, 05:25

Muy buenas.
Me gustaria saber si modificando este codigo que lo que hace es dependiendo de la hora del dia cargar una imagen o otra de fondo, que cargara tambien una hoja de estilos diferente.
Para cambiar junto con la imagen colores de las fuentes, enlaces etc.
El codigo es este.

Código:

<script language="JavaScript">
 
function imagen(){
   fecha = new Date();
   
   hora = fecha.getHours();
    
   if(hora>=1 && hora<=10){//imagen desde la 1am hasta las 10am
      document.getElementById("fondo").style.backgroundImage="url(img/mañana.jpg)";
   }
   
   if(hora>=11 && hora<=18){//imagen desde las 11am hasta las 6pm
      document.getElementById("fondo").style.backgroundImage="url(img/frontal1.jpg)";
   }
   
   if(hora>=19 && hora<=24){//imagen desde las 7pm hasta las 12pm
      document.getElementById("fondo").style.backgroundImage="url(img/frontal2.png)";
   }
    
               }
</script>

Alguien sabria como deberia de hacerlo?
Un saludo

emprear · #2 (**permalink**) 02/07/2012, 06:23

Asignale un id a tu link al archivo de estilos por defecto
<link rel="stylesheet" type="text/css" href="estilos1.css" media="screen" id="hojadeestilos" />

luego en tu función para cada cambio de horas
document.getElementById('hojadeestilos').href='est ilos2.css';
idem para estilos3.css, etc

Saludos

paxarin · #3 (**permalink**) 02/07/2012, 09:57

Cita:

Iniciado por emprear

Asignale un id a tu link al archivo de estilos por defecto
<link rel="stylesheet" type="text/css" href="estilos1.css" media="screen" id="hojadeestilos" />

luego en tu función para cada cambio de horas
document.getElementById('hojadeestilos').href='est ilos2.css';
idem para estilos3.css, etc

Saludos

Muchisimas gracias voy a probarlo.
Un saludo

paxarin · #4 (**permalink**) 02/07/2012, 11:17

Por algun extraño motivo no funciona.
la llamo a la funcion desde el body

Código:

<script language="JavaScript">
 function css(){
   fecha = new Date();
   hora = fecha.getHours();
    
   if(hora>=19 && hora<=8){//css desde las 19 hasta las 8 am
	  document.getElementById('noche').href='css/style_noche.css';
   }
   }
</script>
<body onLoad="inicio(); css()">

Y el link al css es
<link rel="stylesheet" href="css/style_noche.css" id="noche" />
Por más cosas que prove la verdad no funciona cosa extraña la verdad, ya que esta funcion la use en una web y si cambia las imagenes

IsaBelM · #5 (**permalink**) 02/07/2012, 13:40

está condición nunca se puede cumplir

Cita:

if(hora>=19 && hora<=8)

si es mayor a 19 no puede ser menor que 8. el operador tendría que ser (||)

emprear · #6 (**permalink**) 02/07/2012, 13:48

Cita:

Iniciado por paxarin

Por algun extraño motivo no funciona.
la llamo a la funcion desde el body

Código:

<script language="JavaScript">
 function css(){
   fecha = new Date();
   hora = fecha.getHours();
    
   if(hora>=19 && hora<=8){//css desde las 19 hasta las 8 am
	  document.getElementById('noche').href='css/style_noche.css';
   }
   }
</script>
<body onLoad="inicio(); css()">

Y el link al css es
<link rel="stylesheet" href="css/style_noche.css" id="noche" />
Por más cosas que prove la verdad no funciona cosa extraña la verdad, ya que esta funcion la use en una web y si cambia las imagenes

Esto ya lo contesté un par de veces, pero no recuerdo dónde, asi que lo pongo otra vez

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="estilos1.css" media="screen" id="hojadeestilos" />
<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';
document.getElementById('hojadeestilos').href='estilos1.css';
} 
if((hora >= 15)&&(hora <= 22)) { // 15,16,17,18,19,20,21,22
banner_logo.src = 'sfondo07.jpg';
document.getElementById('hojadeestilos').href='estilos2.css';
}
if((hora >= 23)||(hora < 7)){ // 23,0,1,2,3,4,5,6
banner_logo.src = 'sfondo06.jpg'; 
document.getElementById('hojadeestilos').href='estilos3.css';
}
}
//]]>
</script>
</head>
<body onload="banner();">
<h1>Demo</h1>
<img src="sfondo03.jpg" id="banner" alt="" />   
</body>
</html>

Este ejemplo hace una rotación cada 8 horas.
Tendrás que adaptarla a tu necesidad
Saludos

paxarin · #7 (**permalink**) 03/07/2012, 10:35

Cita:

Iniciado por IsaBelM

está condición nunca se puede cumplir

si es mayor a 19 no puede ser menor que 8. el operador tendría que ser (||)

Muy buenas.
desde mi ignoracia y hasta lo que yo entiendo, es que cuando coje el tiempo de nuestro reloj debe de interpretar que si son las entre 19 Pm y las 8Am debe cargar una hoja de estilos.
No obstante probare como me comentas.
Un saludo y gracias.

paxarin · #8 (**permalink**) 03/07/2012, 10:40

Cita:

Iniciado por emprear

Esto ya lo contesté un par de veces, pero no recuerdo dónde, asi que lo pongo otra vez

Código HTML:

Ver original<!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>
<title>titulo</title> 
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="estilos1.css" media="screen" id="hojadeestilos" />
<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';
document.getElementById('hojadeestilos').href='estilos1.css';
} 
if((hora >= 15)&&(hora <= 22)) { // 15,16,17,18,19,20,21,22
banner_logo.src = 'sfondo07.jpg';
document.getElementById('hojadeestilos').href='estilos2.css';
}
if((hora >= 23)||(hora < 7)){ // 23,0,1,2,3,4,5,6
banner_logo.src = 'sfondo06.jpg'; 
document.getElementById('hojadeestilos').href='estilos3.css';
}
}
//]]>
</script>
</head>
<body onload="banner();">
<h1>Demo</h1>
<img src="sfondo03.jpg" id="banner" alt="" />   
</body>
</html>

Este ejemplo hace una rotación cada 8 horas.
Tendrás que adaptarla a tu necesidad
Saludos

Gracias por el post, probare haber cual puede ser el problema.
Un saludo y muchas gracias