Change image after clicking on thumbnail

[Cramer]

I have this thumbnail.

<img src="../image/PasirRis501/bedroom2.jpg" alt="" title="Bedroom 2"
height="80" width="100" onClick="ChangePhoto(this.src)">


the function

function ChangePhoto(src){
document.MainPhoto.src = src;
}

the MainPhoto for changing

<img src="../image/PasirRis501/balcony.jpg" name="MainPhoto" alt=""
title="Balcony">


I would like to change the title of the mainphoto accordingly. For
e.g. the MainPhoto title should change to Bedroom 2 if bedroom2
thumbnail is clicked.

How do i pass the img object into the ChangePhoto function?

Appreciate any advise.

 

[David Mark]

I have this thumbnail.

<img src="../image/PasirRis501/bedroom2.jpg" alt="" title="Bedroom 2"
height="80" width="100" onClick="ChangePhoto(this.src)">

the function

function ChangePhoto(src){
document.MainPhoto.src = src;

document.images.MainPhoto.src = src;

}

the MainPhoto for changing

<img src="../image/PasirRis501/balcony.jpg" name="MainPhoto" alt=""
title="Balcony">

I would like to change the title of the mainphoto accordingly. For
e.g. the MainPhoto title should change to Bedroom 2 if bedroom2
thumbnail is clicked.

function ChangePhoto(src, title){
document.images.MainPhoto.src = src;
document.images.MainPhoto.title = title;
}

<img src="../image/PasirRis501/bedroom2.jpg" alt="" title="Bedroom 2"
height="80" width="100" onclick="ChangePhoto(this.src, this.title)">

BTW, it doesn't make sense to resize images with height/width
attributes. Most browsers do a poor job of it. Also, you are
downloading all of the larger images during the page load, which
defeats one of the main benefits of presenting thumbnails.

 

[David Mark]

David Mark said the following on 12/11/2007 5:51 AM:

document.images.MainPhoto.src = src;

document.images['MainPhoto'].src=src

Either way will work in this case.

Not sure src is a good name for a function parameter either.

It isn't.

function ChangePhoto(src, title){
document.images.MainPhoto.src = src;
document.images.MainPhoto.title = title;
}

<img src="../image/PasirRis501/bedroom2.jpg" alt="" title="Bedroom 2"
height="80" width="100" onclick="ChangePhoto(this.src, this.title)">

function ChangePhoto(imgRef){
theImage = document.images['MainPhoto'];
theImage.src = imgRef.src;
theImage.title = imgRef.title;
theImage.alt = imgRef.alt;

}

<img src="....." ... onclick="ChangePhoto(this)">

That is certainly better.