I'm trying to combine mouseactions on my site and am having trouble.

My situation is...


I have a row of icons that are just blocks of color. When you mouseover, they change to a little icon image, and mouseout return to the block of color. When you mouseclick, a larger image appears above.
What I want to achieve is that after you mouseclick the little icon image will stay EVEN after you mouseclick on another image icon.

The code I have so far is this...
but what happens is after I have mouseclicked on one and then mouseclick on the next, the original one goes back to its original state. I'd like it to continue to keep its new state.

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)
/*** End the rollover code ***/

Rollover("brunner", "pix2/home.gif", "pix2/brunner_over.jpg", "pix2/brunner_clk.jpg");
Rollover("pool", "pix2/home.gif", "pix2/pool_over.jpg", "pix2/pool_clk.jpg");
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");

Is this making sense?
Any suggestions or solutions?