Cambiar noticias cada cierto tiempo

Gugu_Tata · #1 (**permalink**) 13/02/2007, 12:37

Hola, tengo 3 noticias y quiero que roten entre si cada 10 segundos por ejemplo. Las noticias tienen una imagen y un texto, y se tienen que ir cambiando una por otra cada cierto tiempo, y a poder ser me gustaría con algún efecto que no lo haga de una forma muy seca.

He encontrado algo similar por ahí, pero no me permite poner código HTML con una tabla por ejemplo, el ejemplo es este: Aquí está

Gracias a los que me echéis una mano, un saludo.

bookmaster · #2 (**permalink**) 13/02/2007, 13:04

Para introducir el código HTML en ese tienes que modificar esto:

Código HTML:

news[1]="<a href='http://www.enlace2.com'>Enlace2</a>"

y ponerlo parecido a esto otro:

Código HTML:

news[1]='<a href="http://www.enlace2.com">Enlace2</a>'

Un ejemplo metiendo el enlace en la tabla

Código HTML:

news[1]='<table width="100" height="50" border="1" bgcolor="#FF0000">Aqui el texto</td><td><img src="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif"></td></tr></table>'

Ejemplo completo:

Código HTML:

<HTML>
<HEAD>
<TITLE>Ejemplo de efecto en noticias</TITLE>
<style>
<!--

#tickertape{
position:relative;

layer-background-color:black;
width:400;
height:12;
}

#subtickertape{
background-color:black;
position:absolute;
border: 1px solid black;
width:400;
height:12;

}


.subtickertapefont{
font:bold 12px Verdana;
text-decoration:none;
color:white;
}

.subtickertapefont a{
color:white;
text-decoration:none;
}
-->
</style>

</HEAD>

	<body onload="if (document.all||document.layers) {regenerate2();update()}">
	<div id="tickertape">
<div id="subtickertape" class="subtickertapefont">Initializing...</div>
</div>

<script language="JavaScript1.2">

/*
Java.Website
*/
//default speed is 4.5 seconds, Change that as desired
var speed=4500

var news=new Array()
news[0]="<a href='http://www..enlace1.net.ar'>Enlace1</a>"
news[1]='<table width="100" height="50" border="1" bgcolor="#FF0000"><a href="http://www.enlace2.com">Enlace2</a></td><td><img src="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif"></td></tr></table>'
news[2]="<a href='http://www.enlace3.com'>Enlace3</a>"
//expand or shorten this list of messages as desired

i=0
if (document.all)
tickerobject=document.all.subtickertape.style
else
tickerobject=document.tickertape.document
function regenerate(){
window.location.reload()
}
function regenerate2(){
if (document.layers)
setTimeout("window.onresize=regenerate",450)
}

function update(){
 BgFade(0xff,0xff,0xff, 0x00,0x00,0x00,10);
if (document.layers){
document.tickertape.document.subtickertape.document.write('<span class="subtickertapefont">'+news[i]+'</span>')
document.tickertape.document.subtickertape.document.close()
}
else 
document.all.subtickertape.innerHTML=news[i]

if (i<news.length-1)
i++
else
i=0
setTimeout("update()",speed)
}

 function BgFade(red1, grn1, blu1, red2,
 grn2, blu2, steps) {
 sred = red1; sgrn = grn1; sblu = blu1; 
 ered = red2; egrn = grn2; eblu = blu2; 
 inc = steps; 
 step = 0; 
 RunFader();
 }
 function RunFader() {
 var epct = step/inc; 
 var spct = 1 - epct; 
 if (document.layers)
 tickerobject.bgColor =
 Math.floor(sred * spct + ered *
 epct)*256*256 +
 Math.floor(sgrn * spct + egrn * epct)*256 +
 Math.floor(sblu * spct + eblu * epct); 
 else
 tickerobject.backgroundColor=
 Math.floor(sred * spct + ered *
 epct)*256*256 +
 Math.floor(sgrn * spct + egrn * epct)*256 +
 Math.floor(sblu * spct + eblu * epct); 
 if ( step < inc ) {
 setTimeout('RunFader()',50); 
 }
 step++;
 }

</script>
</BODY>
</HTML>

Sólo decirte que ese tipo de efectos funcionan con Internet explorer y en otros navegadores pueden fallar.

Gugu_Tata · #3 (**permalink**) 14/02/2007, 03:39

O sea, ¿tengo que cambiar la comilla simple por la doble y viceversa?, es que lo he probado con comillas dobles fuera y simples dentro y no iba bien (o sea, tal y como está lo de enlace 1).

Gracias.

bookmaster · #4 (**permalink**) 14/02/2007, 11:49

Lo que hace es asocias comillas simples y comillas dobles.

Si tu por ejemplo metes un contenido que vaya a llevar muchas comillas dobles como por ejemplo

Código HTML:

<table width="200" height="100" border="0" cellpadding="0" cellspacing="0">

Deberías de ponerlo abriéndolo con comillas simples

Código PHP:

  texto = '<table width="200" height="100" border="0" cellpadding="0" cellspacing="0">';

Ya que para el eso es una frase, si en el caso de tener esto, cambiaremos por ejemplo dentro unas comillas dobles por unas simples, fíjate en el cell padding.

Código PHP:

  <table width="200" height="100" border="0" cellpadding='0' cellspacing="0">

El está interpretando que la frase acaba en
<table width="200" height="100" border="0" cellpadding= y que lo que hay acoontinuacion puede ser una variable, para ese caso tendríamos que hacerlo de la siguiente manera.

Código PHP:

  texto ='<table width="200" height="100" border="0" cellpadding='+0+' cellspacing="0">';

Para que lo cogiera bien, en este caso el 0 lo toma como variable o valor, por lo que hay que añadir los + para que continue poniendo el resto de la "frase".

He llamado frase a la linea esa para que te hagas una idea de como hace los cortes.

Gugu_Tata · #5 (**permalink**) 14/02/2007, 12:10

Nada nada, el truco era que no ponía todo junto, o sea, que ponía:

<table>
<tr>
<td>
</td>
</tr>
</table>

En vez de:

<table><tr><td></td></tr></table>

Ahora tras probarlo me aparece una nueva incertidumbre, no funciona con firefox

, entonces, como supongo que será imposible cambiar este para que funcione con firefox, ¿conocéis algo similar por ahí que funcione con Firefox?

Gracias por vuestro interés, un saludo.

bookmaster · #6 (**permalink**) 14/02/2007, 12:19

El problema de Javascript esque las "frases" son de 1 única linea.

Lo unico que se me ocurre que puedas hacer seria qeu te crearas tu tabla en una capa, al estilo <div id="nombre de capa">aki todo el contenido</div>, y que como valor al New le demos un getElementById("nombre de la capa"), para ver si con eso coje todo tal y como quieres.

No se si funcionaria esactamente pero puedes intentarlo.