Foros del Web » Creando para Internet » HTML »

Imagen aleatoria al pulsar enlace

Estas en el tema de Imagen aleatoria al pulsar enlace en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 21/09/2010, 05:50
 
Fecha de Ingreso: marzo-2008
Mensajes: 19
Antigüedad: 9 años, 9 meses
Puntos: 2
Imagen aleatoria al pulsar enlace

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?
  #2 (permalink)  
Antiguo 21/09/2010, 08:16
 
Fecha de Ingreso: marzo-2008
Mensajes: 19
Antigüedad: 9 años, 9 meses
Puntos: 2
Respuesta: Imagen aleatoria al pulsar enlace

  #3 (permalink)  
Antiguo 21/09/2010, 09:04
Avatar de angelAparicio  
Fecha de Ingreso: julio-2009
Ubicación: Sevilla
Mensajes: 307
Antigüedad: 8 años, 5 meses
Puntos: 22
Respuesta: Imagen aleatoria al pulsar enlace

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 original
  1. function cambiaImagen(){
  2.     XXXX = new Array(3);
  3.     XXXX[0] = "IMAGEN1.jpg";
  4.     XXXX[1] = "IMAGEN2.jpg";
  5.     XXXX[2] = "IMAGEN3.jpg";
  6.     aleatorio = Math.random() * (XXXX.length);
  7.     aleatorio = Math.floor(aleatorio);
  8.     document.getElementById('imagen_aleatoria').src = aleatorio;
  9. }

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.
__________________
Mis webs:
- Programador Web Autónomo
- Conciertos en Sevilla
  #4 (permalink)  
Antiguo 21/09/2010, 15:18
 
Fecha de Ingreso: marzo-2008
Mensajes: 19
Antigüedad: 9 años, 9 meses
Puntos: 2
Respuesta: Imagen aleatoria al pulsar enlace

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).
  #5 (permalink)  
Antiguo 22/09/2010, 03:35
Avatar de angelAparicio  
Fecha de Ingreso: julio-2009
Ubicación: Sevilla
Mensajes: 307
Antigüedad: 8 años, 5 meses
Puntos: 22
Respuesta: Imagen aleatoria al pulsar enlace

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

para que la función se ejecute al cargar la página
__________________
Mis webs:
- Programador Web Autónomo
- Conciertos en Sevilla
  #6 (permalink)  
Antiguo 22/09/2010, 05:31
 
Fecha de Ingreso: marzo-2008
Mensajes: 19
Antigüedad: 9 años, 9 meses
Puntos: 2
Respuesta: Imagen aleatoria al pulsar enlace

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...

Última edición por Enjuto; 22/09/2010 a las 06:40
  #7 (permalink)  
Antiguo 22/09/2010, 11:23
Avatar de angelAparicio  
Fecha de Ingreso: julio-2009
Ubicación: Sevilla
Mensajes: 307
Antigüedad: 8 años, 5 meses
Puntos: 22
Respuesta: Imagen aleatoria al pulsar enlace

¿Puedes poner el código html completo?
__________________
Mis webs:
- Programador Web Autónomo
- Conciertos en Sevilla
  #8 (permalink)  
Antiguo 22/09/2010, 11:30
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Imagen aleatoria al pulsar enlace

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">
<!--
intervalo = 5000;
imgsrc = "foto2.jpg";

function Recarga() {
tmp = new Date();
tmp = "?" + tmp.getTime();
document.images["uno"].src = imgsrc + tmp;
setTimeout("Refresh()", intervalo);
}

Recarga();
// -->
</script>

el html

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


Esta es una variante
<script type="text/javascript">
<!--
function recargar(){
img =document.getElementById('uno');
img.src ='foto2.jpg?' + Math.random();
var t=setTimeout('recargar()',8000);
}
// -->
</script>

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

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #9 (permalink)  
Antiguo 22/09/2010, 12:52
 
Fecha de Ingreso: marzo-2008
Mensajes: 19
Antigüedad: 9 años, 9 meses
Puntos: 2
Respuesta: Imagen aleatoria al pulsar enlace

@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.
  #10 (permalink)  
Antiguo 22/09/2010, 13:34
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Imagen aleatoria al pulsar enlace

ahora lo tengo mas claro

Proba con esto
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" >
  4. <title>Imagen aleatoria</title>
  5. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6. <meta name="description" content="x" />
  7. <meta name="keywords" content="x" />
  8. <meta http-equiv="Content-Language" content="ES-ar" />
  9. <meta name="copyright" content="&copy; 2006, Guillermo Gianello" xml:lang="es" />
  10. <meta name="author" content="http://emprear.com"  xml:lang="es" />
  11. <style type="text/css">
  12. /*<![CDATA[*/
  13.  
  14. img#ia{
  15. border: solid 1px #000;
  16. }
  17.  
  18. /*]]>*/
  19. <script type="text/javascript">
  20. //<![CDATA[
  21.  
  22. function rand(n){
  23. // creamos un numero al azar entre 1 y 10 (o cual sea la cantidad de imágenes)
  24. return(Math.floor(Math.random() * n + 1 ));
  25. }
  26.  
  27. //guardas imagenes en el array
  28. var cambia_imagen = new Array();
  29. cambia_imagen[0] = "0.jpg";
  30. cambia_imagen[1] = "1.jpg";
  31. cambia_imagen[2] = "2.jpg";
  32. cambia_imagen[3] = "3.jpg";
  33. cambia_imagen[4] = "4.jpg";
  34. cambia_imagen[5] = "5.jpg";
  35. cambia_imagen[6] = "6.jpg";
  36. cambia_imagen[7] = "7.jpg";
  37. cambia_imagen[8] = "8.jpg";
  38. cambia_imagen[9] = "9.jpg";
  39.  
  40. //la función para que al clickear establezca el source del tag imagem que tiene id "ia" (Imagen aleatoria)
  41. //como no son tantas, puede que alguna vez se repita 2 veces la misma
  42. //incluso, si usamos numeros para las imágenes, la script puede ser más sencilla (pero le puse los números después... aghhh)
  43.  
  44. function cambiar(){
  45. document.getElementById("ia").src = cambia_imagen[rand(10)-1];
  46. }
  47.  
  48. //]]>
  49. </head>
  50. <p><img id="ia" alt="Imagen aleatoria" src="5.jpg" /></p>
  51. <p><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
  52. <button onclick="cambiar();">Cambiar imagen</button></p>
  53. <!-- ©2000 Emprear.com -->
  54. </body>
  55. </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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #11 (permalink)  
Antiguo 22/09/2010, 13:46
Avatar de angelAparicio  
Fecha de Ingreso: julio-2009
Ubicación: Sevilla
Mensajes: 307
Antigüedad: 8 años, 5 meses
Puntos: 22
Respuesta: Imagen aleatoria al pulsar enlace

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()">
__________________
Mis webs:
- Programador Web Autónomo
- Conciertos en Sevilla
  #12 (permalink)  
Antiguo 22/09/2010, 17:52
 
Fecha de Ingreso: marzo-2008
Mensajes: 19
Antigüedad: 9 años, 9 meses
Puntos: 2
Respuesta: Imagen aleatoria al pulsar enlace

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...!
  #13 (permalink)  
Antiguo 22/09/2010, 18:35
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Imagen aleatoria al pulsar enlace

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
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #14 (permalink)  
Antiguo 22/09/2010, 19:06
 
Fecha de Ingreso: marzo-2008
Mensajes: 19
Antigüedad: 9 años, 9 meses
Puntos: 2
Respuesta: Imagen aleatoria al pulsar enlace

@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.
  #15 (permalink)  
Antiguo 22/09/2010, 19:34
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: Imagen aleatoria al pulsar enlace

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

__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.

Etiquetas: aleatoria, enlace, pulsar
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:35.