Multiple image change on a mouseover

I know how to do a basic mouseover and how to do a mouseover where the change happens in another location, but how do you go about making two images change with one mouseover?

For instance I have ten square being used as a nav bar and I would like the following to happen when the mouse goes over the square…

I would like the square itself to change plus in another area of the page I would like an image to change to give a description of what that link does… (this change is immediately following the ten squares)…

is there an easy way to do this?

Yup, it’s called a JavaScript function. :slight_smile:

<script language="Javascript">
function change (picurl, picurl2) {
document.picture1.src = picurl;
document.picture2.src = picurl2;

<img src="image2_off.jpg" name="picture2">
<a href="page.html" onMouseOver="change('image_on.jpg','image2_on.jpg");" onMouseOut="change('image_off.jpg')">
<img src="image_off.jpg" name="picture1" border="0"></a>

Try that - replace the image names as needed - the mouseover should change the image it’s on top of, as well as the one at the top of the page.

If you need me to walk you through it a bit more, let me know. :slight_smile:

suzie…view source on this page and it will give you the script and the way to use it.

This online help page came with a book that I bought.

This might help out.Take a look here:


you guys are the best… Thank you so very much!