Javascript que elige ruta según el mes que es

[ferola]

Hola a todos;

Estoy haciendo una página con HTML y Javascript, y quiero que me cargue una imagen de una ruta determinada, según el mes que es.
Es decir, si es enero, que me cargue la foto llamada 1.jpg que está en la carpeta "Enero"; pero si es "Febrero" que me cargue la foto 1.jpg de la carpeta "Febrero".

¿Cómo puedo hacerlo?

Gracias!!!

[ferola]

¿Nadie puede ayudarme?

[David]

Podría ser algo como esto:

Código javascript:

fecha = new Date();
meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
imagen.src = meses[fecha.getMonth()] + "/1.jpg";
 

Pero, debes tener en cuenta que eso está sujeto a la fecha del sistema que accede a la página. Lo mejor sería que lo hagas en el servidor y no del lado del cliente.

[ferola]

¿Del lado del servidor? Lo siento pero no te entiendo. Yo tengo mi página llamada index.html y en ella es dónde pensaba hacerlo. ¿Éso no es el lado del servidor y del cliente?
Gracias.

[David]

Es que Javascript se ejecuta del lado del cliente, por lo que va a tomar la fecha del sistema del cliente.

[ferola]

Ok, gracias. Lo que pasa es que prefiero hacerlo así y en caso de que no sea ningún mes le asigno una ruta por defecto.
Es decir, si el mes es Enero, quiero que la foto que muestra sea la que se llama 1.jpg en la ruta "imagenes/Enero". Si es Febrero, quiero que sea la imagen 1.jpg de la ruta "imagenes/Febrero", etc.

Tengo el siguiente código script dentro del head:

Código:

<script>
function calcularMes()
{
var ruta="Enero"; //por defecto, por si el cliente tiene mal la fecha o lo que sea
fecha = new Date();
meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
ruta="http://www.forosdelweb.com/imagenes/"+meses[fecha.getMonth()];
return ruta;
}
</script>

Y luego, cuando quiero que me muestre la foto tengo:

Código:

<p>
			
<a href="calcularMes();"+"1.jpg" target="_blank"><img src="calcularMes();" +"1.jpg" alt="Clic para ampliar" width="250" height="201" hspace="10" vspace="5" align="left" /></a>Descripción de la imagen. 

</p>

El concatenar el numero de foto a la ruta tengo que hacerlo fuera de la función por si tengo varias fotos en la carpeta y quiero mostrar varias (es decir la 1.jpg, 2.jpg, etc.)

¿Qué hago mal? Muchas gracias de antemano.

[David]

No puedes poner código Javascript de esa manera en el src de la imagen, si te fijas en el ejemplo que yo puse, no estaba así el código. Tampoco en el href puedes concatenar cadenas de esa manera. Si quieres llamar a una función en el href debes anteceder con "javascript:"

[ferola]

Hola,
Ya he visto que en tu código la imagen no tenía así la ruta asignada, pero es que entonces no sé cómo poner la imagen en el body de la página, la única forma que sé de hacerlo es ésta que he expuesto.

¿El script está bien en el head o debe ir en el body? Y entonces, ¿cómo llamo al script desde el body para que muestre la imagen?
Estoy aprendiendo y me resulta algo complicado,

Gracias.

[David]

Como te mostré en el código de ejemplo, dentro de la misma función asignas el src de la imagen.

Por ejemplo. Si tuviera algo como esto:

Código html:

<img id="imagen" src="cargando.jpg" alt="Mes" />
 

Para cambiar por la imagen que yo quiero haría lo siguiente:

Código javascript:

document.getElementById("imagen").src = "imagen_que_yo_quiero.jpg";
 

[ferola]

¿Pero así, como pongo la imagen en el HTML para que se vea?
A ver, yo sólo quiero que la imagen depende del mes se coja de la carpeta que corresponde.

Por lo tanto, con el Javascript que me has proporcionado:


<script LANGUAGE="JavaScript">
function calcularMes()
{
fecha = new Date();
meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
document.getElementById("foto1").src = "imagenes/"+meses[fecha.getMonth()]+"1.jpg";
}
</script>

No consigo que me la muestre ni la imagen ni que funcione el href. Sólo quiero que la foto se vea y que al clicar se aumente. Y quiero ponerla en medio de un párrafo porque lleva texto al lado. Lo siento pero no sé como ponerla con eso de imagen.src ni si quiero poner varias tendré que hacer tantas funciones como quiera?

[David]

¿Tienes un <img> con id "foto1"? ¿Dónde llamas a la función?

Con el href es la misma cosa, tendrás que obtener la referencia al elemento con getElementById y a partir de ahí cambiar su href.

Si quieres reutilizar la función puedes recibir como parámetros el id del img, y el id del enlace para modificarlos.

[ferola]

En el código lo que tengo es así:

<p>

<a href="javascript:calcularMes();" target="_blank"><img id="foto1" src="" alt="Clic para ampliar" width="250" height="201" hspace="10" vspace="5" align="left" /></a>Éste es <B></B>

</p>

Entonces tendré que llamar a la función en el href y de la imagen en el src. Y pasarle por parámetros los id de las imágenes.

Muchas gracias, a ver si me sale

[ferola]

La función javascript:


<script LANGUAGE="JavaScript">
function calcularMes(identificador)
{
fecha = new Date();
meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
document.getElementById(identificador).src = "images/"+meses[fecha.getMonth()]+"/"+identificador+".jpg";
}
</script>

Y la llamada:

<p>
<a id ="1" href="javascript:calcularMes('id');" target="_blank"><img id="1" src="javascript:calcularMes('id');" alt="Clic para ampliar" width="250" height="201" hspace="10" vspace="5" align="left" /></a>Éste es <B></B>
</p>

Obviamente, debe estar mal, porque no me va :(

[David]

Es que tu img tiene id 1 (cosa que no debería ser, el id no debe ser numérico), mientras que tú estás tratando de modificar el elemento que tenga id = 'id'