Hi there,

I'm working on a website and I need it so that when you click a button the image changes inside a div to the next image in the list so to speak.

The code i've got for the div at the moment is:

<div id="image">
<script type="text/javascript">
var number2 = 1;
imagechange(number2)
</script>
</div>

This is the inside of "imagechange":

function imagechange(number)
{

var location="file:///C:/Documents%20and%20Settings/Administrator.TONY-P7Z66YC5R4/My%20Documents/Aarons%20website/Lynadell/pics/pic" + number + ".jpg";

document.write('<image src="' + location + '">');
}

Location is just the location of the pic. I have it so each picture has the same name "pic" and a difffernt number after so all that has to be done is add 1 and you have another pic.

This is the code that should change the div:

<image src="images/buttonright.jpg" onclick="javascript:
document.getElementById('image').innerHTML = 
number2++;
imagechange(number2);
">

This I thought should work but what happens it seems is that it works but it expands the div to fit the hole page and then just shows the next image in line. So is there anyway to stop it expanding the div? If not would there be a way to do what I want to happen?

Thanks Vromoth

Wow, very convoluted! why not just preload the images and then copy them to a default image to change it.