Ciao
Prova questo è molto carino e facilmente personalizzabile.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html dir="ltr" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Example of dynamic news upscroller</title>
<style type="text/css">
/* the news box */
#news
{
width:276px;
background:#eee;
} a
{
color:#000;
} ul
{
margin:0 .5em 0 1em;
padding:0;
} li{
line-height:40px;
}
/* the news box when JavaScript is available */.hasJS
{
height:120px;
overflow:hidden;
position:relative;
}
/* The nested UL when JavaScript is available */.hasJS ul
{
position:absolute;
top:120px;
left:0;
margin:0 .5em 0 .5em;
padding:0;
}
#google{
background:url(http://www.google.it/intl/it_it/images/logo.gif)
}
#gt{
background:url(http://www.giorgiotave.it/forum/images/logo.jpg)
}
#claudioweb{
color:#FF0000;
}
</style>
<script type="text/javascript">
<!--
/*
DOMnews 1.0
homepage: http://www.onlinetools.org/tools/domnews/
released 11.07.05
*/
/* Variables, go nuts changing those! */
// initial position
var dn_startpos=120;
// end position
var dn_endpos=-200;
// Speed of scroller higher number = slower scroller
var dn_speed=30;
// ID of the news box
var dn_newsID='news';
// class to add when JS is available
var dn_classAdd='hasJS';
// Message to stop scroller
var dn_stopMessage='Stop scroller';
// ID of the generated paragraph
var dn_paraID='DOMnewsstopper';
/* Initialise scroller when window loads */
window.onload=function()
{
// check for DOM
if(!document.getElementById || !document.createTextNode){return;}
initDOMnews();
// add more functions as needed
}
/* stop scroller when window is closed */
window.onunload=function()
{
clearInterval(dn_interval);
}
/*
This is the functional bit, do not press any buttons or flick any switches
without knowing what you are doing!
*/
var dn_scrollpos=dn_startpos;
/* Initialise scroller */
function initDOMnews()
{
var n=document.getElementById(dn_newsID);
if(!n){return;}
n.className=dn_classAdd;
dn_interval=setInterval('scrollDOMnews()',dn_speed);
var newa=document.createElement('a');
var newp=document.createElement('p');
newp.setAttribute('id',dn_paraID);
newa.href='#';
newa.appendChild(document.createTextNode(dn_stopMessage));
newa.onclick=stopDOMnews;
newp.appendChild(newa);
n.parentNode.insertBefore(newp,n.nextSibling);
n.onmouseover=function()
{
clearInterval(dn_interval);
}
n.onmouseout=function()
{
dn_interval=setInterval('scrollDOMnews()',dn_speed);
}
}
function stopDOMnews()
{
clearInterval(dn_interval);
var n=document.getElementById('news');
n.className='';
n.parentNode.removeChild(n.nextSibling);
return false;
}
function scrollDOMnews()
{
var n=document.getElementById(dn_newsID).getElementsByTagName('ul')[0];
n.style.top=dn_scrollpos+'px';
if(dn_scrollpos==dn_endpos){dn_scrollpos=dn_startpos;}
dn_scrollpos--;
}
--></script>
</head>
<body>
<h2>Demonstration Headlines</h2>
<div id="news">
<ul>
<li id="google"><a href="http://www.google.it/">Google</a></li>
<li id="gt"><a href="http://www.giorgiotave.it/forum/">Forum GT</a></li>
<li id="claudioweb">Claudioweb</li>
</ul>
</div>
</body>
</html>