Aconsejenme.script Piramide De Fotos

[epa2]

Hola, uuuuuhhhhhhhhh, la verdad es que no se por donde empezar. Resulta que el otro dia estaba
viendo la tele y tuve de pronto una idea.


a ver si la puedo materializar.


para mi sitio web, me gustaria que la flash page tuviera el siguiente formato....


se trata una especie de piramide construida con una tabla. Entonces en cada celda de la piramide
inserto una fotografia. pero hasta aquí todo es sencillo, ahora viene la caña de españa....


me gustaría que cada fotografia de la piramide de la tabla, cada x segundos (digamos 5 segundos)
se intercambiara aleatoriamente por otra de la misma piramide, por eso quedaría como una piramide
digamos de 10 fotos, intercambiandose cada foto aleatoriamente por otra de la piramide o bien
programarlo para que cada foto se intercambie por otra con distintos tiempos, digamos FOTO1 (cada
5 segundos) FOTO2(cada 7 segundos) por otra foto o bien de la piramide de la tabla o bien por

otra foto de archivo. No se si esto estará inventado, pero me gustaría probar a hacerlo,

lo que ocurre es que necesito tu ayuda, pues en javascript estoy pegado,,,

¿me puedes echar una mano?

Te lo agradezco.

Espero tu respuesta.

Salu2
ByE

[KarlanKas]

Me parece muy interesante... voy a ver...

<embed width="136" height="28" src="http://www.webareyou.com/karlankas.swf"></embebed>

[KarlanKas]

epa2!!

Esto es una versión previaque pongo para que veas que algo he hecho pero que falta mucho por limar. PAra empezar está hecho con capas en vez de dentro de una tabla ya que es más cómodo (estoy del colspan hasta las narices) y luego que cabia aleatoriamente todas las imágenes sin ton ni son pudiendo coincidir varias imágenes a la vez. Pero es un comienzo...

[KarlanKas]

&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Pirámide&lt;/title&gt;
&lt;style&gt;
img{
position : absolute;
height : 60px;
width : 40px;
border : 1px solid #483D8B;}
#Foto1{
top : 30px;
left : 380px;
}
#Foto2{
top : 90px;
left : 360px;

}
#Foto3{
top : 90px;
left : 400px;
}
#Foto4{
top : 150px;
left : 340px;
}
#Foto5{
top : 150px;
left : 380px;

}
#Foto6{
top : 150px;
left : 420px;

}
#Foto7{
top : 210px;
left : 320px;

}
#Foto8{
top : 210px;
left : 360px;
}
#Foto9{
top : 210px;
left : 400px;
}
#Foto10{
top :210px;
left : 440px;
}
&lt;/style&gt;
&lt;script&gt;
imagen= new Array('images1.jpg','images2.jpg','images3.jpg','i mages4.jpg','images5.jpg','images6.jpg','images7.j pg','images8.jpg','images9.jpg','images10.jpg');
numero= new Array;

function cambio(){
for (aa=0; aa&lt;imagen.length; aa++){
numero[aa] = Math.random() * imagen.length
numero[aa] = Math.floor(numero[aa])
}
document.foto1.src=imagen[numero[1]];
document.foto2.src=imagen[numero[2]];
document.foto3.src=imagen[numero[3]];
document.foto4.src=imagen[numero[4]];
document.foto5.src=imagen[numero[5]];
document.foto6.src=imagen[numero[6]];
document.foto7.src=imagen[numero[7]];
document.foto8.src=imagen[numero[8]];
document.foto9.src=imagen[numero[9]];
document.foto10.src=imagen[numero[0]];

setTimeout(&quot;cambio()&quot;,300);
}


&lt;/script&gt;

&lt;/head&gt;

&lt;body onload=&quot;cambio()&quot;&gt;

&lt;img name=&quot;foto[1]&quot; id=&quot;foto1&quot;&gt;
&lt;img name=&quot;foto[10]&quot; id=&quot;foto10&quot;&gt;
&lt;img name=&quot;foto[2]&quot; id=&quot;foto2&quot;&gt;
&lt;img name=&quot;foto[3]&quot; id=&quot;foto3&quot;&gt;
&lt;img name=&quot;foto[4]&quot; id=&quot;foto4&quot;&gt;
&lt;img name=&quot;foto[5]&quot; id=&quot;foto5&quot;&gt;
&lt;img name=&quot;foto[6]&quot; id=&quot;foto6&quot;&gt;
&lt;img name=&quot;foto[7]&quot; id=&quot;foto7&quot;&gt;
&lt;img name=&quot;foto[8]&quot; id=&quot;foto8&quot;&gt;
&lt;img name=&quot;foto[9]&quot; id=&quot;foto9&quot;&gt;
&lt;/body&gt;
&lt;/html&gt;

No sé como meter en un Array los nombres de las imagenes... la verdad es que yo tampoco soy muy bueno con Jaascript...

El caso es que tenemos un comienzo. Sigo con el trabajo!

[KarlanKas]

Poniendo esto al principio de la función cambio evitamos que se repitan las imágenes:

Código:

function cambio(){
for (aa=0; aa<imagen.length; aa++){
numero[aa] = Math.random() * imagen.length 
numero[aa] = Math.floor(numero[aa]) 
for (bb=0;bb<aa;bb++){
if (numero[aa]==numero[bb]){aa=aa-1}
}
}
document.foto1.src=imagen[numero[1]];
...

[epa2]

oye Karlankas, aún no he probado el script porque lo acabo de leer ahora, pero me parece interesante.,


cuando has enviado el último código para evitar que las fotos se repitan, no importa que se repitan las fotos,

por cierto, ¿en que parte del código está el tiempo programado para que se cambien las fotos aleatoriamente?

Te lo digo para personalizarlo luego yo a mi gusto y hacer experimentos.

bueno, no me enrollo más y voy a probar el scritp, luego te digo....

salu2
ByE

[epa2]

Oye Karlankas, no me hagas caso,

soy un patoso, ya he visto donde está la función setimeout que regula el cambio de las imagenes,

pero otra duda que tengo...¿donde ponemos la ruta de las imagenes?
he visto en el script lo siguiente...

document.foto1.src=imagen[numero[1]];
document.foto2.src=imagen[numero[2]];

¿seria así?
document.foto1.src=c:/mis documentos/foto1.jpg[numero[1]];

document.foto2.src=c:/mis documentos/foto2.jpg[numero[2]];

¿seria así la ruta? bueno, espero tu contestación.

voy a ver comprobar el script y luego te digo...

Salu2
ByE

[KarlanKas]

Epa2!

No veas lo entretenido que estuve la noche del domingo con tu pirámide... gracias ;) !

Lo que he hecho ha sido numerar las 10 fotos del 0 al 9 y luego he puesto 10 &quot;marquitos&quot; donde ponerlas. Las 10 fotos son imagen[0], imagen[1], imagen[2]...
y los marcos son foto1, foto2,foto3...

Luego saco de forma aleatoria los números del 0 al 9 y digo que en cada marquito vaya la foto que corresponda con ese número aleatorio.

no sé si me explico...

El src de las fotos está en el Array imagen:

Código:

imagen= new Array('images1.jpg','images2.jpg','images3.jpg','images4.jpg','images5.jpg','images6.jpg','images7.jpg','images8.jpg','images9.jpg','images10.jpg');

Si quieres cambiar la dirección de las fotos hazlo aquí ¿cómo? pues así:

Código:

imagen= new Array('img/casa.jpg','http://www.casa.com/imagen/0043.jpg','fotito.jpg',...);

¿entiendes?

si te es más sencillo puedes poner lo siguiente:

Código:

imagen= new Array;
imagen[0]="casa.jpg";
imagen[1]="peio.jpg";
imagen[2]="img/despa.gif";
...

Si no entiendes pregunta!

[epa2]

Oye Karlankas, de verdad que aprecio mucho la nochecita del domingo que tuvistes.... ;)

Gracias por tu esfuerzo y por las explicaciones

Voy a probar con lo que me has dicho y luego te cuento.

Salu2
ByE

[epa2]

Oye Karlankas, muy bieeeeeeennnnnn

Era justo lo que yo quería, y eso que decía el condenao que no sabia javascript, yo si que no che

mira, una consulta en cuanto a la piramide,

He visto que las imagenes al rotar dejan un hueco vacio donde se muestra la odiosa, maldita y puñetera x.

¿no se podría eliminar esa x?
no che mucho, pero quizás enganchando una imagen vacía o no se..¿¿¿¿

Tambien, ¿como quito el borde de las capas de la piramide y lo hago invisible? porque esto lo has hecho con dreamweaver, ¿verdad?

Espero tu respuesta ansiosamente amigo ;)

Salu2
ByE

posdata: lo del src funciona, lo que pasa es que me muestra en vez de 10 imagenes, me muestra 4 o 5 fotos, no se porque pacha. Estoy en ello.

Thanyou

[KarlanKas]

Estimado Epa2!

Encantado de ayudarte, la verdad es que hacía tiempo que no se planteaba algo interesante en los foros (a parte del trabajo en equipo de caricatos) y lo he hecho de mil amores.

No entiendo porqué te aparece la X eso es que la imagen no existe donde dices, revisa las rutas!!

Respecto a que aparezcan sólo 5 ó 6 fotos puede ser debido a que sólo has metido 5 ó 6 fotos o me equivoco? Tienes que meter todas, las 10 y si quieres que alguna se repita pues métela dos veces vcon distinto número! Recuerda que la dirección de las fotos tienes que meterlas en el array imágenes!

Y respecto al borde, listillo ;) , te diré que programo con el First Page 2000 que es como un editor de texto sólo que colorea el código para que sea más fácil encontrar errores. En realidad el borde lo puse para ver cómo quedaba la pirámide antes de poner las fotos. Si quieres quitar el borde sólo tienes que reemplazar en img{lo siguiente:

Código:

border : 1px solid #483D8B;

con

Código:

border:none;

. Acuerdate de respetar la } del final!!

Revisa la ruta y los nombres de los archivos!! Muchas veces si el servidor es UNIX distingue mayusculas y minusculas en los nombres de los archivos!!

Cuéntame qué tal!!

[KarlanKas]

Lo de la imagen vacía no es mala idea. Cre una imagen gif de un sólo pixel y fondo trasparente. Y así no te aparecerá la x.

[epa2]

oye karlankas, que torpe choy
que torpe choy
que torpe choy
que torpe choy
que torpe choy
mira, pues tienes toda la razón, he revisado el código, me salía lo la x porque no había puesto bien lo de la ruta de las imagenes.

Aún no he probado lo de quitar el borde, lo voy a intentar ahora y luego te cuento.(por cierto, es la primera vez que escucho hablar del First Page 2000 )

Bueno, como vamos progresando, si te parece vamos a pasar al plan B.

Mi idea original que tuve respecto a la piramide cuando vi el anuncio de la tele es la siguiente:

La imagen o logo de mi página centrada en la página,,,,entonces, ¡¡¡¡¡LA PIRAMIDE JUSTO EN LO ALTO TAPANDO TODO MI LOGO O IMAGEN DE LA PÁGINA!!!! :roto:

De tal manera que cuando aleatoriamente SE CANBIA UNA IMAGEN DE LA PIRAMIDE pueda verse mi logotipo justo destras(claro está, se vería solo ese pequeño trozo que se destapa).

esa es mi idea para este proyecto, karlankas, que a medida que se van destapando o CAMBIANDO las fotos, deje un momento breve(DIGAMOS 1 Ó 2 SEGUNDOS) para que se pueda ver el fondo del logotipo aleatoriamente.

¿que te parece? ¿Es posible este proyecto en Javascritp?

Espero tu respuesta. :cantar:

Salu2
ByE


posdata: Voy a probar con el tema de lo del borde.

[KarlanKas]

epa2!
Voy a limpiar las teclas del ordenador y luego me pongo con lo tuyo. Es muy fácil...

Por cierto, nunca tomes un helado delante del ordenador mientras lees la pantalla. El helado se puede caer en las teclas!

[KarlanKas]

La página:

Código:

<html><head>
<style>
#logo{
position:absolute;
height:550px;
width:550px;
top:30px;
left:155px;
background : url('logo.gif'  ) no-repeat fixed center;}
img{
position : absolute;
height : 130px;
width : 130px;
border : none;}
#Foto1{
top : 30px;
left : 335px;}
#Foto2{
top : 160px;
left : 270px;}
#Foto3{
top : 160px;
left : 400px;}
#Foto4{
top : 290px;
left : 205px;}
#Foto5{
top : 290px;
left : 335px;}
#Foto6{
top :290px;
left : 465px;}
#Foto7{
top : 420px;
left : 155px;}
#Foto8{
top : 420px;
left : 285px;}
#Foto9{
top : 420px;
left : 415px;}
#Foto10{
top : 420px;
left : 545px;}
</style>
<script>
imagen= new Array
imagen[0]='images1.jpg';
imagen[1]='nada.gif';
imagen[2]='images3.jpg';
imagen[3]='images4.jpg';
imagen[4]='images5.jpg';
imagen[5]='images6.jpg';
imagen[6]='images7.jpg';
imagen[7]='images8.jpg';
imagen[8]='images9.jpg';
imagen[9]='images10.jpg';
numero= new Array;
function cambio(){
for (aa=0; aa<imagen.length; aa++){
numero[aa] = Math.random() * imagen.length 
numero[aa] = Math.floor(numero[aa]) 
for (bb=0;bb<aa;bb++){if (numero[aa]==numero[bb]){aa=aa-1}}}
document.foto1.src=imagen[numero[1]];
document.foto2.src=imagen[numero[2]];
document.foto3.src=imagen[numero[3]];
document.foto4.src=imagen[numero[4]];
document.foto5.src=imagen[numero[5]];
document.foto6.src=imagen[numero[6]];
document.foto7.src=imagen[numero[7]];
document.foto8.src=imagen[numero[8]];
document.foto9.src=imagen[numero[9]];
document.foto10.src=imagen[numero[0]];
setTimeout("cambio()",1500);}
</script>
</head>
<body onload="cambio()">
<div id="logo">
</div>
<img name="foto1" id="Foto1">
<img name="foto10"  id="Foto10">
<img name="foto2"  id="Foto2">
<img name="foto3"  id="Foto3">
<img name="foto4"  id="Foto4">
<img name="foto5" id="Foto5">
<img name="foto6" id="Foto6">
<img name="foto7"  id="Foto7">
<img name="foto8" id="Foto8">
<img name="foto9" id="Foto9">
</body></html>

[KarlanKas]

Ha cabido de milagro el código entero en el anterior post!!

A ver, la imagen del logo debes ponerla en donde está en negrita &quot;logo.gif&quot; cambias eso por la localización de tu logo.

Como ves, debe haber una imagen que sea nada.gif, que sea una imagen trasparente para que muestre lo que hay detrás.

Dime si es eso lo que quieres. Te pongo un ejemplo en el siguiente botón:


<input type="button" onclick="ventana=window.open('http://www.webareyou.com/Piramide', '', 'width=550,height=550,')" Value="Ver ejemplo">

[epa2]

Oye Karlankas,estas hecho un genio, es increible, ¡¡¡que rapidez!!!

bueno, lo del borde funciona, y funciona todo.

Es justo lo que yo quería, pero solo una preguntilla, je je.

la imagen o logo que metes en el código, ¿lo metes como imagen de fondo en la página o simplemente lo insertas en la página?

Espero tu respuesta.

Te lo digo, porque cuando yo vaya a contruir la piramide con mis medidas personales, me preocupa el tema de situarlo justo encima del logo.

Recibe un abrazo fuerte, monstruo.
ByE

[epa2]

OYE KARLANKAS, QUE BARBARIDAD, ESTAS HECHO UN MONSTRUO, Y DECIAS QUE SABIAS POCO DE JAVASCRIPT, ES JUSTO LO QUE YO QUERIA.

pero tengo una preocupación, he visto en el código que la imagen o logo la has metido como fondo de página (bandground o yo que che)

es que estoy preocupao en el sentido de que cuando vaya a personalizar mi piramide y cambie el tamaño de las capas no se situe justo detrás del dibujo o logo, por que al cambiar de tamaño se desplaza las proporciones.(no se si me explico bien)

la imagen o logo que tu has metido, ¿es como fondo o simplemente has insertado la imagen en la página?

Espero tu respuesta....

Y muchas gracias por tu esfuerzo, de veras.

Recibe un fuerte abrazo....

ByE

[KarlanKas]

epa2!

Veo que nuestro proyecto está tocando a su fin...
En realidad puedes hacerlo de las dos formas, aunque como te lo he puesto yo es como fondo dentro de una capa. La verdad es que podría ser perfectamente una imagen. Para ello sólo tendrías que cambiar el

Código:

<DIV id="logo">
</DIV>

Por

Código:

<img id="logo" src="logo.gif">

y quitar la línea que pone background:... dentro del estilo de #logo.

Y con esto y un bizcocho...

Quedo a la espera de que todo esté correcto... dime lo que creas mejorable!!

[epa2]

OYE KARLANKAS, ERES UN GENIO, ES INCREIBLE, Y ESO QUE DECIAS QUE SABIAS POCO DE JVSCRIPT.

BUENO,ES JUSTO LO QUE YO QUERÍA,PERO ME TIENE PREOCUPADO UN ASUNTO....

LA IMAGEN O LOGO QUE HAS METIDO POR DETRAS DE LA PIRAMIDE ¿ES COMO FONDO DE PAGINA O SIMPLEMENTE HAS INSERTADO UNA IMAGEN EN LA PAGINA?

TE LO DIGO POR QUE ME TIENE PREOCUPAO EL TEMA DE QUE CUANDO YO PERSONALICE LA PIRAMIDE CON OTROS TAMAÑOS, AL CAMBIAR EL TAMAÑO DE LAS CAPAS SE PIERDA UN POCO EL TEMA DE LA IMAGEN CENTRADA O ALINEADA A LA IZQUIERDA.(¿ME EXPLICO?)

BUENO, ESPERO TU RESPUESTA.
OYE Y MUCHAS GRACIAS, ESTE SITIO VALE LA PENA POR PERSONAS COMO TU...

RECIBE UN SALUDO...

[KarlanKas]

epa2!
En este foro hay muchisima gente que me da cien mil vueltas en Javascript. Y lo que nsotros hemos puesto en 100 líneas ellos igual lo habrían podido poner en 40. Pero agradezco tus piropos. ;)

Respecto a la preocupación que te come mira que en todos los estilos ay 2 propiedades (o como quieras llamarlas): top y left. Co ellas puedes modificar la posición de las imágenes. Y con height y width modificas la altura y la anchura de la imagen. Con esto te quiero decir que si la imagen de logo e queda despalzada o demasiado grande o pequeña, siempre puedes colocarla con estos parámetros.

De todas formas seguiré atento por si quieres consultar algo más. Y mi email o MSN están a tu disposición para cualquier pregunta.

Un saludo, personaje!!!

<input type="button" onclick="ventana=window.open('http://www.webareyou.com/Piramide', '', 'width=550,height=550,')" Value="Ver ejemplo">

[KarlanKas]

Vaya, se me ha olvidado modificar la firma y ha salido otra vez el botón... je jee

K a r l a n K a s

[epa2]

KARLANKAS, NO HAGAS CASO DE MI ANTERIOR MENSAJE, POR FA, ME HE EQUIVOCADO Y TE LO HE ENVIADO REPE,

MIRA VOY A METER MANO A ESTO, NO SE CUANTO VOY A TARDAR, PERO TE ASEGURO QUE TE RESPONDO.

CUENTO CONTIGO PARA MÁS ADELANTE POR SI TENGO PROBLEMAS CON ESTE SCRITP.

MUCHAS GRACIAS POR TODO.

SALU2
ByÉ

<html>
<body>
<p align="left"><font color="#FF0000" face="Comic Sans MS" size="2">Aprendiz
de todo y maestro de nada[/CODE]</p>
</body>
</html>

[KarlanKas]

Muy bien, epa2!

Segiré atento el proceso de &quot;adaptación&quot;.

Por cierto, perdona las faltas de ortografía del mensaje anterior. Sé perfectamente que hay de haber es con &quot;h&quot;, pero este teclado falla a veces... creo que he comido demasiados helados aquí delante!!

Si quieres borra los post repetidoss y deja sólo uno, no?

Déjalo! soy un maniatico :-p

Salu2

[tunait]

Pos ala, me voy a meter en este mensaje!!

Karlangas eres un fiera, mis feliciteichons!!

Respecto a lo del teclado doy fe de ello aunque helado no he comido. ´Mi teclado sólo tiene restos de pizzas, bocadillos, tortilla de papas, mucha... mucha ceniza .... y eso por no decir que tengo un palomo viviendo suelto por casa y le encantan los teclados. A veces levanta la cola y... bueno, a limpiar corriendo :P

Epa, recibi tu email, en breve te contesto.

Un saludo a los dos

[KarlanKas]

Yo ahora mismo voy al foro de hardware a preguntar kómo meter la tekla de la letra que va entre la B y la D para que funsione porque me da que me la he kargado. Klaro... tanto helado...

Por sierto, Tunait, grasias por tus piropos, tú si que eres la leshe contestando posts!!

K a r l a n k a s (qué pereza volver a cambiar la firma)

[KarlanKas]

¿Cómo va la adaptación?

[epa2]

Oye Karlankas, la verdad es que tengo el proyecto parao, es que me lo estoy replanteando todo,

empezando con el tema de la piramide,

¿y si fuera en vez de una piramide un cubo con 10 capas o fotos?

Espero tu respuesta....

[KarlanKas]

Al decir cubo te refieres a cuadrado, no? Pero 10 no es cuadrado de nada, si acaso 9 (3imágenes x 3imágenes) incluso 12 (3x4) pero 10... sería 5x2 lo cual es un poco raro. ¿Eso es lo que quieres?

En cualquier caso es fácil. Dime la forma geométrica qeu quieres, el número de imágenes y lo hacemos en un pis pas.

Pensé que igual sería mejor que en vez de mostrar una parte cada vez, que poco a poco fueran desapareciendo los cuadros según se fueran intercambiando las imágenes. Estoy pensando que igual se podría jugar con los efectos para tener un efecto fade (que se vaya apagando y encendiendo con la imagen nueva al más puro estilo flash ;)

En fín, espero tus requisitos...

[epa2]

Pensé que igual sería mejor que en vez de mostrar una parte cada vez, que poco a poco fueran desapareciendo los cuadros según se fueran intercambiando las imágenes. Estoy pensando que igual se podría jugar con los efectos para tener un efecto fade (que se vaya apagando y encendiendo con la imagen nueva al más puro estilo flash ;)

Oye, Karlankas, no es mala idea, lo que ocurre es que siempre este efecto tendría que permitir ver a la imagen que se encuentra por dentras.

;)
Bueno, ¿probamos con 12 imagenes para el cubo o cuadrao?

Este post se está convirtiendo en lo mejor del foro, je je je

AL ATAQUEEEEEEEEEEE :-p :-p

Espero tu respuesta....