Javascript - change img src elsewhere when hovering?

[DaveOwl]

To explain, I'm trying to change an image elsewhere on the page when I hover over a smaller version of it.

The code below is for the big image box and the smaller boxes which have the thumbnails.

<div id="imagelarge"><img id="large" src="default.jpg" alt="" /></div>

<div id="imagebox" class="small">
<img class="thumb" src="test.jpg" alt="Test" onMouseOver="changeimage('test.jpg');" onMouseOut="changeimage('default.jpg');" />
</div>

The JS I was hoping would change the large image to match the thumbnail when the mouse is over the thumbnail box and when moved away it would change back to the default image which was there originally.

<script type="text/javascript">
function changeimage(image)
{
document.getElementById(large).src = 'image';
}
</script>

Clearly I am doing something wrong and it doesn't surprise me as I'm not getting to grips with Javascript as quickly as I thought I might. Any help is welcome!

 

[DaveOwl]

Appreciate it Rob thanks. I will try it this evening to see how I get on.

Hopefully it is as simple as that Do I need to put jQuery libraries on the webserver I have hosting on to use that or is it like C++ with included 'header' files these functions reference?

 

[DaveOwl]

I love you Rob, worked perfect