Multiple Image Javascript Rollovers

As long as you can insert the code into your page, having multiple links update an image on rollover should be pretty simple.

first put this into your page, preferrably in the head, but anywhere will work:

Code:

<script type="text/javascript">
<!--
function changeImage(picName,newImg)
  {
  if (document.images)
    {
    document[picName].src= newImg;
    }
  }
//-->
</script>


Then add your links that will change the image. Make sure to enter the correct path (/path/to/image.jpg) to the image you want to switch to when you roll over the link. Put this as many times as you want to have different links that update the same image:

Code:

<a href="javascript:;" onMouseOver="changeImage('imageOne', '/path/to/image.jpg');">linky linky</a>


last, wherever you want to have the image that will be updated, put this:

Code:

<img src="/path/to/image.jpg" name="imageOne" id="imageOne" />


Click here to see this example in action.

You can modify this code pretty easily to be able to update different images as well, say if you want to have a set of links updating one image, and then another set of links updating another image, a third set of links updating a third image, etc.

All that needs to be done for the second image is to change the code whereever you see "imageOne" to say "imageTwo". So all the images that are named imageOne will be updated by the links that have imageOne in them, and all the images that are named imageTwo will be updated by the links with imageTwo in them, etc.