jueves, 11 de junio de 2009

Marquesina (desplazamiento) de imagenes o texto con JAVASCRIPT

En donde desees poner la marquesina con el texto o las imagenes poner este texto o si lo deseais poner más ordenado poner el siguiente texto en un fichero a parte html y en donde querais ponerlo incluir el fichero ese con :

<?include("desplegable.html");?>

El fichero 'desplegable.html' contendra:

<div style="position:absolute;width:260px;height:295px;margin:310px 650px;">
<script type="text/javascript">
var messages=new Array();
<?for($i=0;$i<10;$i++){
$datos=mysql_fetch_array($rs);?>
messages[<?=$i?>]="<img src='imagenes.png' />"
<?}?>
var scrollerdelay='4500'
var scrollerwidth='260px'
var scrollerheight='260px'
var scrollerbgcolor=''
var scrollerbackground=''

var ie=document.all
var dom=document.getElementById

if (messages.length>2)
i=2
else
i=0

function move(whichdiv)
{
tdiv=eval(whichdiv)
if (parseInt(tdiv.style.top)>0 && parseInt(tdiv.style.top)<= 5)
{
tdiv.style.top=0+"px"
setTimeout("move(tdiv)",scrollerdelay)
setTimeout("move2(second2_obj)",scrollerdelay)
return
}
if (parseInt(tdiv.style.top)>=tdiv.offsetHeight*-1)
{
tdiv.style.top=parseInt(tdiv.style.top)-5+"px"
setTimeout("move(tdiv)",5)
}
else
{
tdiv.style.top=parseInt(scrollerheight)+"px"
tdiv.innerHTML=messages[i]
if (i==messages.length-1)
i=0
else
i++
}
}

function move2(whichdiv)
{
tdiv2=eval(whichdiv)
if (parseInt(tdiv2.style.top)>0 && parseInt(tdiv2.style.top)<=5)
{
tdiv2.style.top=0+"px"
setTimeout("move2(tdiv2)",scrollerdelay)
setTimeout("move(first2_obj)",scrollerdelay)
return
}
if (parseInt(tdiv2.style.top)>=tdiv2.offsetHeight*-1)
{
tdiv2.style.top=parseInt(tdiv2.style.top)-5+"px"
setTimeout("move2(second2_obj)",5)
}
else
{
tdiv2.style.top=parseInt(scrollerheight)+"px"
tdiv2.innerHTML=messages[i]
if (i==messages.length-1)
i=0
else
i++
}
}

function startscroll()
{
first2_obj=ie? first2 : document.getElementById("first2")
second2_obj=ie? second2 : document.getElementById("second2")
move(first2_obj)
second2_obj.style.top=scrollerheight
second2_obj.style.visibility='visible'
}

if (iedom)
{
document.writeln('<div id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hidden;background-image:url('+scrollerbackground+')">')
document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';left:0px;top:0px">')
document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:1px;">')
document.write(messages[0])
document.writeln('</div>')
document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0px;top:0px;visibility:hidden">')
document.write(messages[dyndetermine=(messages.length==1)? 0 : 1])
document.writeln('</div>')
document.writeln('</div>')
document.writeln('</div>')
}

if (window.addEventListener)
window.addEventListener("load", startscroll, false)
else
if (window.attachEvent)
window.attachEvent("onload", startscroll)
else
if (iedom)
window.onload=startscroll

</script>
</div>


En el 'messages' poner las imagenes o texto que desees.

No hay comentarios:

Publicar un comentario