Cómo hacer una Barra o Box de noticias scroleable?

[tripiyon]

Código:

var det = false
var hayIma, claseIma
function escribe(){
document.write ('<div id="mami" style="width:' + ancho + '; height:' + alto + 'px; position:relative;  overflow:hidden ">')
document.write('<table bgcolor="' + fondo + '" border = "' + marco + '" width="' + ancho + '" height="100%"><tr><td valign="top">')
document.write ('<div id="uno" style="top:' + alto +'; width:' + ancho + ' height:' + alto + 'px;  ">')
document.write ('<div class="titular">')
document.write (noticias[0].titular)
document.write ('</div>')
if(noticias[0].imagen != null){
	hayIma = true
	claseIma = 'imagen'
	}
else{
	hayIma = false
	claseIma = 'noImagen'
	}
document.write ('<div class="' + claseIma + '">')
document.write ('<img src="' + noticias[0].imagen + '">')
document.write ('</div>')
document.write ('<div class="fecha">')
document.write (noticias[0].fecha)
document.write ('</div>')
document.write ('<div class="texto">')
document.write (noticias[0].texto)
document.write ('</div>')
if(masInfo == true){
	document.write ('<a class="enlace" href="')
	document.write (noticias[0].enlace)
	document.write ('" target="' + destino + '">más información...</a>')
	}
document.write ('</div>')
document.write ('<div id="dos" style="top:' + (alto*2) +'; width:' + ancho + ' height:' + alto + 'px; ">')
document.write ('<div class="titular">')
document.write (noticias[1].titular)
document.write ('</div>')
if(noticias[1].imagen != null){
	hayIma = true
	claseIma = 'imagen'
	}
else{
	hayIma = false
	claseIma = 'noImagen'
	}

document.write ('<div class="' + claseIma + '">')
document.write ('<img src="' + noticias[1].imagen + '">')
document.write ('</div>')
document.write ('<div class="fecha">')
document.write (noticias[1].fecha)
document.write ('</div>')
document.write ('<div class="texto">')
document.write (noticias[1].texto)
document.write ('</div>')
if(masInfo == true){
	document.write ('<a class="enlace" href="')
	document.write (noticias[1].enlace)
	document.write ('" target = "' + destino + '">más información...</a>')
	}
document.write ('</div>')
document.write('</td></tr></table>')
document.write ('</div>')
if(navigator.appName == "Netscape")
{altoUno = document.getElementById('uno').offsetHeight}
else
{altoUno = document.getElementById('uno').clientHeight}
document.getElementById('uno').onmouseover =function(){
	det = true
	clearTimeout(tiempo)
	}
document.getElementById('uno').onmouseout =function(){
	det = false;
	clearTimeout(tiempo)
	escrolea()
	}

document.getElementById('dos').onmouseover =function(){
	det = true
	clearTimeout(tiempo)
	}
document.getElementById('dos').onmouseout =function(){
	det = false;
	clearTimeout(tiempo)
	 escrolea()
	 
	}
}
desp = 1
var cont = 1
var pos,pos2
function escrolea(){
pos = document.getElementById('uno').style.top
pos = pos.replace(/px/,"");
pos = pos.replace(/pt/,"");
pos = new Number(pos);
pos2 = document.getElementById('dos').style.top
pos2 = pos2.replace(/px/,"");
pos2 = pos2.replace(/pt/,"");
pos2 = new Number(pos2);
pos -= desp
pos2 -= desp

if (pos == desp){
	var contenidos = ""
	document.getElementById('dos').style.top = alto
	document.getElementById('dos').childNodes[0].firstChild.nodeValue  = noticias[cont].titular
	if(noticias[cont].imagen != null){
		document.getElementById('dos').childNodes[1].firstChild.src = noticias[cont].imagen
		document.getElementById('dos').childNodes[1].className = 'imagen'
		}
	else{
		document.getElementById('dos').childNodes[1].className = 'noImagen'
		}
	if(poneFecha == true){
	document.getElementById('dos').childNodes[2].firstChild.nodeValue  = noticias[cont].fecha
	}
	document.getElementById('dos').childNodes[3].firstChild.nodeValue  = noticias[cont].texto
		if(masInfo == true){
		document.getElementById('dos').childNodes[4].href = noticias[cont].enlace 
		}
	document.getElementById('uno').style.top = 0
	if(cont == noticias.length-1)
		{cont=0}
	else{
		cont++
		}
	pausa()
	return false
	}
else{
	if (pos2 == desp){
		var contenidos = ""
		document.getElementById('uno').style.top = alto
		document.getElementById('uno').childNodes[0].firstChild.nodeValue  = noticias[cont].titular
		if(noticias[cont].imagen != null){
		document.getElementById('uno').childNodes[1].firstChild.src = noticias[cont].imagen
		document.getElementById('uno').childNodes[1].className = 'imagen'
		}
	else{
		document.getElementById('uno').childNodes[1].className = 'noImagen'
		}
		if(poneFecha == true){
		document.getElementById('uno').childNodes[2].firstChild.nodeValue  = noticias[cont].fecha
		}
		document.getElementById('uno').childNodes[3].firstChild.nodeValue  = noticias[cont].texto
		if(masInfo == true){
		document.getElementById('uno').childNodes[4].href  = noticias[cont].enlace
		}
		document.getElementById('dos').style.top = 0
		if(cont == noticias.length-1)
		{cont=0}
	else{
		cont++
		}
		pausa()
		return false
		}
	else{
		document.getElementById('uno').style.top = pos
		document.getElementById('dos').style.top = pos2
		}
	}
tiempo = window.setTimeout('escrolea()',50)
}
var tiempo
function pausa()
{
clearTimeout(tiempo)
if (det == false){
	tiempo = setTimeout ('continuar()',2000)
	}
}
function continuar()
{
if(det == false)
	{escrolea()}
}

document.write('<style type="text/css">')
document.write ('#uno {')
document.write ('color: #006699;')
if(cursor == "pointer" || cursor == "hand"){
cursor = (navigator.appName == "Netscape")?'pointer;':'hand;';
}
document.write ('cursor:' + cursor + ";")
document.write ('position:absolute;}')
document.write ('#dos {')
document.write ('color: #006699;')
document.write ('cursor:' + cursor + ";")
document.write ('position:absolute;}')
document.write ('.titular{')
document.write ('color:' + colTitular +';')
document.write ('font-family:' + fuente + ';')
document.write ('font-size :' + tamTitular + ';font-weight:bold}')
document.write ('.texto{')
document.write ('color:' + colTexto + ';')
document.write ('font-family:' + fuente + ';')
document.write ('font-size:' + tamTexto + ';}')
if(poneFecha == true){
document.write ('.fecha{')
document.write ('color:' + colFecha +';')
document.write ('font-family:' + fuente + ';')
document.write ('font-size :' + tamFecha + ';font-weight:bold}')
}
else{
document.write ('.fecha{display: none;}')
}
document.write ('.enlace{')
document.write ('color:' + colEnlace + ';')
document.write ('font-family:' + fuente + ';')
document.write ('font-size:' + tamEnlace + ';}')
document.write ('.imagen{')
document.write ('text-align:' + alinImagen + ';')
document.write ('margin: ' + margImagen + 'px;}')
document.write ('.noImagen{display:none;}')
document.write ('</style>')
</script>
			  <tr> 
                <td><div align="center">
                     <p><script>escribe()</script>;</p>
                </div></td>
              </tr>
			  <tr> 
                <td class="menuhead" height="30"><img src="{template_url}/images/spacer.gif" alt="" width="19" height="19" /></td>
              </tr>
            </table></td>
        </tr>
        <tr> 
          <td><table width="155" border="0" cellspacing="0" cellpadding="0">
              <tr> 
                <td  height="20" valign="top" > <div align="center"> 
                    <table width="155" border="0" cellpadding="5" cellspacing="0">
                      <tr> 
                        <td class="menuhead2"><div align="center"><font color="#000000"><strong>:: 
                            {lang_random_image} ::</strong></font></div></td>
                      </tr>
                    </table>
                  </div></td>
              </tr>
              <tr> 
                <td align="center" > <br />
                  {random_image} {endif random_image} <br /></td>
              </tr>
            </table> 
        <tr> 
          <td class="menuhead" height="30"><img src="{template_url}/images/spacer.gif" alt="" width="19" height="19" /></td>
        </tr>
      </table></td>
        
    <td width="19" rowspan="5"><img src="{template_url}/images/spacer.gif" alt="" width="19" height="8"></td>
    <td width="100%" rowspan="2" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="1">
                    <tr> 
                      <td height="25" valign="top"> <table width="100%" border="0" cellspacing="0" cellpadding="0">
                          <tr> 
                            <td width="24" height="25" valign="top"><img name="head2" src="templates/4images_dark/images/head2.gif" width="24" height="25" border="0" alt=""></td>
                            <td width="100%" valign="top"><table width="100%" border="0" cellpadding="6" cellspacing="0">