Cambiar imagen al actualizar mi página y cada ciertos segundos en un mismo script

jlx4 · #1 (**permalink**) 24/07/2012, 21:52

Hola a todos, verán, estoy haciendo una página web y necesito hacer que se cambie una imagen en forma aleatoria en un div que tengo cada vez que se actualice la página y que después que la página esté cargada se cambie cada 5 segundos también en forma aleatoria, o sea, que esté siempre cambiando, y siempre en forma al azar.

Encontré por la red un script maravilloso con un Array bidimensional en javascript, sin embargo, yo no me adjudico su creación porque yo no lo hice,.................este script cambia la imagen en forma aleatoria cada vez que se actualiza la página, además con su link a la página que corresponde, el dilema es que no sé como agregar o modificar en este mismo script que después de esto cambie cada 5 segundos en forma aleatoria las mismas imagenes, como verán no sé mucho javascript, soy nuevo en esto, por eso pido su ayuda, si alguien supiera como hacerlo se lo agradecería mucho. Aquí dejo el script para que lo vean, espero su ayuda por favor:

<SCRIPT LANGUAGE="JavaScript">
width="670";
height="390";

banners = new Array();
banners[0]= new Array("publicidad/1156.png","http://www.enlace1.com");
banners[1]= new Array("publicidad/1441.png","http://www.enlace2.com");
banners[2]= new Array("publicidad/2192.png","http://www.enlace3.com");

totalbanners = banners.length;
var ahora = new Date()
var segundos = ahora.getSeconds()
var ad = segundos % totalbanners;
seleccionado=banners[ad][0];
enlace=banners[ad][1];

document.write('<center>');
document.write('<a href='+enlace+' target="_blank">');
document.write('<img src='+seleccionado+' width='+width+' height='+height+' border="0">');
document.write('</a>');
document.write('</center>');
</SCRIPT>

fjrueda · #2 (**permalink**) 24/07/2012, 22:48

Mire esto ....

Código HTML:

Ver original<html>
<body>
 
<p>Click the button to wait 3 seconds, then alert "Hello".</p>
<p>After clicking away the alert box, an new alert box will appear in 3 seconds. This goes on forever...</p>
<button onclick="myFunction()">Try it</button>
 
<script type="text/javascript">
function myFunction()
{
setInterval(function(){alert("Hello")},3000);
}
</script>
 
</body>
</html>

y para documentacion .... http://www.w3schools.com/js/js_timing.asp

Intentelo y si logra algo le ayudo a terminarlo.

jlx4 · #3 (**permalink**) 28/07/2012, 22:37

Hola fjrueda, te cuento que he estado tratando de hacer el script, pero no me logra salir, leí la documentación que me dejaste pero aún así no me ha salido. No sé como unir bien las cosas, aquí te dejo el script con el que conseguí agregar la misma imagen hacia abajo en vez de cambiarla como debería ser, espero tu ayuda o consejo por favor porque estoy un poco perdido.

<body onLoad="cambiar()">
<SCRIPT LANGUAGE="JavaScript">

width="670";
height="390";

banners = new Array();
banners[0]= new Array("1156.png","http://www.enlace1.com");
banners[1]= new Array("1441.png","http://www.enlace2.com");
banners[2]= new Array("2192.png","http://www.enlace3.com");

function cambiar()
{
totalbanners = banners.length;
var ahora = new Date()
var segundos = ahora.getSeconds()
var ad = segundos % totalbanners;
seleccionado=banners[ad][0];
enlace=banners[ad][1];

document.write('<center>');
document.write('<a href='+enlace+' target="_blank">');
document.write('<img src='+seleccionado+' width='+width+' height='+height+' border="0">');
document.write('</a>');
document.write('</center>');

setInterval("cambiar()",3000)
}
</SCRIPT>
</body>

fjrueda · #4 (**permalink**) 29/07/2012, 17:52

jlx4 ..... pues me parce bien que lo intente.

Utilice identificadores en las etiquetas y con la funcion getElementById puede hacer reusos de las propiedades de la etiqueta.

De esa forma puede cambiar la imagen cada tiempo con set intervalinvocando la propiedad src.

Una forma mas facil de hacerlo es tener las imagenes en la misma carpeta los nombres de las imagenes deben ser enumerados, o una base de datos.

jlx4 · #5 (**permalink**) 30/07/2012, 19:54

Alguna vez han visto un Script que cambie las imágenes de un div al azar, que las imágenes se cambien con sus enlaces incluídos, que las imágenes no sean enumeradas, que las imágenes no estén en una base de datos sino en una carpeta, y que la imagen y su enlace estén en un sólo array de dos dimensiones?,........por mi cuenta les puedo decir que no logré encontrar ningún script con estas características, y por eso, me decidí a crear uno, he buscado y buscado, probado y probado, y creo que casi lo tengo, aunque debo decir que no soy ningún experto en javascript, por eso ahora más que nunca necesito su ayuda, les paso a mencionar lo que sucede con el script:

En el script el cambio al azar funciona, el problema es que dentro del div (en su parte superior) se me muestra en forma escrita la dirección de la imagen con la dirección del enlace, ejemplo: imagen4534.png http://www.enlace2324.com. No se me muestra la imagen con el enlace, y como soy novato no sé que hacer, creo que casi lo tengo pero algo falta y no sé que es, si alguien me puede ayudar a terminarlo se lo agradeceré, de paso quizás a otra persona le puede servir, por mi parte, utilicé innerHTML, no sé si hice bien, pero de otra forma, las imágenes con su respectivo enlace aparecían, pero, aparecían hacia abajo una sobre la otra y no dentro del div, alguien sabe como modificarlo y terminarlo?

<SCRIPT LANGUAGE="JavaScript">
width="670";
height="390";

banners = new Array();
banners[0]= new Array("caballo.png","http://www.enlace1.com");
banners[1]= new Array("flauta.png","http://www.enlace2.com");
banners[2]= new Array("hola.png","http://www.enlace3.com");

function cambiarImagen()
{
var ad = parseInt(Math.random() * banners.length);
seleccionado= banners[ad][0];
enlace= banners[ad][1];
var final= seleccionado + enlace;

document.getElementById('banner').innerHTML= final;
}
setInterval(cambiarImagen,1000)
</SCRIPT>

jlx4 · #6 (**permalink**) 30/07/2012, 19:56

Mira fjrueda:

http://www.forosdelweb.com/f13/script-nunca-antes-visto-1006178/

Panino5001 · #7 (**permalink**) 30/07/2012, 21:28

Temas unidos. jlx4 por favor no crees temas inútilmente.

jlx4 · #8 (**permalink**) 30/07/2012, 21:39

Disculpa Panino5001, sólo quería que saliera más arriba por si alguien me podía ayudar.

fjrueda · #9 (**permalink**) 31/07/2012, 11:09

No cual disculpas, respete Panino, que si vi bien usted es un genio y se jure mucho, este tema le puede interezar 10 mil personas mas y cada persona tiene derecho a preguntar.

Inutil su mensaje.

jlx4 · #10 (**permalink**) 01/08/2012, 12:21

Lo logré fjrueda!!!, me costó pero lo logré, al fin me salió :))), gracias, aquí dejo el script porque puede que haya otra persona que lo necesite y a lo mejor no encuentre a alguien que lo ayude.
Este script deja las imagenes y sus enlaces en un array bidimensional, las imágenes no son enumeradas, sino con su nombre normal y se repite tantas veces como se indica en setinterval, espero les sirva:

<SCRIPT LANGUAGE="JavaScript">

banners = new Array();
banners[0]= new Array("1156.png","http://www.enlace1.com");
banners[1]= new Array("1441.png","http://www.enlace2.com");
banners[2]= new Array("2192.png","http://www.enlace3.com");

function cambiarImagen()
{
var ad = parseInt(Math.random() * banners.length);
seleccionado= banners[ad][0];
enlace= banners[ad][1];
document.getElementById('img').src= banners[ad][0];
document.getElementById('link').href= banners[ad][1];
}
setInterval(cambiarImagen,3000)
</SCRIPT>

<a href="" id="link" target="_blank">
<img src="" id="img" width="770" height="330" border="0">
</a>

Panino5001 · #11 (**permalink**) 01/08/2012, 12:53

Cita:

Iniciado por fjrueda

No cual disculpas, respete Panino, que si vi bien usted es un genio y se jure mucho, este tema le puede interezar 10 mil personas mas y cada persona tiene derecho a preguntar.

Inutil su mensaje.

No entendí bien tu mensaje. Mi comentario sólo era para indicar que estaba uniendo 2 temas creados por jlx4, los cuales tenían un mismo propósito y, por lo tanto, uno de los 2 sobraba. No sé qué habrás entendido. Tampoco es importante que lo aclares.

fjrueda · #12 (**permalink**) 01/08/2012, 13:46

jlx4.

Me parece muy bien, si yo decia que enumerar las imagenes era precisamente para no quemarlas con un nombre propio, a si como las tiene usted habria que venir al codigo y cambiar el nombre de las imagenes cada vez que quiera cambiar la imagen en vez de solo cambiar la imagen y nombrarla con un numero.

Asi como tambien si quiero agregrar una imagen nueva al banner tambien tendria que agragar un posision mas en el array.

Lo que le digo son cocitas para que las tenga en cuenta, pero si me parece bien lo que hizo, randomico y con manejo de link. ... bien.

emprear · #13 (**permalink**) 01/08/2012, 18:57

Cita:

Iniciado por jlx4

Mira fjrueda:

http://www.forosdelweb.com/f13/scrip...visto-1006178/

@jlx4
Te imaginás si todos hiciéramos lo mismo? Por mi parte disculpas aceptadas, pero no lo repitas.

Cita:

Iniciado por Panino5001

No entendí bien tu mensaje. Mi comentario sólo era para indicar que estaba uniendo 2 temas creados por jlx4, los cuales tenían un mismo propósito y, por lo tanto, uno de los 2 sobraba. No sé qué habrás entendido. Tampoco es importante que lo aclares.

@panino5001
Yo lo entendí perfectamente, un verdadero despropósito

@fjrueda
Me llama la atención porque he visto algunos posts interesantes de tu parte.
Nunca es tarde para pedir disculpas

Saludos

jlx4 · #14 (**permalink**) 03/08/2012, 08:01

Fjrueda gracias por los consejos y la información, espero que te vaya muy bien !!!

jlx4 · #15 (**permalink**) 03/08/2012, 08:11

Señor emprear, la razón del título del tema que usted cita era solamente porque nunca había visto un script con las características que mencioné, solamente era por eso, por otra parte, para mí tenía un propósito colocarlo nuevamente para ver si otra persona me podía ayudar, si para usted es un despropósito, es obviamente su punto de vista y es respetable, pero sólo le explico la razón del por qué, no es mi intención criticarlo, así que no piense que lo ataco o algo así, esa no es mi intención, y para finalizar, me sorprendió que haya puesto que aceptaba mis disculpas porque en realidad no iban para usted, entiendo que como colaborador quizás se identifique con el punto de vista de panino5001, tiene sentido obvio porque usted colabora con el foro y en especial con lo que tratan de exigir aquí para mantener un orden, pero, al menos cuando envié las disculpas fueron solamente para panino5001 ya que él era el involucrado. Espero lo entienda, es sin ánimo de ofender, espero le vaya bien, me despido.

emprear · #16 (**permalink**) 03/08/2012, 08:46

@jlx4
mi amigo, lee con más atención, lo del despropósito fué para el usuario @fjrueda, que si se analiza su frase

Cita:

No cual disculpas, respete Panino, que si vi bien usted es un genio y se jure mucho, este tema le puede interezar 10 mil personas mas y cada persona tiene derecho a preguntar.

más una valoración negativa de por medio, desmerece el comentario hecho por @Panino5001, que fué por demás oportuno, ¿acaso pensás que te falto el respeto?
Lo de aceptar tus disculpas, no es más que una consecuencia natural del hecho de subscribir por completo la observación que se te hizo, mi función como colaborador es simplemente esa, colaborar en lo que se pueda en el mantenimiento de un orden en el Foro, y dado el caracter público del mismo, dejar la constancia de tu error puede evitar que otro de los 10000 ó 100000 usuarios que puedan estar interesados en este tema, como lo señala @fjrueda, lo repitan. Me alegra que hayas solucionado tu problema, pero por favor, no mezcles las cosas.
Saludos

El Cipote · #17 (**permalink**) 04/01/2013, 09:58

me intereso este tema y me fue de utilidad, pero solo tengo una pregunta...
¿Como hacer que de entrada aparesca una imagen y luego carge las demas? Ya que al cargar la pagina aparece vacio....