Codigo para cambiar una imagen dependiendo el dia y la hora

samuelhds

samuelhds

Becerro
#1
#1
[CASI RESUELTO] Codigo para cambiar una imagen dependiendo el dia y la hora

HOLA QUE TAL HERMANOS Y HERMANOS BAKUNOS, NECESITO QUE ME HECHEN UNA MANO.

TENGO UN PROYECTO DE E-RADIO, Y BUENO YA ME ARME EL PORTAL, YA ESTAMOS TRANSMITIENDO Y TODO LA BUENA ONDA.

LA CUESTION ES QUE BUSCO LA MANERA DE MOSTRAR LA PROGRAMACION DE LA RADIO PERO POR HORA Y POR DIA, SERIA CAMBIANDO UNA IMAGEN DEPENDIENDO EL DIA DE LA SEMANA QUE ES Y LA HORA (SERIA SINCRONIZADA CON LA HORA CENTRAL DE MEXICO)

EJEMPLO: EL MIERCOLES A LAS 2PM QUE APARESCA UNA IMEGEN... A LAS 3PM CAMBIE A OTRA DE AHI SE MANTENGA ESA IMAGEN HASTA... LAS 9PM Y CAMBIE A OTRA, BUENO ES UN EJEMPLO.

QUE CADA DIA TENGA UN COMPORTAMIENDO DISTINTO.

ESPERO DE VERDAD ME PUEDAN HECHAR UNA MANO. LES DEJO LA URL DE LA RADIO PARA QUE LA CHEQUEN.

ACTUALIZACION DEL 16 DE AGOSTO
​

Hola que tal hermanos despues de mucho buscar entre en un foro un codigo que pienso que podria ser la solucion a mi problema, solo que no puedo acoplarlo a mi necesidad, que es de cambiar una imagen dependiendo el dia y la hora, en este foro ( no se si pueda poner el nombre del foro, por si las moscas no lo pongo jejeje) el que usuario que pregunta muestra un codigo que sirve para cambiar la imagen dependiendo la hora automaticamente, mas no por dia, se los muestro a continuacion.

<script language="JavaScript">
<!--
day=new Date() //Programacion dia Jueves
x=day.getHours()
if(x>=0 && x<3) {
document.write('<img src="programas/musicalatina.png">')
} else
if(x>=3 && x<6) {
document.write('<img src="programas/trasnoche.png">')
} else
if(x>=6 && x<7) {
document.write('<img src="programas/tango.png">')
} else
if (x>=7 && x<8) {
document.write('<img src="programas/tango.png">')
} else
if (x>=8 && x<9) {
document.write('<img src="programas/generazione.png">')
} else
if (x>=9 && x<10) {
document.write('<img src="programas/libertadcondicional.png">')
} else
if (x>=10 && x<11) {
document.write('<img src="programas/portugal.png">')
} else
if (x>=11 && x<12) {
document.write('<img src="programas/elsueñodelascenso.png">')
} else
if (x>=12 && x<13) {
document.write('<img src="programas/pasionvelezana.png">')
} else
if (x>=13 && x<14) {
document.write('<img src="programas/pasionvelezana.png">')
} else
if (x>=14 && x<15) {
document.write('<img src="programas/atreverse.png">')
} else
if (x>=15 && x<17) {
document.write('<img src="programas/futbol770.png">')
} else
if (x>=17 && x<18) {
document.write('<img src="programas/futbol770.png">')
} else
if (x>=18 && x<19) {
document.write('<img src="programas/futbol770.png">')
} else
if (x>=19 && x<20) {
document.write('<img src="programas/futbol770.png">')
} else
if (x>=20 && x<23) {
document.write('<img src="programas/futbol770.png">')
} else
if (x>=23 && x<24) {
document.write('<img src="programas/eneltiempo.png">')
}
<!-- End Hiding -->
</script>

Ahora un compañero le contesta que bueno puede hacer eso que busca con un html, un js, y un xml que se los muestro a continuacion.

Mira, he hecho un ejemplo muy tonto pero que creo que te puede servir de momento. Consta de tres ficheros, el index.html, el functions.js y el ejemplo.xml. Echale un vistazo a ver que te parece. Una vez que tu tienes acceso a los datos de tu xml con ellos puedes hacer todo lo que hacias antes, comparar con fechas, horas, etc:

index.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" language="javascript" src="functions.js"></script>
<title>Ejemplo. XMLParser</title>
</head>
<body>
<div id="contenido">
</div>
</body>
</html>

functions.js
var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
function loadXML(xmlFile)
{
xmlDoc.async="false";
xmlDoc.onreadystatechange=verify;
xmlDoc.load(xmlFile);
xmlObj=xmlDoc.documentElement;
}

function verify()
{
if (xmlDoc.readyState != 4)
{
return false;
}
}
loadXML('ejemplo.xml');
document.write('Programacion del mes de ' + xmlObj.childNodes(0).getAttribute("id") + ':<br>');
document.write('Dia ' + xmlObj.childNodes(0).childNodes(0).getAttribute("id") + ':<br>');

for (i=0; i<xmlObj.childNodes(0).childNodes(0).childNodes.length ;i++){
document.write('Desde las '+ xmlObj.childNodes(0).childNodes(0).childNodes(i).getAttribute("comienzo") + ' horas');
document.write(' hasta las '+ xmlObj.childNodes(0).childNodes(0).childNodes(i).getAttribute("final") + ' horas: ');
document.write(xmlObj.childNodes(0).childNodes(0).childNodes(i).text + '<br>');
}

ejemplo.xml
<?xml version="1.0" ?>
<agenda>
<mes id="Enero">
<dia id="1">
<hora comienzo="0" final="3">programas/musicalatina.png</hora>
<hora comienzo="3" final="6">programas/trasnoche.png</hora>
<hora comienzo="6" final="7">programas/tango.png</hora>
<hora comienzo="7" final="8">programas/generazione.png</hora>
</dia>
</mes>
</agenda>

Pero el resultado en pantalla de ese codigo es esto:

Programacion del mes de Mayo:
Dia 4:
Desde las 0 horas hasta las 3 horas: programas/musicalatina.png
Desde las 3 horas hasta las 6 horas: images2/patricia.gif
Desde las 6 horas hasta las 7 horas: programas/tango.png
Desde las 7 horas hasta las 8 horas: programas/generazione.png

y pone una nota que para agregar enves de un texto una imagen, tomando como referencia el primer codigo dice que agregamos lo siguiente:

bueno, por ejemplo, y cogiendo como referencia el codigo que tenias:
if (x>=19 && x<20) {

document.write('<img src="programas/futbol770.png">')
}
lo podemos poner:
if ((xmlObj.childNodes(0).childNodes(0).childNodes(i).getAttribute("comienzo"))>=19){
document.write('<img scr="'+document.write(xmlObj.childNodes(0).childNodes(0).childNodes(1).text+'">')
}

Con ese codigo me hago a la idea, pero la verdad es que no se mucho de programacion, y me gustaria que me puedieran hechar la mano en combiar los codigos que les propongo para realizar la tarea deseada.

De antemano muchisiismas gracias carnales, y perdon el mensaje tan largo pero no encontre otra manera.... bueno se me hace mala onda no dar credito a los compas del foro donde saque esos codigos asi que podre el link de ese tema... si por ahi me dices que lo borro, lo hago:

http://www.todoexpertos.com/categor...434025/rotar-imagen-de-acuerdo-del-dia-y-hora
 
samuelhds

samuelhds

Becerro
#4
#4
a ok hermanos, perdon perdon, pues estaba checando que se puede hacer ya sea el PHP o en Java... pero la verdad me gustaria que me asesoraran, yo soy mas diseñador que programador, entonses si es mi talon de aquiles, gracias carnales.
 
samuelhds

samuelhds

Becerro
#6
#6
SALUDOS MIS HERMANOS Y A RADIODELSUR, ENCONTRE UN CODIGO QUE CREO NOS PODRIA SERVIR... YA LO COLOQUE HASTA MERO ARRIBA, SOLO QUE NO SE APLICARLO PARA COLOCAR UNA IMAGEN, OJALA ME PUEDAN HECHAR LA MANO. GRACIAS
 
I

indiiztar

Bovino maduro
#7
#7
si usas css puedes hacerlo desde ahi asi
cambia el codigo:
<link rel=”stylesheet” type=”text/css” href=”miestilo.css” />

por esto:
<link rel=”stylesheet” type=”text/css” href=”
<?php
$hour = date(”H”);
if ($hour <12) echo “tuestilo1.css”;
elseif ($hour <20) echo “tuestilo2.css”;
else if ($hour <4) echo “tuestilo3.css”;
?>”
/>

en cada estilo solo cambia lo que sera tu imagen de fondo y listo, puedes crear las condiciones que tu necesites.
 
samuelhds

samuelhds

Becerro
#8
#8
xx_bto_xx dijo:
si usas css puedes hacerlo desde ahi asi
cambia el codigo:
<link rel=”stylesheet” type=”text/css” href=”miestilo.css” />

por esto:
<link rel=”stylesheet” type=”text/css” href=”
<?php
$hour = date(”H”);
if ($hour <12) echo “tuestilo1.css”;
elseif ($hour <20) echo “tuestilo2.css”;
else if ($hour <4) echo “tuestilo3.css”;
?>”
/>

en cada estilo solo cambia lo que sera tu imagen de fondo y listo, puedes crear las condiciones que tu necesites.
Haz clic para expandir...
Muchas gracias xx beto xx, perdona mi tardanza al contestar pero con eso la de la ingenieria quita un poquitin el tiempo, no se mucho de programacion me hago a la idea de lo que me comentas, seria mucho pedirte que me indicaras bien como iria armado el codigo CSS y como hacerle para que se incluya en el codigo, la pagina en si (www.la5tadeldiablo.com) no esta hecha en CSS, fue mas por el clasico... Photoshop y de ahi a Dreamweaver.

Muchas gracias espero me puedas seguir hechando la mano.
 
Debes iniciar sesión o registrarte para responder aquí.
Arriba