4 Imágenes aleatorias en 1 página

duchamp · #1 (**permalink**) 06/12/2003, 15:19

Inicio un nuevo tema aunque la pregunta tiene relación con ESTE post.
Lo que necesito hacer es esto:

1. Tener un directorio con un listado de por ej. 20 imágenes.
2. En el html se deben cargar 4 de esas imágenes al azar (sin repetir ninguna).
3. Se tienen que mostrar en 4 zonas diferentes de la página, no todas en línea.

Sería algo así como "Insertar variable 1 aquí","Insertar variable 2 allá", etc ...

Alguna idea de cómo hacerlo?

Desde ya gracias.

caricatos · #2 (**permalink**) 06/12/2003, 17:29

Hola duchamp:

Dime si te sirve esto:

Código PHP:

  <html> 
<head> 
<title> 
    4 imágenes sin repetir 
</title> 
<script> 
var imagenes = [ 
    "http://www.sucaricatura.com/2002/maxi/2002H001.jpg", 
    "http://www.sucaricatura.com/2002/mini/2002H002.jpg", 
    "http://www.sucaricatura.com/2002/maxi/2002H003.jpg", 
    "http://www.sucaricatura.com/2002/mini/2002H004.jpg", 
    "http://www.sucaricatura.com/2002/maxi/2002H005.jpg", 
    "http://www.sucaricatura.com/2002/mini/2002H006.jpg", 
    "http://www.sucaricatura.com/2002/maxi/2002H007.jpg" 
]; 
 
function azar()    { 
    var temp = new Array(4); 
    temp[0] = Math.floor(Math.random() * imagenes.length); 
    do 
        temp[1] = Math.floor(Math.random() * imagenes.length); 
    while (temp[0] == temp[1]) 
    do 
        temp[2] = Math.floor(Math.random() * imagenes.length); 
    while (temp[0] == temp[1] || temp[0] == temp[2] || temp[1] == temp[2]) 
    do 
        temp[3] = Math.floor(Math.random() * imagenes.length); 
    while (    temp[0] == temp[1] || 
        temp[0] == temp[2] || 
        temp[1] == temp[2] || 
        temp[0] == temp[3] || 
        temp[1] == temp[3] || 
        temp[2] == temp[3] 
) 
//    alert(temp[0] + ", " + temp[1] + ", " + temp[2] + ", " + temp[3]); 
    document.images.imagen1.src = imagenes[temp[0]]; 
    document.images.imagen2.src = imagenes[temp[1]]; 
    document.images.imagen3.src = imagenes[temp[2]]; 
    document.images.imagen4.src = imagenes[temp[3]]; 
} 
</script> 
</head> 
<body onload=azar()> 
<img src="" name=imagen1> 
<img src="" name=imagen2> 
<img src="" name=imagen3> 
<img src="" name=imagen4> 
</body>  
</html>

Si lo pruebas, pon otras imágenes, porque algunas tienen bastante peso.

Saludos

duchamp · #3 (**permalink**) 06/12/2003, 17:58

Caricatos, un millón de gracias!
Funciona a la perfección, lo probé en IE, Firebird, Netscape y Opera.
Me olvidé de mencionar lo de los links en cada imágen, tal como en ese post que mencioné, pero haré el intento a ver si lo consigo por mis medios.

Saludos.

duchamp · #4 (**permalink**) 06/12/2003, 18:08

No van 5 minutos de intentarlo y ya tengo jaqueca! ;-(

caricatos · #5 (**permalink**) 06/12/2003, 18:16

¿Los enlaces son también aleatorio?... ¿Tienen que ver con la imágen?

Puedes crear otro array con los enlaces.

Saludos

duchamp · #6 (**permalink**) 06/12/2003, 18:21

cada imagen tiene un enlace específico:
imagen 1 con enlace 1
imagen 2 con enlace 2, etc.
sigo analizando cómo hacerlo y veo la idea, pero ya llevo + de 10 horas frente a la PC! Creo que debo tomarme un descanso ...

caricatos · #7 (**permalink**) 07/12/2003, 12:59

Hola otra vez:

Un arreglo sencillo es tal como te dije, crear un array con los enlaces, para el ejemplo usé los mismos valores que las imágenes:

Código PHP:

  var enlaces = [ 
    "http://www.sucaricatura.com/2002/maxi/2002H001.jpg", 
    "http://www.sucaricatura.com/2002/mini/2002H002.jpg", 
    "http://www.sucaricatura.com/2002/maxi/2002H003.jpg", 
    "http://www.sucaricatura.com/2002/mini/2002H004.jpg", 
    "http://www.sucaricatura.com/2002/maxi/2002H005.jpg", 
    "http://www.sucaricatura.com/2002/mini/2002H006.jpg", 
    "http://www.sucaricatura.com/2002/maxi/2002H007.jpg" 
];

Luego puse unos links con sus "id" junto a las imágenes:

<a href="" id=enlace1>
<img src="" name=imagen1>
</a>
<a href="" id=enlace2>
<img src="" name=imagen2>
</a>
<a href="" id=enlace3>
<img src="" name=imagen3>
</a>
<a href="" id=enlace4>
<img src="" name=imagen4>
</a>

y por último 4 nuevas lineas en la función de inicialización:

Código PHP:

      document.getElementById("enlace1").href = enlaces[temp[0]]; 
    document.getElementById("enlace2").href = enlaces[temp[1]]; 
    document.getElementById("enlace3").href = enlaces[temp[2]]; 
    document.getElementById("enlace4").href = enlaces[temp[3]];

Saludos

duchamp · #8 (**permalink**) 07/12/2003, 13:10

Gracias maestro. Me has evitado un largo rato de devaneos, y de paso puedo analizarlo y aprender "algo" ...
Ahora lo probaré ...

Saludos

duchamp · #9 (**permalink**) 07/12/2003, 13:58

Ah, claro, se produce un error porque aún hay que modificar la función Azar ...

duchamp · #10 (**permalink**) 07/12/2003, 16:10

No hay caso Caricatos. Lo dejo en tus manos porque ya me doy cuenta que mis conocimientos de javascript son "precámbricos"!!!
Falta algo en la función azar, pero no estoy seguro acerca de lo que hay que modificar. Lo que hice por costumbre es crear un archivo random.js con las funciones y variables, y luego cargarlo en el <head>

caricatos · #11 (**permalink**) 07/12/2003, 16:41

Hola otra vez:

Te había puesto todo por partes...

... pero ahora voy a ponerlo completo (a mi me funciona, aunue solo lo probé en explorer)

Código PHP:

  <html> 
<head> 
<title> 
    4 imágenes sin repetir 
</title> 
<script> 
var imagenes = [ 
    "http://www.sucaricatura.com/2002/maxi/2002H001.jpg", 
    "http://www.sucaricatura.com/2002/mini/2002H002.jpg", 
    "http://www.sucaricatura.com/2002/maxi/2002H003.jpg", 
    "http://www.sucaricatura.com/2002/mini/2002H004.jpg", 
    "http://www.sucaricatura.com/2002/maxi/2002H005.jpg", 
    "http://www.sucaricatura.com/2002/mini/2002H006.jpg", 
    "http://www.sucaricatura.com/2002/maxi/2002H007.jpg" 
]; 
 
var enlaces = [ 
    "http://www.sucaricatura.com/2002/maxi/2002H001.jpg", 
    "http://www.sucaricatura.com/2002/mini/2002H002.jpg", 
    "http://www.sucaricatura.com/2002/maxi/2002H003.jpg", 
    "http://www.sucaricatura.com/2002/mini/2002H004.jpg", 
    "http://www.sucaricatura.com/2002/maxi/2002H005.jpg", 
    "http://www.sucaricatura.com/2002/mini/2002H006.jpg", 
    "http://www.sucaricatura.com/2002/maxi/2002H007.jpg" 
]; 
 
function azar()    { 
    var temp = new Array(4); 
    temp[0] = Math.floor(Math.random() * imagenes.length); 
    do 
        temp[1] = Math.floor(Math.random() * imagenes.length); 
    while (temp[0] == temp[1]) 
    do 
        temp[2] = Math.floor(Math.random() * imagenes.length); 
    while (temp[0] == temp[1] || temp[0] == temp[2] || temp[1] == temp[2]) 
    do 
        temp[3] = Math.floor(Math.random() * imagenes.length); 
    while (    temp[0] == temp[1] || 
        temp[0] == temp[2] || 
        temp[1] == temp[2] || 
        temp[0] == temp[3] || 
        temp[1] == temp[3] || 
        temp[2] == temp[3] 
) 
//    alert(document.links.length); 
    document.getElementById("enlace1").setAttribute("href", enlaces[temp[0]]); 
    document.getElementById("enlace2").href = enlaces[temp[1]]; 
    document.getElementById("enlace3").href = enlaces[temp[2]]; 
    document.getElementById("enlace4").href = enlaces[temp[3]]; 
    document.images.imagen1.src = imagenes[temp[0]]; 
    document.images.imagen2.src = imagenes[temp[1]]; 
    document.images.imagen3.src = imagenes[temp[2]]; 
    document.images.imagen4.src = imagenes[temp[3]]; 
} 
</script> 
</head> 
<body onload=azar()> 
<a href="#" name="enlace1"> 
<img src="" name=imagen1> 
</a> 
<a href="" name=enlace2> 
<img src="" name=imagen2> 
</a> 
<a href="" name=enlace3> 
<img src="" name=imagen3> 
</a> 
<a href="" name=enlace4> 
<img src="" name=imagen4> 
</a> 
</body>  
</html>

Saludos

duchamp · #12 (**permalink**) 07/12/2003, 17:06

Pero si hasta parece magia!!!
Me había equivocado en el ID de un enlace y eso provocaba el error!
Ahora funciona genial, las fotos cargan aleatoriamente en 4 partes diferentes de la página y cada una tiene siempre su enlace correspondiente.
Con una conexión adsl carga en un pestañear, no creo que con un dial-up tarde demasiado, no?

Hasta luego y gracias nuevamente!

batu · #13 (**permalink**) 20/12/2003, 15:30

EstimadoS :
Como lo puede hacer para que las imagenes sean aleatorias con un sistema de tiempo, osea que cada ciertos minutos se vaya haciendo el cambio sólo ..

Atte.,

caricatos · #14 (**permalink**) 21/12/2003, 02:36

Hola batu, bienvenido a los foros

:

Usando la función azar(), me parece que podrías usar algo así:

<body onload=setInterval('azar()', 10000)>

Eso debería llamar a azar cada 10 segundos. Posiblemente haya que hacer una asignación inicial.

Saludos

Tarecito · #15 (**permalink**) 16/07/2004, 12:30

hola a todos. Y si en vez de imagenes tuviera animaciones flash? como haría con los tiempos? lo pregunto porque cada animación tiene duraciones diferentes asi q no podria poner un tiempo x xq sino la animación no se vería completa. Cómo haría en ese caso? Muchas gracias.

caricatos · #16 (**permalink**) 16/07/2004, 16:43

Hola Tarecito:

La verdad es que el tema "Flash" lo tengo descuidado, pero tendría que hacerse de otra manera... Me parece que las animaciones flash generan etiquetas distintas para navegadores distintos, se pueden hacer esperas selectivas (dependiendo de la animación...

)

Creo que tal vez sería mejor hacer la pregunta en un mensaje nuevo, con esta respuesta de referencia y mostrando las animaciones que quieres que se vean...

Saludos

duchamp · #17 (**permalink**) 29/08/2005, 08:18

Caricatos, maestro, ya ha pasado bastante tiempo desde que me diste una mano con esta idea y hoy se me ocurrió "validar" la página donde aún utilizo este script pero me encontré con que me faltaba el atributo ALT en cada imagen!
Lo mas sencillo sería poner algo como

Código HTML:

alt="texto genérico aquí"

pero se me ocurre que algo mejor sería o tener un nuevo grupo de variables con el texto alternativo de cada imagen o re-utilizar la URL asociada a cada imagen e insertarla en el ALT ... creo que lo primero tiene mas lógica.
Me das una mano?

Gracias!

caricatos · #18 (**permalink**) 29/08/2005, 10:30

Hola:

En base al último código;

<html>
<head>
<title>
4 imágenes sin repetir
</title>
<script>
var imagenes = [
"http://www.sucaricatura.com/2002/maxi/2002H001.jpg",
"http://www.sucaricatura.com/2002/mini/2002H002.jpg",
"http://www.sucaricatura.com/2002/maxi/2002H003.jpg",
"http://www.sucaricatura.com/2002/mini/2002H004.jpg",
"http://www.sucaricatura.com/2002/maxi/2002H005.jpg",
"http://www.sucaricatura.com/2002/mini/2002H006.jpg",
"http://www.sucaricatura.com/2002/maxi/2002H007.jpg"
];

var enlaces = [
"http://www.sucaricatura.com/2002/maxi/2002H001.jpg",
"http://www.sucaricatura.com/2002/mini/2002H002.jpg",
"http://www.sucaricatura.com/2002/maxi/2002H003.jpg",
"http://www.sucaricatura.com/2002/mini/2002H004.jpg",
"http://www.sucaricatura.com/2002/maxi/2002H005.jpg",
"http://www.sucaricatura.com/2002/mini/2002H006.jpg",
"http://www.sucaricatura.com/2002/maxi/2002H007.jpg"
];

var alts = [
"mensaje primero",
"mensaje segundo",
"mensaje tercero",
"mensaje cuarto",
"mensaje quinto",
"mensaje sextoo",
"mensaje septimo"
];

function azar() {
var temp = new Array(4);
temp[0] = Math.floor(Math.random() * imagenes.length);
do
temp[1] = Math.floor(Math.random() * imagenes.length);
while (temp[0] == temp[1])
do
temp[2] = Math.floor(Math.random() * imagenes.length);
while (temp[0] == temp[1] || temp[0] == temp[2] || temp[1] == temp[2])
do
temp[3] = Math.floor(Math.random() * imagenes.length);
while ( temp[0] == temp[1] ||
temp[0] == temp[2] ||
temp[1] == temp[2] ||
temp[0] == temp[3] ||
temp[1] == temp[3] ||
temp[2] == temp[3]
)
// alert(document.links.length);
document.getElementById("enlace1").setAttribute("h ref", enlaces[temp[0]]);
document.getElementById("enlace2").href = enlaces[temp[1]];
document.getElementById("enlace3").href = enlaces[temp[2]];
document.getElementById("enlace4").href = enlaces[temp[3]];
document.images.imagen1.src = imagenes[temp[0]];
document.images.imagen2.src = imagenes[temp[1]];
document.images.imagen3.src = imagenes[temp[2]];
document.images.imagen4.src = imagenes[temp[3]];
document.images.imagen1.alt = imagenes[temp[0]];
document.images.imagen2.alt = imagenes[temp[1]];
document.images.imagen3.alt = imagenes[temp[2]];
document.images.imagen4.alt = imagenes[temp[3]];

}
</script>
</head>
<body onload=azar()>
<a href="#" name="enlace1">
<img src="" name=imagen1>
</a>
<a href="" name=enlace2>
<img src="" name=imagen2>
</a>
<a href="" name=enlace3>
<img src="" name=imagen3>
</a>
<a href="" name=enlace4>
<img src="" name=imagen4>
</a>
</body>
</html>

Aunque me parece que el validador no estudia los scripts y pasaría sencillamente poniendo en cada etiqueta un alt genérico (incluso una cadena vacía alt="")

Saludos

duchamp · #19 (**permalink**) 29/08/2005, 10:46

Claro, tienes razón, si miro el Código Fuente ninguno de los parámetros pasados con el script aparecen ahí:

Código HTML:

<a href="#" id="enlace1"><img src="" name="imagen1" alt="" /></a>

es decir que no tiene mucho sentido pasar estas nuevas variables si para el validador serán invisibles! Habría que imprimir esas variables dentro del alt="" ... o dejar un texto genérico como mencioné antes.

tesa · #20 (**permalink**) 14/09/2005, 01:15

Hola,
necesitaba exactamente una función como esta, así que antes que nada gracias por compartirla. Ahora, yo quisiera añanadir un onclick en las imágenes, o en los hrefs, de modo que el tag quedase más o menos así:

< a href="#" onclick="javascript:window.open(....)"><img ...></a>

¿Cómo se haría? lo he probado con el setattribute, pero no me aclaro, me echais una mano??

Gracias por adelantado.

caricatos · #21 (**permalink**) 14/09/2005, 02:37

Hola tesa:

Que bien que te sirva a tí también...

Puedes usar el mismo atributo href pero anteponiendo "javascript:" a tu enlace, porque sino tendrías que añadir return false (a mi no me gusta ese uso a no ser que se trate de una validación...

Puedes cambiar el array de enlaces por cadenas así:

var enlaces = [
"javascript: window.open('http://www.sucaricatura.com/2002/maxi/2002H001.jpg')",
...

Ya que ese array ahora no te va a valer.

Saludos

tesa · #22 (**permalink**) 14/09/2005, 04:25

Perfecto caricatos, muchísimas gracias!!!!!

okakitorimoke · #23 (**permalink**) 21/07/2008, 04:18

Hola, aunque el mensaje es viejo, lo vuelvo a retomar porque tengo una duda sobre este mismo tema.

Estoy intentando utilizar este codigo, para cargar swf's independientes en vez de imagenes, pero no funciona cambiando las extensiones .jpg por .swf...

Solo funciona si son imágenes?, sabéis que cambio habría que hacer en caso de swf's?

Un saludo.