Imagen aleatoria al pulsar enlace

Enjuto · #1 (**permalink**) 21/09/2010, 04:50

Hola. Supongo que esta duda será de lo más simple, pero es que no tengo ni la más remota idea de cómo hacerlo.

Tengo un script que me muestra una imagen de modo aleatorio cada vez que recargo la página. Es del estilo:

Código:

<script language="JavaScript">
    XXXX = new Array(3)
    XXXX[0] = '<img src="IMAGEN1.jpg"/>'
    XXXX[1] = '<img src="IMAGEN2.jpg"/>'
    XXXX[2] = '<img src="IMAGEN3.jpg"/>'
    aleatorio = Math.random() * (XXXX.length)
    aleatorio = Math.floor(aleatorio)
    document.write(XXXX[aleatorio])
</script>

Lo que quiero hacer es que, a su vez, esa imagen también cambie al pulsar en un enlace (es decir, sin necesidad de recargar la página). ¿Me quiere echar alguien una mano, por favor?

Enjuto · #2 (**permalink**) 21/09/2010, 07:16

angelAparicio · #3 (**permalink**) 21/09/2010, 08:04

Respondo porque me ha hecho gracia el dibujo, pero a veces hay que tener algo de paciencia, que la gente responderá cuando pueda, no cuando quieras :P

Primero, añade una etiqueta img al cuerpo de la página, algo así:

<img src="" id="imagen_aleatoria" />

Ahora, modifica el script para que cambie el src de la imagen y mételo en una función:

Código Javascript:

Ver originalfunction cambiaImagen(){
    XXXX = new Array(3);
    XXXX[0] = "IMAGEN1.jpg";
    XXXX[1] = "IMAGEN2.jpg";
    XXXX[2] = "IMAGEN3.jpg";
    aleatorio = Math.random() * (XXXX.length);
    aleatorio = Math.floor(aleatorio);
    document.getElementById('imagen_aleatoria').src = aleatorio;
}

Y ahora para que la imagen cambie desde un enlace, solo tienes que llamar a la función, tal que así:

<a href="#" onclick="cambiaImagen()" />

No lo he probado, pero debería funcionar.

Enjuto · #4 (**permalink**) 21/09/2010, 14:18

Gracias por responder.

Pero me temo que no ha funcionado.

En cuanto añado la función (function cambiaImagen(){) dejan de aparecer las imágenes (sin la función sí aparecen).

angelAparicio · #5 (**permalink**) 22/09/2010, 02:35

Pon algo así
<body onload="cambiaImagen()">

para que la función se ejecute al cargar la página

Enjuto · #6 (**permalink**) 22/09/2010, 04:31

Me temo que va a ser más complicado de lo que yo creía...

Gracias por intentarlo.

Edito: Lo he intentado también cambiando el script por este otro:

Código:

<script language="JavaScript">
function ver_imagen()
{
n=0;
this[n++]="IMAGEN1.jpg";
this[n++]="IMAGEN2.jpg";
this[n++]="IMAGEN3.jpg";
this[n++]="IMAGEN4.jpg";
this.N=n;
}
var imagen=new ver_imagen();
src= imagen[ Math.floor(Math.random() * imagen.N) ] ;
document.write("<img src="+src+">");
</script>

Pero tampoco he conseguido nada...

angelAparicio · #7 (**permalink**) 22/09/2010, 10:23

¿Puedes poner el código html completo?

emprear · #8 (**permalink**) 22/09/2010, 10:30

Mira, tu explicación no la entendí del todo,

la siguiente script recarga una imágen cada determinado tiempo, a lo mejor la podes ajustar para que la imagen sea aleatoria

<script type="text/javascript">

</script>

el html

<img src="foto1.jpg" alt="" name="uno">

Esta es una variante
<script type="text/javascript">

</script>

el html
<body onload="recargar();">
<img src="foto1.jpg" alt="" id="uno" />

Saludos

Enjuto · #9 (**permalink**) 22/09/2010, 11:52

@emprear Veamos... Tengo una imagen que cambia por otra, aleatoriamente, al recargar la página. Lo que quiero es un enlace (véase enlace, botón, o milagro mágico) que al pulsarlo cambie la imagen de igual modo, pero sin necesidad de recargar la página.

@angelAparicio He hecho ya tantos cambios intentándolo y he montado tal cacao que no sé ni lo que tengo. El código completo (resumiendo) es el script y el intento de enlace/botón que quiero, dentro de un div. No hay más. Inicialmente sería:

Código:

<div style="patatín; patatán;">
<script language="JavaScript">
    XXXX = new Array(3)
    XXXX[0] = '<img style="patatín; patatán;" src="IMAGEN1.jpg"/>'
    XXXX[1] = '<img style="patatín; patatán;" src="IMAGEN2.jpg"/>'
    XXXX[2] = '<img style="patatín; patatán;" src="IMAGEN3.jpg"/>'
    aleatorio = Math.random() * (XXXX.length)
    aleatorio = Math.floor(aleatorio)
    document.write(XXXX[aleatorio])
</script>
<a href="#" onclick="" /> (Esto es el enlace/botón que me trae de cabeza)
</div>

He intentado (desde mi completa ignorancia) cambiar mil cosas, y no he conseguido lo que quiero. A lo más que he llegado es a que desaparezca la imagen al pulsar el enlace/botón.

emprear · #10 (**permalink**) 22/09/2010, 12:34

ahora lo tengo mas claro

Proba con esto

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" >
<head>
<title>Imagen aleatoria</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="x" />
<meta name="keywords" content="x" />
<meta http-equiv="Content-Language" content="ES-ar" />
<meta name="copyright" content="&copy; 2006, Guillermo Gianello" xml:lang="es" />
<meta name="author" content="http://emprear.com"  xml:lang="es" />
<style type="text/css">
/*<![CDATA[*/
 
img#ia{
border: solid 1px #000;
}
 
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
 
function rand(n){
// creamos un numero al azar entre 1 y 10 (o cual sea la cantidad de imágenes)
 return(Math.floor(Math.random() * n + 1 ));
}
 
//guardas imagenes en el array
var cambia_imagen = new Array();
cambia_imagen[0] = "0.jpg";
cambia_imagen[1] = "1.jpg";
cambia_imagen[2] = "2.jpg";
cambia_imagen[3] = "3.jpg";
cambia_imagen[4] = "4.jpg";
cambia_imagen[5] = "5.jpg";
cambia_imagen[6] = "6.jpg";
cambia_imagen[7] = "7.jpg";
cambia_imagen[8] = "8.jpg";
cambia_imagen[9] = "9.jpg";
 
//la función para que al clickear establezca el source del tag imagem que tiene id "ia" (Imagen aleatoria)
//como no son tantas, puede que alguna vez se repita 2 veces la misma
//incluso, si usamos numeros para las imágenes, la script puede ser más sencilla (pero le puse los números después... aghhh)
 
function cambiar(){
document.getElementById("ia").src = cambia_imagen[rand(10)-1];
}
 
//]]>
</script>
</head>
<body>
<p><img id="ia" alt="Imagen aleatoria" src="5.jpg" /></p>
<p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<button onclick="cambiar();">Cambiar imagen</button></p>
<!-- ©2000 Emprear.com -->
</body>
</html>

una demo en
http://foros.emprear.com/jsdemo/ia/cambia_imagen.html

hace bastantes clicks porque solo subi 5 imágenes y por ahi se repiten mucho o no muestra nada

Saludos

angelAparicio · #11 (**permalink**) 22/09/2010, 12:46

Exacto, es como dice emprear. Para que la imagen inicial sea aleatoria lo único que tienes que hacer es que se ejecute la función cambiar() al inicio, usando el onload en el body:

<body onload="cambiar()">

Enjuto · #12 (**permalink**) 22/09/2010, 16:52

Muchas gracias a los dos por las molestias, ante todo.

Finalmente, conseguí (conseguísteis) que funcionara, peeero (sí, hay un odioso "pero"; en realidad son dos, pero el segundo es menos relevante) la imagen no cambia hasta que no ha terminado de cargar por completo (y son gifs) la siguiente, y esto desconcertaría al "clicador" del botón, ya que el pinchar en el botón parece no tener ningún efecto. Y, de este modo, si añado el onload="cambiar()" en el body, se ve primero la imagen "predeterminada" y al rato es cuando cambia por sí sola por una aleatoria. En fin, un caos...

Creo que esto no es lo mío. ¡Ay, Manolete...!

emprear · #13 (**permalink**) 22/09/2010, 17:35

Enjuto:

Vamos por partes.
1. En tu post original, vos nos decís que necesitas un link que cargue imágenes aleatoreas, eso es, ni más ni menos lo que hace el código último que postee, ejemplo incluido.
2. La imágen no cambia hasta que no se ha cargado por completo, muy bien, eso es lógico, para solucionarlo existe esto...
http://www.forosdelweb.com/f4/preloa...7/#post3556944
(usá el JavaScript, no el Css)
3. El botón "no parece tener ningun efecto".... en primer lugar te repito, a esa demo que te puse le faltan imágenes, era una demo justamente, cuando obtiene las img 5,6,7,8,9,... no hace nada). Igualmente, aunque las tuviera, algo de demora siempre habría, y minima si usas lo de la precarga.
4. Señalaste que no querías tener que recargar la página, asi que en el body, NO hay que poner ningun evento, si el de la precarga(), si es que lo implementas.
5. Al margen de todo, vos podrias hacer que:
Se cambie la imagen al cargar la página
Se cambie la imágen con un click
Y también, que se recargue la imágen sin recargar la página y sin hacerle click a nada, cada x cantidad de segundos, digamos

El asunto es que planteas el "que querés hacer", no el para y por que, si conociécemos en forma global tu objetivo, quizás podríamos orientarte de otra manera compañero.

Saludos

Enjuto · #14 (**permalink**) 22/09/2010, 18:06

@emprear A ver... (antes de que esto salga de madre, que no debería):
1. Bueno, sí, OK.
2. Tampoco me interesa la precarga, ya que, si añado muchas imágenes, no quiero que la página esté eternamente cargando. Lo ideal sería que apareciera la imagen nada más pulsar el botón y, a partir de ahí, vaya cargando (de ser necesario).
3. Con "parece no tener ningún efecto" me refería al lapso de tiempo entre pulsar botón y ver nueva imagen (que previamente ha tenido que cargar). Pero hacía referencia a mi caso (y creía que esa referencia era clara tras el "funcionó, pero..."), y no a las imágenes que "no existen" en tu ejemplo, cuya explicación había entendido a la primera. Siento si no me he expresado bien.
4. No. Señalé que quería un enlace/botón con el que tuviera el mismo resultado que recargando la página (es decir, que la imagen cambiara), pero no que se suprimiera esta última función.
5. Completando "4.": Sólo las dos primeras que comentas, a la vez.

No obstante, repito, estoy muy agradecido por la ayuda brindada. Y apunto, de paso, que mi mensaje anterior era simplemente un comentario tras el resultado, no (en absoluto) una queja.

Lamento si resulto cargante/molesto/pesado. Es lo último que deseo.

emprear · #15 (**permalink**) 22/09/2010, 18:34

Enjuto:

amigo, para nada lo tomé como una queja, simplemente, me dió la sensación de que había algunas contradicciones que surgían de la lectura de todo el post, si no, no hubiese concluído mi último comentario con "si conociécemos en forma global tu objetivo, quizás podríamos orientarte de otra manera compañero."

Cualquier consulta, a tu disposición