// images for the mouse-off state

sq1off = new Image();
sq1off.src = "images/square1.gif";
sq2off = new Image();
sq2off.src = "images/square3.gif";
sq3off = new Image();
sq3off.src = "images/square4.gif";
sq4off = new Image();
sq4off.src = "images/square6.gif";
sq5off = new Image();
sq5off.src = "images/square7.gif";

// images for the mouse-on state

sq1on = new Image();
sq1on.src = "images/square1.gif";
sq2on = new Image();
sq2on.src = "images/square3.gif";
sq3on = new Image();
sq3on.src = "images/square4.gif";
sq4on = new Image();
sq4on.src = "images/square6.gif";
sq5on = new Image();
sq5on.src = "images/square7.gif";

// images to replace the holder

sq1holder = new Image();
sq1holder.src = "images/square_stage1.gif";
sq2holder = new Image();
sq2holder.src = "images/square_stage2.gif";
sq3holder = new Image();
sq3holder.src = "images/square_stage3.gif";
sq4holder = new Image();
sq4holder.src = "images/square_stage4.gif";
sq5holder = new Image();
sq5holder.src = "images/square_stage5.gif";

// now for the rest 

blank = new Image();
blank.src = "images/square_holder.gif";
holder = new Image();
holder.src = "images/square_holder.gif"

function on(source) {

document[source].src = eval(source + "on.src");

document["holder"].src = eval(source + "holder.src");
}

function off(source) {
document[source].src = eval(source + "off.src");

document["holder"].src = blank.src
}