JavaScript MousOver Demo

The HEAD has code to Hide JavaScript from old browsers:

<script language="JavaScript">
<!-- Hide script from old browsers
var win
function opentoolbar()
{if (!win){ 
win=window.open("cmps/suggestion.cfm","newwin","toolbar=yes,location=no,directories=no,height=400,width=470");
win.creator=self;}
else
{win=window.open("cmps/suggestion.cfm","newwin","toolbar=yes,location=no,directories=no,height=400,width=470");}
win.focus();}
        // End hiding script from old browsers --> 
</script>

The HEAD has code to pre-load the rollover images into the browsers cache

<!--//"pre-load" the rollover images into the browsers cache
delta1 = new Image(3,5);
delta1.src = "images/karet_red.gif";
delta2 = new Image(3,5);
delta2.src = "images/karet_blk.gif";

delta1a = new Image(3,3);
delta1a.src = "images/dot_black.gif";
delta2a = new Image(3,3);
delta2a.src = "images/dot_gray.gif";

delta3 = new Image(7,14);
delta3.src = "images/delta.gif";
delta4 = new Image(7,14);
delta4.src = "images/delta_ro.gif";

The HEAD has code to determine browser versions (NS and IE):

browser_name = navigator.appName;
browser_version = parseFloat(navigator.appVersion); 

if (browser_name == "Netscape" && browser_version < 2.0)  {roll = 'false';}
else if (browser_name == "Netscape" && browser_version == 2.0)  {roll = 'false';}
else if (browser_name == "Netscape" && browser_version >= 3.0)  {roll = 'true';}
else if (browser_name == "Microsoft Internet Explorer" && browser_version <= 2.0)  {roll = 'false';}
else if (browser_name == "Microsoft Internet Explorer" && browser_version >= 3.0)  {roll = 'true';}
else  {roll = 'false';}

The HEAD has code to perform MouseOver or MouseOut if browser is compatible.

function msover(img,ref)
{if (roll == 'true')
                        {document.images[img].src = ref;}}
function msout(img,ref)
{if (roll == 'true')
                        {document.images[img].src = ref;}}

onMouseOver and onMouseOut in action:

Text has red caret to left; turns gray on mouseover
This is the code that does the work above:
<img src="images/karet_red.gif" width="3" height="5" border="0" name="image2n"><a href="JavaScript.html" onmouseover="msover('image2n',delta2.src);" onmouseout="msout('image2n',delta1.src);"> Text has red caret to left; turns gray on mouseover</a>

Gray dot on mouseover, black dot on mouse out, no link appears (A noHREF)
This is the code that does the work above:
<img src="images/dot_gray.gif" width="3" height="3" border="0" name="image4na"><A noHREF="JavaScript.html"onmouseover="msover('image4na',delta2a.src);" onmouseout="msout('image4na',delta1a.src);">Gray dot on mouseover, black dot on mouse out, no link appears (A noHREF)</A>

link text, black dot to left, turns gray on mouseover
This is the code that does the work above:
<img src="images/dot_black.gif" width="3" height="3" border="0" name="image4nb"><A HREF="JavaScript.html"onmouseover="msover('image4nb',delta2a.src);" onmouseout="msout('image4nb',delta1a.src);">link text, black dot to left, turns gray on mouseover</A>

Green Delta, changes to red Delta on mouseover
This is the code that does the work above:
<img SRC="images/delta.gif" width=7 height=14 name="image1"><a href="JavaScript.html" onmouseover="msover('image1',delta4.src);" onmouseout="msout('image1',delta3.src);">Green Delta, changes to red Delta on mouseover</a>