[SOLUCIONADO] cambiar imagen de fondo dependiendo de la hora del dia

aaaiiihueyyy · #1 (**permalink**) 18/11/2013, 16:44

Alguien que sepa alguno, hallè uno en este foro que es de hace tiempo pero se trata de cambiar de imagen solamente no de imagen de fondo el codigo es este

<html>
<head>
<script>
function cargarImagen(){
ahora=new Date();
hora=ahora.getHours();
if(hora<8){
imagen="primera.jpg";
}

if(hora>7 && hora<12){
imagen="segunda.jpg";
}
if(hora>11 && hora<18){
imagen="tercera.jpg";
}
if(hora>17 && hora<24){
imagen="cuarta.jpg";
}
document.images["reloj"].src=imagen;
}
</script>
<title>Untitled</title>
</head>

<body onload="cargarImagen()">
<img src="primera.jpg" name="reloj">

</body>
</html>

pero no se como hacer que la imagen que cambie sea la del fondo. Si saben una mejor manera nose que porejemplo especifique en minutos seria grandioso yo no se javascript pero segun me entere solo se puede hacer en ese lenguaje.

Crazylegs · #2 (**permalink**) 19/11/2013, 04:54

Para modificar la imagen de fondo:

Código Javascript:

Ver originaldocument.body.style.backgroundImage="url("+imagen+")";

martiknox · #3 (**permalink**) 19/11/2013, 12:00

Incluso podrías crear clases .background1{} , 2 ,3 ,4 ,5... para cada hora.
En el onload de una página obtener la hora y asignar la hora a una variable.
Despues añadir al <body>(creo que es donde quieres cambiar el background image) la clase .background[hora].

aaaiiihueyyy · #4 (**permalink**) 22/11/2013, 15:41

Eso que dijiste martiknox esta chido habra algun tutorial que conoscas al respecto la vdd estaria bien

HackID1 · #5 (**permalink**) 22/11/2013, 16:12

No es demasiado complicado hacerlas, pero tendrás que saber un poco de JavaScript y Html.
:)

aaaiiihueyyy · #6 (**permalink**) 22/11/2013, 16:21

oigan y a

document.body.style.backgroundImage="url("+imagen+ ")";

como se le agregaria el no-repeat osea ke la imagen de fondo no salga en mosaico.

Dalam · #7 (**permalink**) 22/11/2013, 16:29

Cita:

Iniciado por aaaiiihueyyy

oigan y a

document.body.style.backgroundImage="url("+imagen+ ")";

como se le agregaria el no-repeat osea ke la imagen de fondo no salga en mosaico.

Deberias de leer un poco o por lo menos intentar hacer algo
mirate esto para que sepas por donde tirarhttp://www.w3schools.com/cssref/pr_b...und-repeat.asp

martiknox · #8 (**permalink**) 24/11/2013, 09:51

Cita:

Iniciado por aaaiiihueyyy

Eso que dijiste martiknox esta chido habra algun tutorial que conoscas al respecto la vdd estaria bien

Lo primero, perdona por la tardanza en la respuesta.
Lo segundo, no tengo tutoriales, se me ocurrió sobre la marcha, pero creo que está bastante bien explicado y no es muy dificil de implementar...

Dalam · #9 (**permalink**) 24/11/2013, 18:48

Código Javascript:

Ver original<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>

Esto lo escribio pazarin en http://www.forosdelweb.com/f13/cambi...-hora-1001585/.
No repitais temas que ya existen, y buscar un poco que no es complicado.
Un saludo.

aaaiiihueyyy · #10 (**permalink**) 24/11/2013, 22:40

Un tremendo enorme gracias y disculpen la novates pero apenas empiezo ya me di cuenta ke este es un lenguaje casi necesario de aprender buscare un buen curso y comenzare a aprenderlo gracia de new Dalam comokiera voa intentar aplicar la idea ke me dio martiknox a todos gracias