Text Highlighter

Each word in this first example will highlight in red
 Try Me
Each word in this second example will highlight in blue
 Try Me
The background of each word in this third example will highlight in white
 Try Me
The background and colour of each word in this fourth example will highlight
 Try Me
This example will show a red solid border and uses the default speed
 Try Me
Each word in this sixth example will underline
 Try Me

As you can see from the above examples you can have quite a few effects depending on which attributes you use.

The basic script

Any number of divs can be used simply by passing the divs ID to the function
onclick="initStr('divID)"

The default speed value is initially set for all the effects but you can change the speed for each individual div by using a second argument and passing the required speed to the function. If the script detects this second argument it will use that value for the speed
Without speed:- onclick="initStr('divID)"
With speed:- onclick="initStr('divID',450)" 

<script type="text/javascript">

// Jeff
//www.huntingground.freeserve.co.uk

defaultSpeed=500
endPause=defaultSpeed

function initStr(id,speed){
if(running==1){return}
running=1

savedStr=document.getElementById(id).innerHTML
tempStr=document.getElementById(id).innerHTML.split(" ")
document.getElementById(id).innerHTML=""

for(var i=0;i<tempStr.length;i++){
document.getElementById(id).innerHTML+="<span id=\"sp"+i+"\">"+tempStr[i]+" </span>"
}

if(speed){
Speed=speed
}
else{
Speed=defaultSpeed
}

ID=id
applyEffect()
}

count=0
running=0
last=null
timer=null
function applyEffect(){

document.getElementById("sp"+count).style.color="#FF0000"
if(last!=null){
document.getElementById("sp"+last).style.color=""
}

timer=setTimeout("applyEffect()",Speed)

last=count

count++
if(count==tempStr.length){
clearTimeout(timer)
count=0
last=null
setTimeout("document.getElementById(ID).innerHTML=savedStr ; running=0",endPause)
}

}

</script>

<h1>Example Divs</h1>

<P><div id="display1">
Each word in this example will highlight in red<br>
</div>

<P><a href="#null" onclick="initStr('display1')">Example 1</a>

<P><div id="display2">
Each word in this example will highlight in red<br>
</div>

<P><a href="#null" onclick="initStr('display2',100)">Example 2</a>

<P><div id="display3">
Each word in this example will highlight in red<br>
</div>

<P><a href="#null" onclick="initStr('display3',300)">Example 3</a>

Advanced Script

To incorporate different effects the advanced version uses the Switch statement where any number of effects can be defined.
There are three arguments passed to the function

onclick="initStr('divID',effectNumber,speed)"

As with the basic script the default speed value is initially set for all the effects but you can change the speed for each individual div by using the third argument and passing the required speed to the function. If the script detects this third argument it will use that value for the speed
Without speed:- onclick="initStr('divID',effectNumber)"
With speed:- onclick="initStr('divID',effectNumber,speed)" 

<script type="text/javascript">

defaultSpeed=500
endPause=defaultSpeed

function initStr(id,effectNum,speed){
if(running==1){return}
running=1

savedStr=document.getElementById(id).innerHTML
tempStr=document.getElementById(id).innerHTML.split(" ")
document.getElementById(id).innerHTML=""

for(var i=0;i<tempStr.length;i++){
document.getElementById(id).innerHTML+="<span id=\"sp"+i+"\">"+tempStr[i]+" </span>"
}

if(speed){
Speed=speed
}
else{
Speed=defaultSpeed
}

ID=id
effectNumber=effectNum
applyEffect()
}

count=0
running=0
last=null
timer=null
function applyEffect(){

switch(effectNumber){

case 1:
document.getElementById("sp"+count).style.color="#FF0000"
if(last!=null){
document.getElementById("sp"+last).style.color=""
}
break;

case 2:
document.getElementById("sp"+count).style.color="#0000FF"
if(last!=null){
document.getElementById("sp"+last).style.color=""
}
break;

case 3:
document.getElementById("sp"+count).style.backgroundColor="white"

if(last!=null){
document.getElementById("sp"+last).style.backgroundColor=""
}
break;

case 4:
document.getElementById("sp"+count).style.color="#FFFFFF"
document.getElementById("sp"+count).style.backgroundColor="#00AAFF"

if(last!=null){
document.getElementById("sp"+last).style.backgroundColor=""
document.getElementById("sp"+last).style.color=""
}
break;

case 5:
document.getElementById("sp"+count).style.borderStyle="solid"
document.getElementById("sp"+count).style.borderColor="#FF0000"
document.getElementById("sp"+count).style.borderWidth="2px"

if(last!=null){
document.getElementById("sp"+last).style.border=""
}
break;

case 6:
//document.getElementById("sp"+count).style.fontWeight="bold"
//document.getElementById("sp"+count).style.fontSize="20"
document.getElementById("sp"+count).style.textDecoration="underline"

if(last!=null){
//document.getElementById("sp"+last).style.fontWeight="normal"
//document.getElementById("sp"+last).style.fontSize=""
document.getElementById("sp"+last).style.textDecoration="none"
}
break;

default:
alert("Oops, somethings wrong here")

}

timer=setTimeout("applyEffect()",Speed)

last=count

count++
if(count==tempStr.length){
clearTimeout(timer)
count=0
last=null
setTimeout("document.getElementById(ID).innerHTML=savedStr ; running=0",endPause)
}

}

</script>

<h1>Example Divs</h1>

<P><div id="display1">Each word in this first example will highlight in red</div>
<a href="#null" onclick="initStr('display1',1,100)" title="Speed = 100">Try Me</a>

<P><div id="display2">Each word in this second example will highlight in blue</div>
<a href="#null" onclick="initStr('display2',2,200)" title="Speed = 200">Try Me</a> 

<P><div id="display3">The background of each word in this third example will highlight in white</div>
<a href="#null" onclick="initStr('display3',3,300)" title="Speed = 300">Try Me</a>

<P><div id="display4">The background and colour of each word in this fourth example will highlight</div>
<a href="#null" onclick="initStr('display4',4,400)" title="Speed = 400">Try Me</a>

<P><div id="display5">Each word in this fifth example will show a red solid border</div>
<a href="#null" onclick="initStr('display5',5)" title="Speed = Default Speed">Try Me</a>

<P><div id="display6">Each word in this sixth example will underline</div>
<a href="#null" onclick="initStr('display6',6,600)" title="Speed = 600">Try Me</a>