1st run all the "1" become yellow and the rest all in black
2nd run all the "1" back to black but all the "2" become yellow
3rd run all the "2" back to black but all the "3" become yellow
and so on.. until "9" become yellow and the rest in black.
In other words, the "yellow" color running across the 3 rows of
text. Then the loop repeat again.
Thank for the script, the idea is correct but I'm getting a red $0 across the text
The "$0" should be replaced with the original text, eg
The "1" should be red (the rest are black) then next the "2" should red (the rest are black),
somehow we need to remember the single char that need to change color along the way.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
</head>
<body>
<div id="tst" >
<div >LIne 1</div>
<div >LIne 2</div>
<div >LIne 3</div>
</div>
<br />
<div id="tst1" >
<div >LIne 1</div>
<div >LIne 2 Line 2</div>
<div >LIne 3</div>
</div>
<br />
<div id="tst2" style="background-color:#FFFFCC;" onmouseover="LineColor('tst2');" onmouseout="LineColor('tst2','run');">
<div > LIne 1 LIne 1 LIne 1 LIne 1 LIne 1 LIne 1 LIne 1 LIne 1</div>
<div > LIne 2 LIne 2 LIne 2 LIne 2 LIne 2 LIne 2 LIne 2 LIne 2</div>
<div > LIne 3 LIne 3 LIne 3 LIne 3 LIne 3 LIne 3 LIne 3 LIne 3</div>
</div>
<script type="text/javascript">
/*<![CDATA[*/
function LineColor(id,col1,col2,ms){
var o=LineColor[id],obj=document.getElementById(id);
if (!o&&obj){
var clds=obj.childNodes,html,ary=[],cnt=0,max=0,s,z0=0,z1a;
for (;z0<clds.length;z0++){
if (clds[z0].nodeType==1){
html=clds[z0].innerHTML.split('');
clds[z0].innerHTML='';
ary[cnt]=[];
for (z0a=0;z0a<html.length;z0a++){
s=document.createElement('SPAN');
s.innerHTML=html[z0a];
s.style.color=col1;
clds[z0].appendChild(s);
if (html[z0a]!=' '){
ary[cnt].push(s);
}
}
max=Math.max(ary[cnt].length,max);
cnt++;
}
}
o=LineColor[id]={
ary:ary,
max:max,
c:[col1,col2],
ms:ms,
cnt:0
}
}
if (o){
clearTimeout(o.to);
if (typeof(col1)=='string'){
o.to=setTimeout(function(){
for (var z0=0;z0<o.ary.length;z0++){
if (o.ary[z0][o.cnt]){
o.ary[z0][o.cnt].style.color=o.c[0];
}
}
o.cnt=++o.cnt%o.max;
for (var z1=0;z1<o.ary.length;z1++){
if (o.ary[z1][o.cnt]){
o.ary[z1][o.cnt].style.color=o.c[1];
}
}
LineColor(id,'run');
},o.ms);
}
}
}
LineColor('tst','black','red',1000);
LineColor('tst1','black','red',1000);
LineColor('tst2','red','black',100);
/*]]>*/
</script>
</body>
</html>
Reply With Quote
Bookmarks