[Jaali]

Hi All,

I am wanting to get a script that will enable me to have an image on the page change when I roll my mouse over a text link elsewhere on the page.

It needs to default back to the original image once you rolloff the text link. There are five text links. I need it to change the one picture to five different ones, depending on which link I roll-over, if you know what i mean.

Thanks heaps for all your help!

Cheers,

Jaali

[dcooldude_1]

I know exactly what you mean. I had to do a project for this a while back in class.

What you have to do is set an array. Well, never mind. I'll just write one for you.This will be in javascript. So put the < script > tags around it.

Code:

changeIMG = new Array(6);
changeIMG[0] = new Image;
changeIMG[0].src = "http://www.somewhere.com/mainimage.extension";
changeIMG[1] = new Image;
changeIMG[1].src = "http://www.somewhere.com/image1.extension";
changeIMG[2] = new Image;
changeIMG[2].src = "http://www.somewhere.com/image2.extension";
changeIMG[3] = new Image;
changeIMG[3].src = "http://www.somewhere.com/image3.extension";
changeIMG[4] = new Image;
changeIMG[4].src = "http://www.somewhere.com/image4.extension";
changeIMG[5] = new Image;
changeIMG[5].src = "http://www.somewhere.com/image5.extension";

function doChangeMe(whichone)
{
document.myIMG.src=changeIMG[whichone].src;
}

//Close script here

<img src="http://www.somewhere.com/mainimage.extension" name="myIMG">

<a href="" onMouseOver="doChangeMe('1')" onMouseOut="doChangeMe('0')">Change to image 1</a>

<a href="" onMouseOver="doChangeMe('2')" onMouseOut="doChangeMe('0')">Change to image 2</a>

<a href="" onMouseOver="doChangeMe('3')" onMouseOut="doChangeMe('0')">Change to image 3</a>

<a href="" onMouseOver="doChangeMe('4')" onMouseOut="doChangeMe('0')">Change to image 4</a>

<a href="" onMouseOver="doChangeMe('5')" onMouseOut="doChangeMe('0')">Change to image 5</a>

To quickly explain this, the top part is an array. Change only the red parts. Don't change the 6 unless you have too. That number HAS to be one more then the last array you have. So, if you have changeIMG[6] the 6 in the new Array part HAS to be 7. The reason for that is javascript starts at 0.

The blue url's should be the same. This is the main image that will be seen first, and when you mouse out. Take this code and run with it. Let me know if it doesn't work.