[GRAN RETO] Cambiar imagen en capa segun la hora

spesmod · #1 (**permalink**) 30/07/2008, 15:00

Hola, soy nuevo en este foro, y la razon x la que he entrado es xq necesito hacer la siguiente aplicacion en dreamweaver (creo que es con JavaScript):

En mi pagina, dentro de una pequeña capa (210x170 aunke el tamaño es irrelevante en este caso) kiero que aparesca una imagen aleatoriamente segun la hora del ordenador que ejecuta la pagina, todo esto debe ralizarce bajo el contorno de subcarpetas designadas para cada etapa del dia (mañana, tarde, noche) osea x ejmp:

carpeta_raiz-
---carpeta_mañana (3 imagenes)
---carpeta_tarde (3 imagenes)
---carpeta_noche (3 imagenes)

de manera tal que si son las 3:09 pm el browser reonosca esto y en la capa designada se muestre solo una imagen de las 3 que estan contenidas en la carpeta tarde, xq obviament son las 3:09 de la tarde. estas imagenes deben ser randomizadas para su eleccion, de manera que el contenido de la capa varie en cada carga de pagina.

soy programador en C y en ese lenguaje esto tiene un pseudocodigo muy facil, pero de JS no se nada -.-

en c seria algo asi (a lo bruto):

-recoenocer si es mañana tarde o noche
-si es mañana
----elegir al azar una de las imagenes de la carpeta mañana.
-si es tarde
----elegir al azar una de las imagenes de la carpeta tarde.
-si es noche
----elegir al azar una de las imagenes de la carpeta noche.
-mostrar imagen elgida en capa.

asi, si dos usuarios entran a la pagina en la mañana no necesariamente se muestre la misma imagen en la capa designada.

¿¿¿¿entienden mi ruidosa explicacion???? ¿¿¿¿alguna ayuda????

David · #2 (**permalink**) 30/07/2008, 15:50

Puedes usar la clase Date() para ver la hora en que estás, con el método getHours. Y puedes usar Math.random() para generar un número aleatorio.

Saludos

spesmod · #3 (**permalink**) 31/07/2008, 08:08

no es por ofender pero esa ayuda tuya no me sirve mas que para refrescarme algunas funicones del C.
como dije antes de JS no se mucho, asi que no se COMO UTILIZAR ESAS FUNCIONES QUE HAS DESCUBIERTO -.-

asi que podrian ser un poco mas condecendientes con este iletrado y poner el codigo concreto y donde ponerlo.

gracias de antemano.

David · #4 (**permalink**) 31/07/2008, 08:22

Es que se trata de que investigues un poco, ya que si conoces algo de programación, con eso que te dije podrás buscar información y armar el código. Y es que si pusiera solamente código no estaría ayudándote mucho, ya que no aprenderías cómo hacerlo por ti mismo.

Pero de todos modos, aquí un poco de ayuda:

Código PHP:

  var Fecha = new Date(); // Tomamos la fecha actual
alert(Fecha.getHours()); // Mostramos la hora actual en un mensaje

Puedes usar una serie de if para saber si estás en la mañana, tarde o noche. Por ejemplo:

Código PHP:

  if (Fecha.getHours()>6 && Fecha.getHours()<12) {
alert("Mañana");
}

En este caso comparamos si la hora es mayor que 6 y menor que 12, en tal caso mostramos un mensaje para decir que estamos en la Mañana.

Si tienes alguna otra duda, puedes preguntar.

Saludos

spesmod · #5 (**permalink**) 31/07/2008, 08:55

ok muy bien!!! gracias... pero es que yo no kiero que se muestre un mensaje de alerta a usuario, asi que obviaré la linea de codigo de "alert".

mas bien quiero saber como puedo definir una carpeta para que una imagen sea tomada de esa carpeta segun si es mañana o tarde o noche:

if (mañana)
---obtener de "carpeta-mañana"
else if (tarde)
---obtener de "carpeta-tarde"
else if (noche)
---obtener de "carpeta-noche"

y x ultimo ese codigo que me has brindado deberia ponerlo en el HEAD verdad???
gracias!!!

spesmod · #6 (**permalink**) 31/07/2008, 09:00

supongo que para validar eso deberia crear una variable y almacenar ahi el valor del dia...

x ejm 1 para mañana, 2 para tarde, y 3 para noche.
y luego evaluar esa variable, y si el valor de "variable" es 3 entonces elegir la carpeta noche...
ahora deberia tb guardar el valor de la carpeta en otra variable??? xq despues voy a utilizar ese valor para ingresar en dicha carpeta y randomizar las imagenes y elegir una??? entiendes???
gracias!!! me esta sirviendo de mucho tu ayuda

David · #7 (**permalink**) 31/07/2008, 09:25

Exacto, debes ponerlo en el <head> dentro de un tag <script>.

Al parecer ya entendiste cómo hacer para saber si es mañana, tarde o noche (con una serie de if parecidas al ejemplo que te puse, lógicamente que reemplazando el alert por la definición de la variable, por ejemplo hora = 1 (para mañana)).

Para lo de la carpeta, mi sugerencia sería que los nombres de las imágenes sean iguales, solo que cambies un número, por ejemplo imagen0.jpg, imagen1.jpg, imagen2.jpg. Así, con Math.random() * 3, generamos un número entre 0 y 2, añadimos ese valor al nombre y cargamos la imagen respectiva.

caricatos · #8 (**permalink**) 31/07/2008, 09:41

Hola spesmod, bienvenido a los foros

:

Espero que te sea útil la respuesta de David el Grande, que es muy buen colaborador de estos foros.
Mi intervención es para aconsejarte de que no te acostumbres a usar el truco de titular los mensajes como este "[GRAN RETO]", simplemente porque es una costumbre que a la mayoría de los que damos respuestas, no nos "engancha", es más, las leo por si se trata de un mensaje que deba "moderar", pero mi interés por este tipo de títulos es nulo. Lo mejor es que sea un título descriptivo (que has hecho bien con la salvedad que te he mencionado)

Tómalo como un consejo de alguien bastante experimentado en estos foros.

Saludos

spesmod · #9 (**permalink**) 31/07/2008, 11:20

consejo recibido para algun proximo tema

ahora...mmm ons deberia crear una sola carpeta verdad???...
digamos esto:

carpeta-
---imagen00.jpg
---imagen01.jpg
---imagen02.jpg
---imagen03.jpg
...
---imagen08.jpg

con eso tengo 9 imagenes... bien! ahora mi problema es el siguiente, se supone que las 3 primeras (de 0 a 2) corresponden a la mañana las siguientes 3 (de 3 a 5) corresponden a la tarde y las ultimas 3 (de 6 a 8) a la noche verdad?. bien pero ahora... se me ocurre esto

var=random(0-2) //eso me dara un aleaorio digamos "2".

if hora==tarde
---var+3
else if hora==noche
---var+6
imagen="imagen0"+"var"
mostrar "imagen"

de ese modo obendria una imagen al azar y concordaria al mismo tiempo si es mañana tarde o noche... pero como traducimos ese codigo de Lenguaje natura al JS??? COMO?... y mas aun... en donde deberia ponerlo para que se limite a trabajar solo dentro de una capa designada??? sque estoy trabajando en capas ps... gracias de nuevo... e haprendido muchas cosas hoy!!!! gracias he!

David · #10 (**permalink**) 31/07/2008, 11:27

Bueno, suponiendo que entendiste cómo hacer para saber si estamos en mañana, tarde y noche paso esa parte, y pongo el resto:

Código PHP:

  var aleat=parseInt(Math.random()*3); //Generamos un aleatorio entre 0 y 2
aleat += 3 * hora; // Suponiendo que hora es 0 cuando es mañana, 1 cuando es tarde y 2 cuando es noche
Imagen.src = 'imagen0' + aleat + '.jpg' // Suponiendo que tienes un <img> llamado Imagen

spesmod · #11 (**permalink**) 31/07/2008, 12:02

eres grande!!!!!
muchas gracias es lo q buscaba... pero... aora todo so donde o scribo para que se ejecute dentro de una capa...??? si no es mucha molestia... es que nos e que funciones utilizar para mostrar la imagen en cuestion, ademas supongo que parte del codigo va en el head y otra parte dentro de la etiketa div de la capa que deseo .... supongo yo... ... pero como??? sigues sindo bueno y me ayudas???

David · #12 (**permalink**) 31/07/2008, 13:52

Puedes poner ese código en el <head> en una función, luego ejecutar esa función en el evento onload de la página...

David · #13 (**permalink**) 31/07/2008, 15:20

Se me olvidaba que también se puede hacer usando document.write(), el único problema es que no podrás ubicarlo.
Véase: http://www.forosdelweb.com/f13/sinta...te-img-611112/

spesmod · #14 (**permalink**) 31/07/2008, 16:01

vento onload???... documentwrite()??? ero es ke de java nu se nada... ps... ese es mi gran probema... la logica la tengo inherente soy muy bueno en eso... pero mi gran problema y or o cua estoy posteando aki es que no se la sintaxis de JS eso es mi inpedimento... si pudieras poner el odigo??? ... buno no es x molestar pero ... no se como funcionan esas funciones... ni como metr todo eso en "una funion" y meterla en el evento onload ntiendes... explica please!!!

spesmod · #15 (**permalink**) 31/07/2008, 16:03

no stamos a mismo nivel... ayuda expresandote mjor em el sentido "no solo xpikes, tb escribe el codigo ps"... claro q me vas a decir asi no vas a aprender nada... pero en realidad si aprendo x eso no solo pido q pongas el codigo sino tb la EXPLICACION gracias!"

David · #16 (**permalink**) 01/08/2008, 09:37

Bueno, para empezar te recomiendo que leas un manual de Javascript para conocer por lo menos lo básico, ya que difícilmente yo podré ayudarte a empezar desde cero.

Para crear una función colocas así:

Código PHP:

  function nombre_funcion() {
// Aquí puedes poner el código para la imagen
}

Luego, para el evento onload (que se produce al terminar de cargar la página) puedes poner:

Código HTML:

window.onload = function() { nombre_funcion();}

O también:

Código HTML:

<body onload='nombre_funcion()'>