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.
if you want anyone to write a complicated script for you, then you must supply precise information.
You say that you have three lines of text, then...
1. supply the actual three lines of text.
2. show how the text is exactly to be split into nine segments.
3. provide any other information that may be relevant to the successful creation of the code.
...and, if you are very lucky, you might even get some help.
<!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