Una imagen cada día del año

Dahn · #1 (**permalink**) 08/06/2004, 03:44

Quiero que cada día DEL AÑO se muestre una imagen en mi página web y buscando por internet he encontrado este código que hace algo parecido:

Código:

<SCRIPT LANGUAGE="JavaScript">
<!--
now=new Date();
day=now.getDay();
document.write("<IMG SRC='image/" + day + ".gif' WIDTH=50 HEIGHT=50 ALT='Image aléatoire'>");
//-->
</SCRIPT>

Según eso tendría que nombrar las imagenes como "0.gif" para el domingo, "1.gif" para el lunes, etc... así a hasta llegar al 7 y después almacenarlas en la carpeta /image.

Se supone que asi saldría una diferente cada día de la semana y no del año. que es lo que yo quiero (como ya os he dicho).

He pensado que se podría hacer cambiando lo de "now.getDay()" pero no estoy seguro...

Bueno espero respuesta, gracias!

soniagrande · #2 (**permalink**) 08/06/2004, 05:07

Lo que puedes hacer es recuperar el dia del mes y el mes en el que estas.

Puedes nombrar a las imagenes como: dia_mes.gif

Con lo que el codigo te quedaria asi:

Código HTML:

<SCRIPT LANGUAGE="JavaScript">
<!--
var now=new Date();
var dia=now.getDate();
var mes= now.getMonth()+1;
document.write("<IMG SRC='image/" + dia+"_"+mes + ".gif' WIDTH=50 HEIGHT=50 ALT='Image aléatoire'>");
//-->
</SCRIPT>

KarlanKas · #3 (**permalink**) 08/06/2004, 05:12

Prueba con esto:

Código HTML:

<html>
<head>
	<title>Untitled</title>
	<script>
	rutaBase="http://www.forosdelweb.com/img/"
	function cargarImagen(){
	hoy=new Date();
	
	//Con este debes crear un directorio para cada mes:
	// 0->enero
	// 1->febrero
	// 2->marzo
	//..
	//Y dentro de cada directorio una imagen para cada día con el nombre de 1.jpg para el día 1, 2.jpg para el día 2...
	//Así la imagen del día 3 de junio tendría esta ruta: 
	//http://www.forosdelweb.com/img/5/3.jpg
	//Es importante que la imagen se llame diaria (que tenga el name diaria).
	
	ruta=rutaBase+hoy.getMonth()+"/"+hoy.getDate()+".jpg";
	document.images["diaria"].src=ruta;
	
	}
	
	</script>
</head>
<body onload="cargarImagen()">
<img name="diaria">

</body>
</html>

Espero que te sirva!

KarlanKas · #4 (**permalink**) 08/06/2004, 05:13

Sonia! Te me adelantaste!

Creo que sería mejor crear un directorio para cada mes... para no saturar tanto un directorio... pero vamos, eso según vea cada cual!

Un saludo!!

Dahn · #5 (**permalink**) 08/06/2004, 05:51

Muchas gracias a los dos! Al final he utilizado el código de KarlanKas y funciona muy bien

Nos vemos!

KarlanKas · #6 (**permalink**) 08/06/2004, 06:11

Me alegro de que te haya servido!!

Un saludo!

wesse · #7 (**permalink**) 09/06/2004, 02:41

y como podría vincularse esa foto a un popup con la misma foto ampliada?

KarlanKas · #8 (**permalink**) 09/06/2004, 02:48

Prueba con esto:

Código HTML:

<html>
<head>
	<title>Untitled</title>
	<script>
	rutaBase="http://www.forosdelweb.com/img/"
	function cargarImagen(){
	hoy=new Date();
	
	//Con este debes crear un directorio para cada mes:
	// 0->enero
	// 1->febrero
	// 2->marzo
	//..
	//Y dentro de cada directorio una imagen para cada día con el nombre de 1.jpg para el día 1, 2.jpg para el día 2...
	//Así la imagen del día 3 de junio tendría esta ruta: 
	//http://www.forosdelweb.com/img/5/3.jpg
	//Es importante que la imagen se llame diaria (que tenga el name diaria).
	
	//La imagen en grande está en el directorio grande dentro del directorio del mes y como nombre debe tener el día.jpg así:
	//http://www.forosdelweb.com/img/5/grande/3.jpg
	
	
	ruta=rutaBase+hoy.getMonth()+"/"+hoy.getDate()+".jpg";
	document.images["diaria"].src=ruta;
	rutaEnlace=rutaBase+hoy.getMonth()+"/grande/"+hoy.getDate()+".jpg";
	document.getElementById("enlace").href=rutaEnlace;
	}
	
	</script>
</head>
<body onload="cargarImagen()">
<a href="#" name="enlace" id="enlace" target="_blank"><img border=0 name="diaria"></a>

</body>
</html>

KarlanKas · #9 (**permalink**) 09/06/2004, 03:05

Con ayuda del magnífico script de tunait que está en las FAQ's lo centramos y ajustamos la ventana a la imagen:

Código HTML:

<html>
<head>
	<title>Untitled</title>
	<script language="javascript"> 

// Modificación del script por Tunait para su adaptación a la imagen diaria.
// Debes crear un directorio para cada mes:
	// 0->enero
	// 1->febrero
	// 2->marzo
	//..
	//Y dentro de cada directorio una imagen para cada día con el nombre de 1.jpg para el día 1, 2.jpg para el día 2...
	//Así la imagen del día 3 de junio tendría esta ruta: 
	//http://www.forosdelweb.com/img/5/3.jpg
	//Es importante que la imagen se llame diaria (que tenga el name diaria).
	
	//La imagen en grande está en el directorio grande dentro del directorio del mes y como nombre debe tener el día.jpg así:
	//http://www.forosdelweb.com/img/5/grande/3.jpg

	var ventana 
	var cont=0 	
	var hoy=new Date();
	var titulopordefecto ="Foto del "+hoy.toLocaleString() //texto por defecto a mostrar en la barra de título en caso de omitir el argumento titulo 
	var rutaBase="http://www.forosdelweb.com/img/"
	var ruta=rutaBase+hoy.getMonth()+"/"+hoy.getDate()+".jpg";	
	
	function afoto(cual,titulo){ 
		cual=rutaBase+hoy.getMonth()+"/grande/"+hoy.getDate()+".jpg";
		if(cont==1){ventana.close();ventana=null} 
		if(titulo==null){titulo=titulopordefecto} 
		ventana=window.open('','ventana','resizable=yes,scrollbars=no') 
		ventana.document.write('<html><head><title>' + titulo + '</title></head><body style="overflow:hidden" marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no" onUnload="opener.cont=0"><img src="' + cual + '" onLoad="opener.redimensionar(this.width, this.height)">') 
		ventana.document.close() 
		cont++ 
	} 

	function redimensionar(ancho,alto){ 
		ventana.resizeTo(ancho+12,alto+28) 
		ventana.moveTo((screen.width-ancho)/2,(screen.height-alto)/2) //centra la ventana. Eliminar si no se quiere centrar el popup 
	}
	
	function cargarImagen(){
	document.images["diaria"].src=ruta;
	}
	
	</script>
</head>
<body onload="cargarImagen()">
<a href="#" onclick="afoto();return false"><img border=0 name="diaria"></a>

</body>
</html>

Dime que tal!

wesse · #10 (**permalink**) 09/06/2004, 05:21

GENIAL!!! Muchas gracias KarlanKas, me has ayudao a que mi pagina no muera este verano... :D

Una curiosidad,... he comprobado que los popus se ajustan automaticamente a la foto... ¿como puede hacerse eso? es con esto? opener.redimensionar(this.width, this.height) a ver si me explicas un poquillo...

Yo hasta ahora hacía los popup asi:
en head: <script>
function abrirpopup(nombre,ancho,alto) {
dat = 'width=' + ancho + ',height=' + alto + 'toolbar=0,scrollbars=0,location=0,statusbar=0,men ubar=0,resizable=1,left = 50,top = 0';
window.open(nombre,'',dat)
}
</script>

En body: <a href="javascript:abrirpopup('link.jpg',481,341);"> LINK</a>

¿Cómo podría adaptar mi código para que no tubiese que dar los valores de ancho y alto cada vez?

KarlanKas · #11 (**permalink**) 09/06/2004, 05:39

En las FAQ tienes un script de tunait al respecto.

El código es este:

Código HTML:

function afoto(cual,titulo){ 
		if(cont==1){ventana.close();ventana=null} 
		if(titulo==null){titulo=titulopordefecto} 
		ventana=window.open('','ventana','resizable=yes,scrollbars=no') 
		ventana.document.write('<html><head><title>' + titulo + '</title></head><body style="overflow:hidden" marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no" onUnload="opener.cont=0"><img src="' + cual + '" onLoad="opener.redimensionar(this.width, this.height)">') 
		ventana.document.close() 
		cont++ 
	} 

	function redimensionar(ancho,alto){ 
		ventana.resizeTo(ancho+12,alto+28) 
		ventana.moveTo((screen.width-ancho)/2,(screen.height-alto)/2) //centra la ventana. Eliminar si no se quiere centrar el popup 
	}

puedes cambiarlo para adaptarlo a tu web por este:

Código HTML:

function abrirpopup(cual,titulo){ 
		cual=rutaBase+hoy.getMonth()+"/grande/"+hoy.getDate()+".jpg";
		if(cont==1){ventana.close();ventana=null} 
		if(titulo==null){titulo=titulopordefecto} 
		ventana=window.open('','ventana','resizable=yes,scrollbars=no') 
		ventana.document.write('<html><head><title>' + titulo + '</title></head><body style="overflow:hidden" marginwidth="0" marginheight="0" topmargin="0" bottommargin="0" leftmargin="0" rightmargin="0" scroll="no" onUnload="opener.cont=0"><img src="' + cual + '" onLoad="opener.redimensionar(this.width, this.height)">') 
		ventana.document.close() 
		cont++ 
	} 

	function redimensionar(ancho,alto){ 
		ventana.resizeTo(ancho+12,alto+28) 
		ventana.moveTo((screen.width-ancho)/2,(screen.height-alto)/2) //centra la ventana. Eliminar si no se quiere centrar el popup 
	}

Lo único que he hecho ha sido cambiar el nombre a la function. Si te fijas, la función abre una página con la imagen que pones. Y cuando se carga la imagen manda su altura y anchura al script redimensionar que está en la opener:

<img src="perico.jpg" onload="opener.redimensionar(this.width,this.heigh t)">

Si quieres, puedes poner:
<img src="perico.jpg" onload="self.resizeTo((this.width+12),(this.height +28))">

Pero es más completo el código de tunait.

Por cierto, ventana es el nombre que se le da al popup al abrirlo.

No sé si me habré explicado bien...

Dahn · #12 (**permalink**) 09/06/2004, 09:05

Volviendo al tema de antes... la fecha que toma en cuenta el script es la que tiene el usuario en su PC o la del server donde esta alojada la página?

Thx

KarlanKas · #13 (**permalink**) 09/06/2004, 10:58

Si trabajamos con Javascript siempre siempre tomará la fecha del ordenador del usuario. Y como respuesta a tu pregunta siguiente (que la harás) te diré que no, no sé como hacer que tome la fecha del servidor.

Dahn · #14 (**permalink**) 09/06/2004, 13:40

Cita:

Iniciado por KarlanKas

Y como respuesta a tu pregunta siguiente (que la harás) te diré que no, no sé como hacer que tome la fecha del servidor.

Juasss... No te iba a preguntar eso pero bueno, esta bien saberlo :P

La verdad esq si sabía que el javascript va asi pero "se me ha ido la cabeza" XDD

Gracias de nuevo :D

Dahn · #15 (**permalink**) 21/09/2004, 18:10

Alguien me podría facilitar este mismo script pero que en vez de mostrar una imagen incluyese un archivo .txt?

Lo he intentado hacer metiendo un include en php dentro del javascript pero no he conseguido hacer que funcione correctamente.

Saludos!

camposanto · #16 (**permalink**) 28/10/2007, 11:57

Hola a todos, especialmente a Karlankas, por sus posts.

Mi intervención es debido a que estoy desesperado. No consigo hacer que funcione el Script de Karlankas en mi código. Se que algo estoy haciendo mal, porque cuando pruebo el código por separado, este funciona perfectamente, pero cuando lo inserto entre el código de mi página, no se por qué, pero no funciona nada.

No se si es posible que la hoja de estilo esté interfiriendo en este caso, aunque quizás esté diciendo una burrada, porque soy neófito en esto.

Creo que me he metido en más de lo que podía abarcar, y ahora estoy con este tema en un punto muerto.

Por favor, si alguien me pudiera ayudar, le estaría eternamente agradecido.

Un saludo

camposanto

KarlanKas · #17 (**permalink**) 28/10/2007, 15:30

Hola camposanto. Podemos ver tu página para ver qué le falla?

camposanto · #18 (**permalink**) 29/10/2007, 03:56

Cita:

Iniciado por KarlanKas

Hola camposanto. Podemos ver tu página para ver qué le falla?

Hola KarlanKas:

Por supuesto que podéis.

La dirección de la página es:

http://www.ccooaytomajadahonda.es/

Lo siento, os lo tengo que poner así, sin enlace directo, porque como soy nuevo, no me dejan compartir url's con vosotros hasta que hayan pasado 30 días (o al menos es el mensaje automático que recibo del foro)

Está todo en fase de pruebas, y es un poco desastre. De hecho, aún no se lo he comunicado a mis compañeros de la sección sindical (es la página de la sección sindical del sitio en el que trabajo). Únicamente me interesa controlar el tema de la página de inicio, y concretamente el script que nos has facilitado. He hecho una mezcla entre el tuyo y el de soniagrande, que en mi ordenador funciona (más o menos, no querría tener dos script para hacer una sola cosa si se puede arreglar con uno)..., pero en el servidor nada de nada y no me imagino además por qué puede ser esto.

Lo que si que me queda claro es que el script que nos dejaste..., por separado..., funciona increíble, justo lo que quería (es decir, solo en una página distinta y sin el resto del código de mi página)..., pero entre el código de mi página se pierde.

Con respecto a lo de la hoja de estilo, creo que no es eso, pues la desactivé a ver qué pasaba, y nada de nada..., que no funciona

Por favor, si me echas un cable, te lo agradeceré muchíiiiiiiiiiiisimo

De hecho, te agradezco de antemano que me hayas contestado

Recibe un efusivo saludo

camposanto

P.D.: Por cierto, KarlanKas..., eso de que No visitemos tu blog..., es Psicología invertida, ¿no?..., si es así, te advierto que conmigo ha funcionado

KarlanKas · #19 (**permalink**) 29/10/2007, 04:47

Es curioso. Lo que ocurre es que no se ejecuta el onload, por lo que nunca salta la imagen. ¿Cómo lo he arreglado? Tienes dos opciones:

1 Por medio de onerror:

Quita el onload del body y pon la etiqueta img así:

<img border="0" src="#" name="diaria" onerror="this.src=ruta;">

2 Con una chapucilla:

Pon debajo de la etiqueta de la imagen lo siguiente:

<script language="JavaScript" type="text/javascript">chisteDiario()</script>

Con cualquiera de las dos soluciones funcionará. Yo te recomiendo la primera, aunque la primera parece más inmediata.

Un saludo y gracias por no hacerme caso con el blog

camposanto · #20 (**permalink**) 29/10/2007, 14:07

KarlanKas...

Eres un crack!. No puedo probar el código aún, porque estoy estos días hasta el puente muy liado, y ni siquiera puedo pasar por donde tengo el ordenador donde programo...

Pero te lo agradezco millones.

En cuanto lo corrija te cuento lo que pasa (seguro que se arregla, no lo dudo)..., y por supuesto aparecerás en los agradecimientos de la página, si lo permites, claro

Un fuerte abrazo

camposanto

rustan · #21 (**permalink**) 30/10/2007, 17:38

Hola amigos, luego de tanto código que´de medio mareado, lo que yo quería hacer es cambiar una imagen por día durante 30 dias o sea tengo un directorio /fotodeldia y dentro del mismo 31 imagenes 01_imagen.jpg 02_imagen.jpg etc lo que quería es ver como javascript las va rotando .. me pueden ayudar? gracias

KarlanKas · #22 (**permalink**) 31/10/2007, 02:39

Puede ser así?

Código:

<html>
<head>
	<title>Untitled</title>
	<script>
	
	function imagenDelMes(){
	var directorio="/imagendeldia";
	var extension=".jpg";
	var ahora=new Date();
	var dia=ahora.getDate();
	var ruta=directorio+"/imagen_"+dia+extension;
	var imagen = document.createElement("img");
	imagen.setAttribute("src", ruta);
	var destino = document.getElementById("aquiImagen");
	destino.appendChild(imagen);
	}
	
	</script>
</head>

<body onload="imagenDelMes()">
<div id="aquiImagen"></div>


</body>
</html>

PAra ver si funciona vete cambiando la fecha del ordenador.

rustan · #23 (**permalink**) 31/10/2007, 14:43

perfecto maestro muchas gracias

rustan · #24 (**permalink**) 31/10/2007, 15:21

Parece que me entusiasmé ..el código anda perfecto en firefox pero en IE no veo la foto puede ser?

camposanto · #25 (**permalink**) 01/11/2007, 10:40

Decididamente Karlankas, eres un crack

Ya he podido incorporarme a mi ordenador, y he hecho EL CAMBIO nº 1 que me sugeriste 6 posts más arriba, Y FUNCIONA PERFECTO!!! tanto en Firefox, como en Opera como en Internet Explorer.

Me quedo con la referencia que has hecho a rustan para la imagen rotatoria que cada mes se repite en la misma fecha, por si me canso de buscar tantas viñetas.

En serio Karlankas, no sabes cuánto te lo agradezco y te hago extensible los agradecimientos de mis compañeros de la sección sindical, que si bien no tienen mucha idea de html y demás (la verdad es que yo tampoco aunque ya sabes que en el mundo de los ciegos..., el tuerto... pues eso), y están a mi lado diciéndome..., pon eso aquí..., estaría bien que saliera esto allá, y demás..., ya sabes.

Tienes un huequecito de honor en nuestra humilde página.

Un fuerte abrazo

camposanto

rustan · #26 (**permalink**) 01/11/2007, 13:25

bueno...me alegro que te funcione el código a mi no me anda en IE y anda ok en Firefox estoy probandolo en 3 pcs diferentes y en ninguna anda en IE tengo abajo del HEAD

abajo del meta
<script>

function imagenDelMes(){
var directorio="/fotodeldia";
var extension=".jpg";
var ahora=new Date();
var dia=ahora.getDate();
var ruta=directorio+"/imagen_"+dia+extension;
var imagen = document.createElement("img");
imagen.setAttribute("src", ruta);
var destino = document.getElementById("aquiImagen");
destino.appendChild(imagen);
}
</script>

y luego en el BODY por abajo de todo

<td><div id="aquiImagen"></div></td>

y nada mas..
me anda en firefox solamente si alguien tiene alguna idea?

JavierB · #27 (**permalink**) 01/11/2007, 13:31

Hola rustan

Prueba cambiando esta línea:

imagen.setAttribute("src", ruta);

por esta otra:

imagen.src = ruta;

Saludos,