How to show an image with mouseover?

[guest]

Well I'm working on my dad's website. I've arranged all of his products into thumbnail pictures that are in individual boxes. What I'm trying to accomplish is when the client puts his mouse over one thumbnail image, it shows the big image in the box below the thumbnail images.

______ _______
| | | |
|Pic | | Pic |
| #1 | | |
| | | #2 |
|_____| |______|


___________________________
| |
| |
| Big Picture Box |
| |
| |
| |
| |
| |
|_________________________ |

So as you can see with my crude drawing, when an mouse goes over a little image, the big picture box will show the bigger version of the image with the mouse over it.

Please help, it took me forever to make the boxes. haha


****EDIT****Ok, so the drawings didn't work, but you get the idea.

[Cytael]

<img src="littlepic1.jpg" onMouseOver="document.big.src='bigpic1.jpg'; return true;">

<img src="littlepic2.jpg" onMouseOver="document.big.src='bigpic2.jpg'; return true;">

<!-- add more lines like above if more pics desired -->

<img src="bigpic1.jpg" name="big">


just change filenames to match your pictures