Resizing image "fixes" size of reloads of the image.

[Dr tom]

I am creating a little personal project where I have a number of images (BMP's) that I want to roll through with a Next and Previous button. By reading through various threads here, I was came up with the following.

I use
<img name="Pic" src="Deeper/Pic001.bmp" width="100%">
to load the initial image in a div and then a function to put the name of the next image in the variable PicName and the following to switch to image
document.images.Pic.src=PicName;
This worked fine. All the various sized images would load correctly. :cool:

Then I wanted to add in resizing. More detective work in the threads led to code that sets PicHeight and PicWidth with each image load and a variable PicSize that changes with the Bigger and Smaller butoons and
objref = eval("document.getElementById('Pic')");
objref.height=PicHeight*PicSize;
objref.width=PicWidth*PicSize;
changes the current image correctly. :cool:

However :mad: , once resized, it seems Pic's size becomes "fixed" and all subsequent image loads get adjusted to the exact same pixel height and width.

I have also tried the following to resize the div on the fly:
e=eval("document.getElementById('div3')");
e.style.width='50%';
e.style.height='50%';
but this does not change even the current image. :confused:

Is there a way to free up the image's size?

Or is there a way to pre-load an image to an invisible div, check its size to set PicHeight and PicWidth, and then load it to Pic?

I appreciate any ideas.