Highlighting Text

Some examples of using the "onmouseover" and "onmouseout" events.

As you move the mouse over each word below high-lighting occurs.

<script type="text/javascript">

ns=document.getElementById&&!document.all

function newcolor(e,col){
tag_id=(!ns)?event.srcElement.id:e.target.id
document.getElementById(tag_id+"text").style.color=col
}

</script>

Each id must have a unique name for the event that is going to activate the highlight. This name together with another property (in this case text) will also be use to identify the text to be highlighted.
text can be any name of your choosing providing it is changed within the script as well as the id.

<SPAN id=A onmouseover="newcolor(event,'white')" onmouseout="newcolor(event,'')">A</SPAN>
<SPAN id=B onmouseover="newcolor(event,'white')" onmouseout="newcolor(event,'')">MouseEvent</SPAN>
<SPAN id=C onmouseover="newcolor(event,'white')" onmouseout="newcolor(event,'')">Text</SPAN>
<SPAN id=D onmouseover="newcolor(event,'white')" onmouseout="newcolor(event,'')">Highlighting</SPAN>
<SPAN id=E onmouseover="newcolor(event,'white')" onmouseout="newcolor(event,'')">script</SPAN>

<span id=Atext>This</span>
<span id=Btext>Text</span>
<span id=Ctext>Will</span>
<span id=Dtext>Be</span>
<span id=Etext>Highlighted</span>

id=A highlights id=Atext

More effects can be created by placing an additional Mouse Event within the opening "SPAN" tag

More

Examples

With

MouseEvent

Effects

<SPAN id=F onmouseover="newcolor(event,'white');this.style.color='cyan'" onmouseout="newcolor(event,'');this.style.color='' "> More </SPAN>
<SPAN id=G onmouseover="newcolor(event,'white');this.style.letterSpacing='4pt'" onmouseout="newcolor(event,'');this.style.letterSpacing='' "> Examples </SPAN>
<SPAN id=H onmouseover="newcolor(event,'white');this.innerHTML=' - Surprise - '" onmouseout="newcolor(event,'');this.innerHTML='Of' "> With </SPAN>
<SPAN id=I onmouseover="this.style.textDecoration='line-through' ; newcolor(event,'white')"onmouseout="this.style.textDecoration='' ; newcolor(event,'')"> MouseEvent </SPAN>
<SPAN id=J onmouseover="this.style.fontSize='125%' ; newcolor(event,'white')" onmouseout="this.style.fontSize='75%' ; newcolor(event,'')"> Effects </SPAN>

<SPAN id=Ftext>Your Text </SPAN>
<SPAN id=Gtext>Your Text </SPAN>
<SPAN id=Htext>Your Text </SPAN>
<SPAN id=Itext>Your Text </SPAN>
<SPAN id=Jtext>Your Text </SPAN>

Quick Way

If you just want to highlight a single line or word within a page simply use the method below

<Span onmouseover="document.getElementById('testing2').style.color='red'" onmouseout="document.getElementById('testing2').style.color=''"> This is a test</span>

<span id =testing2> This colour will change</span>