Multiple image change on a mouseover

JavaScript
1

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?

2

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



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

<body>
<img src="image2_off.jpg" name="picture2">
<p>
<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>
</body>
</html>

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:

3

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

http://www.chalcedony.com/javascript/scripts/chap03/script07.html

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

4

This might help out.Take a look here:

kc

5

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