Using JavaScript to overwrite an image and replace with a new one on the same page

I 开发者_如何学JAVAhave a image scroller displaying thumbnails and another area where an enlarged picture of the thumb nail is displayed. I'm trying to use javascript to overwrite the large image when a different thumb nail is clicked. so clicking the thumb nail will replace the current large image with the new large image of the thumb nail, promblem is there is 31 thumb nails and i cant find a way to overwrite them using the show hid div method shown here.

You don't need to hide/show divs. Just change the src attribute of the larger image each time a different thumbnail is clicked. That should get you want you want.

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


<img src="/path/to/thumb1.jpg" onclick="showLarge('/path/to/large1.jpg')"/>
<img src="/path/to/thumb2.jpg" onclick="showLarge('/path/to/large2.jpg')"/>
<img src="/path/to/thumb3.jpg" onclick="showLarge('/path/to/large3.jpg')"/>

<img id="large" src="/path/to/large1.jpg"/>