Dual/Tri/Quad state rollovers

I have seen this quesion asked in various forms but the general idea of the question is "How do I make a rollover image clickable". Usually the asker wants to have the image stay on when clicked. Here is a little script that will do that and more..

This is the main code that goes in the HEAD section of your document.


<script type="text/javascript">
<!--
/**
* Dual/Tri/Quad state rollovers from www.javascript-fx.com
* posted at and available from www.codingforums.com
* You may use this code on any website but please
* leave this comment intact.
*/
var img = new Array();
var di = document.images;
var currOn = null;

function Rollover(imgName, imgOut, imgOver, imgClick, imgClickOut)
{
if(imgClick == null) imgClick = imgOver;
if(imgClickOut == null) imgClickOut = imgClick;

var roll = new Object;

roll.out = imgOut;
roll.over = new Image();
roll.over.src = imgOver;
roll.click = new Image();
roll.click.src = imgClick;
roll.click_out = new Image();
roll.click_out.src = imgClickOut;

img[imgName] = roll;
}
function mOver(imgName)
{
di[imgName].src = (imgName != currOn) ? img[imgName].over.src : img[imgName].click.src;
}
function mOut(imgName)
{
di[imgName].src = (imgName != currOn) ? img[imgName].out : img[imgName].click_out.src;
}
function mClick(imgName)
{
if(currOn != null) di[currOn].src = img[currOn].out;
currOn = imgName;
di[currOn].src = img[currOn].click.src;
}
function mSelect(imgName)
{
mClick(imgName);
mOut(imgName);
}
/*** End the rollover code ***/
//-->
</script>


This is the code to define rollovers and is also placed in the HEAD of your document

<script type="text/javascript">
<!--
Rollover("home", "images/home_off.gif", "images/home_on.gif");
Rollover("email", "images/email_off.gif", "images/email_on.gif");
Rollover("script", "images/script_off.gif", "images/script_on.gif");
Rollover("links", "images/links_off.gif", "images/links_on.gif");
Rollover("special","images/special_off.gif","images/special_on.gif");
//-->
</script>


Where the syntax is
Rollover(Name, offImage, onImage);

Then to use the code in a rollover image the HTML in the BODY of your page should look like this

<A HREF="#"
onClick="mClick('home');"
onMouseOver="mOver('home');"
onMouseOut="mOut('home');"><img name="home"
src="images/home_off.gif" border=0></A><br>

NOTE: The name if the image must match the Rollover name
--- <img name="home"
--- Rollover("home", "images/home_off.gif", "images/home_on.gif");

If you use the script in this form you will get something like this demo
Dual State Rollovers (http://www.javascript-fx.com/post/codeforums/quadroll/QuadState2img.html)
------------------------------------------------------------------------
If you want the clicked image to be a third image you define the rollovers as follows :-

<script type="text/javascript">
<!--
Rollover("home", "images/home_off.gif", "images/home_on.gif", "images/home_clk.gif");
Rollover("email", "images/email_off.gif", "images/email_on.gif", "images/email_clk.gif");
Rollover("script", "images/script_off.gif", "images/script_on.gif", "images/script_clk.gif");
Rollover("links", "images/links_off.gif", "images/links_on.gif", "images/links_clk.gif");
Rollover("special","images/special_off.gif","images/special_on.gif","images/special_clk.gif");
//-->
</script>

Where the syntax is
Rollover(Name, offImage, onImage, clickedImage)

Which results in this demo
Tri State Rollovers (http://www.javascript-fx.com/post/codeforums/quadroll/QuadState3img.html)
------------------------------------------------------------------------------------
If you want to have a clicked image and have that clicked image also have a (different) rollover effect you define the rollovers as follows :-

<script type="text/javascript">
<!--
Rollover("home", "images/home_off.gif", "images/home_on.gif", "images/home_clk.gif", "images/home_clk_off.gif");
Rollover("email", "images/email_off.gif", "images/email_on.gif", "images/email_clk.gif", "images/email_clk_off.gif");
Rollover("script", "images/script_off.gif", "images/script_on.gif", "images/script_clk.gif", "images/script_clk_off.gif");
Rollover("links", "images/links_off.gif", "images/links_on.gif", "images/links_clk.gif", "images/links_clk_off.gif");
Rollover("special","images/special_off.gif","images/special_on.gif","images/special_clk.gif","images/special_clk_off.gif");
//-->
</script>

Where the syntax is
Rollover(Name, offImage, onImage, clickedImage, clickedOverImage)
Which results in these demos
Quad State Rollovers 1 (http://www.javascript-fx.com/post/codeforums/quadroll/QuadState4img.html)
Quad State Rollovers 2 (http://www.javascript-fx.com/post/codeforums/quadroll/QuadState4imgA.html)

How do I get one of these images to be "on" by default?

How do I get one of these rollovers to be selected "overstate" when page loads?