I'm trying to use the "image change on mouseover" feature in my website, but I can't figure out what areas I'm suppose to change in this code besides the img.src fields and the link fields:

var img1 = new Image();
var img1Large = new Image();
var img2 = new Image();
var img2Large = new Image();
var img3 = new Image();
var img3Large = new Image();

img1.src = "IMAGE_1";
img1Large.src = "LARGE_1";
img2.src = "IMAGE_2";
img2Large.src = "LARGE_2";
img3.src = "IMAGE_3";
img3Large.src = "LARGE_3";

function CC_Button(textimage, picimage) {
document['text'].src=textimage;
document['picture'].src=picimage;

<p><a href="http://www.yourdomain.com/page.html" onmouseover="CC_Button('IMAGE_1', 'LARGE_1')" onmouseout="CC_Button('blank.gif', 'blank.gif')">Page 1</a></p>

<p><a href="http://www.yourdomain.com/page.html" onmouseover="CC_Button('IMAGE_2', 'LARGE_2')" onmouseout="CC_Button('blank.gif', 'blank.gif')">Page 2</a></p>

<p><a href="http://www.yourdomain.com/page.html" onmouseover="CC_Button('IMAGE_3', 'LARGE_3')" onmouseout="CC_Button('blank.gif', 'blank.gif')">Page 3</a></p>

<p>This box below represents where the first image will be. Remember to put BORDER=0 to get rid of the colored border around the image.<br />
<img name="text" src="blank.gif" width="100" height="100" border="2"></p>

<p>Here is where the second picture will appear.<br />
<img name="picture" src="blank.gif" width="100" height="100" border="2"></p>
<!-- End MouseOver Image Links -->

Could some one tell me in which fields I need to add the path to my images (the start image and then the one it changes to)?

Thanks!