Is this the best way to re-code a Javascript?

My current database is shortly going to be obsolete due to server updates and rather than moving to the next version as I don't have the time to do the changes I'm going to go to static pages.

The problem is that the site currently has thumbnails which you click to show a larger image. I want to change this code to display the larger images and have come up with the following, I don't need to use the thumbnails:

w w w .c ostaandsierra.com/images/1.html (spaces added to prevent SE caching)

The current database displays like this:
http://www.costaandsierra.com/property_details/propertiesforsale-31.html

This is the javascript code:

<SCRIPT LANGUAGE="JavaScript">
function changeImage() {
 document.Image.src="w w w.costaandsierra.com/property_details/listing_photos/31_villa6.jpg";
}
function changeImage1() {
 document.Image.src="w w w.costaandsierra.com/property_details/listing_photos/31_villa7.jpg";
}
function changeImage2() {
 document.Image.src="w w w.costaandsierra.com/property_details/listing_photos/31_villa8.jpg";
}
function changeImage3() {
 document.Image.src="w w w.costaandsierra.com/property_details/listing_photos/31_villa9.jpg";
}
function changeImage4() {
 document.Image.src="w w w.costaandsierra.com/property_details/listing_photos/31_villa10.jpg";
}
</SCRIPT>

Code (markup):

The code to change the images:

<a href="javascript:changeImage()">1</a> -
			  <a href="javascript:changeImage1()">2</a> -
			  <a href="javascript:changeImage2()">3</a> -
			  <a href="javascript:changeImage3()">4</a> -
			  <a href="javascript:changeImage4()">5</a>

Code (markup):

Can you see any problems in using this code?
Is the code going to be complient for a number of years?
Is there another way of quickly changing the original code to display the larger images?
Is it going to be Ok with most browsers?

Any other comments...?

Thanks Ian

 

This way (I think) is much better :

Script in head :

<script type="text/javascript">
function initGallery()
	{
	var ul =	document.getElementById("ulGallery");
	var a =	ul.getElementsByTagName("a");
	for (var i=0;i<a.length;i++)
		a[i].onclick = function() {return changeImage(this);};
	}
function changeImage(obj)
	{
	document.getElementById("imgGallery").src = obj;
	return false;
	}
window.onload = initGallery;
</script>

HTML:

And the gallery where you want :

<img src="http://www.costaandsierra.com/property_details/listing_photos/31_villa6.jpg" id="imgGallery" />
<ul id="ulGallery">
	<li><a href="http://www.costaandsierra.com/property_details/listing_photos/31_villa6.jpg">Image 1</a></li>
	<li><a href="http://www.costaandsierra.com/property_details/listing_photos/31_villa7.jpg">Image 2</a></li>
	<li><a href="http://www.costaandsierra.com/property_details/listing_photos/31_villa8.jpg">Image 3</a></li>
	<li><a href="http://www.costaandsierra.com/property_details/listing_photos/31_villa9.jpg">Image 4</a></li>
	<li><a href="http://www.costaandsierra.com/property_details/listing_photos/31_villa10.jpg">Image 5</a></li>
</ul>

HTML:

Of course, you can style it with CSS and add Alternate text to the images (It's good for SEO)

 

If you are looking toward the future...xHTML now requires tags to be in lower case, so it should be <script>, not <SCRIPT>. And the language attribute was deprecated, you are supposed to use type. If you are using an xHTMl doctype, that should be:

<script type="text/javascript">
//Javascript
</script>

On a HTML 4.01 transitional doctype though, that should be fine, though I'd recommend not using Javascript, you can if you so wish:

JS:

function swapImage(id){
document.getElementById("image").src=id
}

Code (markup):

HTML

<img src="http://www.costaandsierra.com/property_details/listing_photos/31_villa6.jpg" id="image" />
<a onclick="swapImage('http://www.costaandsierra.com/property_details/listing_photos/31_villa6.jpg')">Image 1</a>

Code (markup):

In between the brackets/quotes for swapImage(''), you place the url to the image.

 

Thank you both for the feedback, that's great...Of course I now have a few questions:

blueparukia - You mention don't use javascript, I know what you mean but there isn't any other way round this is there? What could you use? The doctype I'm sure could be changed if needed. I'm no html techno, so don't know?

Morishani - For your script code could i change that to the following...So if in the future the code needs changing I only need to change one file:

<script src="URL HERE .js" language="JavaScript" type="text/javascript"></script>

Code (markup):

Thanks Ian