rollon change graphic with adjustable image size

[aprilneedshelp]

I am using a basic rollover code to change a graphic by mousing over another in an online gallery. When a thumbnail is moused over the large image changes to show the full view of that piece.

In a new gallery I am working on I need not only the larger image to change but also to be able to adjust it's width. I will insert a snippet of what I am using below. I need to know if there is anything that can be added or used in addition to that will give me control of the size.

Thanks!!

nav.js code:
if (document.images) {
pic1on = new Image();
pic1on.src = "images/gallery/pic1.jpg";
pic1off = new Image();
pic1off.src = "images/gallery/pic1.jpg";

function rollon(imgName) {
if (document.images) {
imgOn = eval(imgName + "on.src");
document.large.src = imgOn;
}
}

function rolloff(imgName) {
if (document.images) {
imgOff = eval(imgName + "off.src");
document.large.src = imgOff;
}
}
_______________________________________________________________
A HREF code:

<A HREF="gallery.htm" onMouseOver="rollon('pic1'); return false" onMouseOut="rolloff('pic1'); return false"><IMG SRC="images/gallery/pic1sm.jpg" WIDTH=60 HEIGHT=60 BORDER=0 ALT="Lizzie's Garden" vspace=2></A>

<img src="images/gallery/pic1.jpg" width=250 height=250 border=0 NAME="large" vspace=4>

[Fang]

document.large.width=100+"px";

[aprilneedshelp]

Where do I place that?

[Fang]

After document.large.src = imgOn;and imgOff;

[aprilneedshelp]

Thank you!! Do you know if there is a way to specify a different width for each large photo? They are all the same height but the width varies. I know I can just create the graphics with dead space but I am wanting to reduce file size.

[Fang]

pic1on = new Image(100, 200); //width, height
pic1on.src = "images/gallery/pic1.jpg";