HTML Link hover changing image somewhere else

[kjarahz]

I've been trying to make a html link <a> change an image right below the link. I need to do this for about 5 links (Navigation menu) and all the code I seem to stumble on and try does not work.

I have found the below code that works however it's setup to only replace ONE image. How can I set this up to accommodate about 4 more?

Javascript to make it all work

<script>
function changeimage(towhat,url){
if (document.images){
document.images.targetimage.src=towhat.src
gotolink=url
}
}
function warp(){
window.location=gotolink
}

</script>
<script language="JavaScript1.1">
var myimages=new Array()
var gotolink="#"

function preloadimages(){
for (i=0;i<preloadimages.arguments.length;i++){
myimages[i]=new Image()
myimages[i].src=preloadimages.arguments[i]
}
}


preloadimages("images/Header_Hover_23.png","images/Header_23.png")
</script>

Link For Nav Menu

<a href="#" onMouseover="changeimage(myimages[0],this.href)" onMouseout="changeimage(myimages[1],this.href)">Work</a>

Image Code

<a href="javascript:warp()"><img src="images/Header_23.png" name="targetimage" border=0></a>

[kjarahz]

Can anyone point me in the right direction?

[kjarahz]

Can anyone point me in the right direction?

[savvykms]

This will change the img element's src attribute whose id is "id" to "src":

function change_nav_image(id, src) {
  if (document.getElementById(id)) {
  document.getElementById(id).src = src;
  }
} 

This is really quite simple, but what you are looking to do could probably be done just with background images in CSS.

[kjarahz]

Sorry to not know what to do with it but how do I utilize this code snippet?