Simple script to show/hide div on mouseover

Hi, i’m trying to make it so that a few divs are all invisible but made visible depending on which button you rollover.

To get a visual idea go here and look at the three buttons on the right. Mouseover the Life Coaching button.

So there’d be a default visible div, then there’d be three more, all occupying the same space but hidden.

There’s three buttons and i want each one in turn to make all other divs invisible/hidden when you mouseover them, but the one IT corresponds to visible as per the example.

This code works fine but only for one div:

<div id="hiddenDiv" style="display: none">Div contents!</div>

<img src="image.gif onmouseover="document.getElementById('hiddenDiv').style.display = 'block'" onmouseout="document.getElementById('hiddenDiv').style.display = 'none'" />

Any ideas?