Foros del Web » Programando para Internet » Javascript »

Banner Cambiante

 Estas en el tema de Banner Cambiante en el foro de Javascript en Foros del Web. Buen dia, mi pregunta es la siguiente: Necesito hacer un banner, de 200x200, donde tenga 3 imagenes diferentes, que cambien cada 10 segundos, pero al ...
  #1 (permalink)  
Antiguo 15/05/2009, 03:02
 
Fecha de Ingreso: febrero-2004
Ubicación: ensenada
Mensajes: 94
Antigüedad: 21 años, 1 mes
Puntos: 1
Exclamación Banner Cambiante
Buen dia, mi pregunta es la siguiente:

Necesito hacer un banner, de 200x200, donde tenga 3 imagenes diferentes, que cambien cada 10 segundos, pero al picarle a cada una de las imagenes, mande a su respectivo link. Hay alguna forma de hacer esto, y como podria hacerlo?..

un saludo.
__________________
Siempre es más fácil hacerlo de la forma más difícil........ :ojotes:
  #2 (permalink)  
Antiguo 15/05/2009, 07:13
Avatar de David
Moderador
  
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.720
Antigüedad: 19 años, 10 meses
Puntos: 839
Respuesta: Banner Cambiante
Se puede, hay muchos ejemplos ya hechos que te puede servir. Busca por rotar banners javascript.
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 15/05/2009, 14:46
 
Fecha de Ingreso: febrero-2004
Ubicación: ensenada
Mensajes: 94
Antigüedad: 21 años, 1 mes
Puntos: 1
Respuesta: Banner Cambiante
Buen dia, pues busque como me comentaste y encontre un codigo, lo que no se como hacer, es que el banner se cambie solo, es lo que necesito, que solo este cambiando, el codigo que tengo si lo cambia, pero solo si preciono F5 y cargo la pagina de nuevo. Dejo el codigo para ver si alguien me dice en que estoy mal.

<script language="JavaScript">

<!--
var cuantosbanners = 2 ;
var ahora = new Date()
var segundos = ahora.getSeconds()
var banner = segundos % cuantosbanners;
banner +=1;

if (banner==1) {
url=" http://www.tampicovip.com ";
alt=" Texto si no hay imagen ";
imagen=" banner1.jpg ";
width=" 485 ";
height=" 251 ";
}


if (banner==2) {
url=" http://www.goodartco.com ";
alt=" Texto si no hay imagen 2 ";
imagen=" banner2.gif ";
width=" 485 ";
height=" 251 ";
}

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

//-->
</script>
__________________
Siempre es más fácil hacerlo de la forma más difícil........ :ojotes:
  #4 (permalink)  
Antiguo 15/05/2009, 15:33
 
Fecha de Ingreso: abril-2009
Mensajes: 53
Antigüedad: 15 años, 10 meses
Puntos: 1
Respuesta: Banner Cambiante
Mira creo estar buscando lo mismo que vos, un banner de por ej 4 imagenes que cambien solas cada X cantidad de segundos, bueno encontre este codigo que anda perfecto en Internet Explorer pero no me anda en Firefox y justo iba a recurrir al foro para consultar:

Código PHP:
<HTML>
<HEAD>
</HEAD>
<STYLE>
.imagen {margin-top: -100px}
</STYLE>
<BODY onload="inicial(), inicia_giro()" bgcolor=black>
<center><br><br><br><br><br><br>
<img class=imagen id=t1 src="imagen1.jpg"><br>
<img class=imagen id=t2 src="imagen2.jpg"><br>
<img class=imagen id=t3 src="imagen3.jpg"><br>
<img class=imagen id=t4 src="imagen4.jpg"><br>
</center>

<script>
function inicial() {
    window.t1.style.visibility="visible";
    window.t2.style.visibility="hidden";
    window.t3.style.visibility="hidden";
    window.t4.style.visibility="hidden";
}
function inicia_giro() {
    window.setInterval("fases()", 3000); //serian 3 segundos
    
}
function fases() {
    if(window.t1.style.visibility=="visible") {
        window.t1.style.visibility="hidden";
        window.t2.style.visibility="visible";
        window.t3.style.visibility="hidden";
        window.t4.style.visibility="hidden";
    } else if(window.t2.style.visibility=="visible") {
        window.t1.style.visibility="hidden";
        window.t2.style.visibility="hidden";
        window.t3.style.visibility="visible";
        window.t4.style.visibility="hidden";
    } else if(window.t3.style.visibility=="visible") {
        window.t1.style.visibility="hidden";
        window.t2.style.visibility="hidden";
        window.t3.style.visibility="hidden";
        window.t4.style.visibility="visible";
    } else if(window.t4.style.visibility=="visible") {
        window.t1.style.visibility="visible";
        window.t2.style.visibility="hidden";
        window.t3.style.visibility="hidden";
        window.t4.style.visibility="hidden";
    }
}
</script>

</BODY>
</HTML> 
Buscando por ahi encontre alguien q tenia el mismo problema, y le sugirieron agregar a la parte de
function inicia_giro() {
window.setInterval("document.fases()", 3000);
}

lo probe y directamente no anda, me da error, asi que no puedo hacerlo andar en Firefox.
Desde ya muchas gracias.
Un saludo

Germán
  #5 (permalink)  
Antiguo 15/05/2009, 16:17
 
Fecha de Ingreso: abril-2009
Mensajes: 53
Antigüedad: 15 años, 10 meses
Puntos: 1
Respuesta: Banner Cambiante
Continuando con la busqueda encontre algo q parece interesante, el error estaria en la forma de querer hacer visibles(y ocultos) las imagenes, lei que no se puede hacer en firefox lo siguiente,
window.t1.style.visibility
debo hacerlo de esta manera,
document.getElementById('t1').style.visibility

lo hice, pero sigue pasando lo mismo, anda en IE pero no en Firefox
  #6 (permalink)  
Antiguo 15/05/2009, 16:28
 
Fecha de Ingreso: abril-2009
Mensajes: 53
Antigüedad: 15 años, 10 meses
Puntos: 1
Respuesta: Banner Cambiante
SOLUCIONADO!
Perdon por lo que escribi arriba, si estaba ahi el error, solo que me habia olvidado de cambiar algunos window.t1.style.visibility por document.getElementById('t1').style.visibility

Bueno aca les dejo el codigo terminado, anda perfecto, le hice un cambio, suprimi la funcion inicia_giro() y le hice a fases() una llamada recursiva, al final con un intervalo de 2 segundos.
Para cambiar este lapso de tiempo solo hace falta cambiar el 2000(q son milisegundos) por la cantidad que quieran, 4000 serian 4 segundos window.setTimeout("fases()", 2000)

Código PHP:
<HTML>
<HEAD>
</HEAD>
<STYLE>
.imagen {margin-top: -100px}
</STYLE>
<BODY onload="inicial(), fases()" bgcolor=black>
<center><br><br><br><br><br><br>
<img class=imagen id=t1 src="imagen1.jpg"><br>
<img class=imagen id=t2 src="imagen2.jpg"><br>
<img class=imagen id=t3 src="imagen3.jpg"><br>
<img class=imagen id=t4 src="imagen4.jpg"><br>
</center>

<script>
function inicial() {
    document.getElementById('t1').style.visibility="visible";
    document.getElementById('t2').style.visibility="hidden";
    document.getElementById('t3').style.visibility="hidden";
    document.getElementById('t4').style.visibility="hidden";
}


function fases() {
    if(document.getElementById('t1').style.visibility == "visible") {
        document.getElementById('t1').style.visibility="hidden";
        document.getElementById('t2').style.visibility="visible";
        document.getElementById('t3').style.visibility="hidden";
        document.getElementById('t4').style.visibility="hidden";
    } else if(document.getElementById('t2').style.visibility == "visible") {
        document.getElementById('t1').style.visibility="hidden";
        document.getElementById('t2').style.visibility="hidden";
        document.getElementById('t3').style.visibility="visible";
        document.getElementById('t4').style.visibility="hidden";
    } else if(document.getElementById('t3').style.visibility == "visible") {
        document.getElementById('t1').style.visibility="hidden";
        document.getElementById('t2').style.visibility="hidden";
        document.getElementById('t3').style.visibility="hidden";
        document.getElementById('t4').style.visibility="visible";
    } else if(document.getElementById('t4').style.visibility == "visible") {
        document.getElementById('t1').style.visibility="visible";
        document.getElementById('t2').style.visibility="hidden";
        document.getElementById('t3').style.visibility="hidden";
        document.getElementById('t4').style.visibility="hidden";
    }
    window.setTimeout("fases()", 2000);
}


</script>

</BODY>
</HTML> 
El codigo original lo saque de lawebdelprogramador

Espero que les sirva, un abrazo!
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 11:39.