automatic photo resize from thumbnail to larger size

What is the best way to build a web page that will automatically resize a 400x500(or whaterver) photo to a thumbnail version in my html page?

I want to be able to upload only one file to the ftp site and not 2. Here is a diagram to better explain what I am after.

http://home.cogeco.ca/~newbie/images/photo-gallery.gif

Thanks

I found this link: http://www.xs4all.nl/~sbpoley/webmatters/resize.html

Look inside the source code, I found these lines that can work for you:
document.images[imgElement].width = imgArr[n][imgwidth];
document.images[imgElement].height= imgArr[n][imgheight];

Place your thumbnail img tags in a div and then set the size for those thumbnails using css

<style type="text/css">

.thumbs img{
width:100px;
height:70px;
}

</style>

<div class="thumbs">
<img src="pic1.jpg">
<img src="pic2.jpg">
<img src="pic3.jpg">
<img src="pic4.jpg">
<img src="pic5.jpg">
</div>