Show / Hide div via onload on menu

[zerpex]

Hello, at the moment I'm creating a website where on the frontpage (index.php) there is 2 divs that contains first a monitor-image with 3 computer screens, and then a div, that set an overlay over 2 of the screens - the divs like this:

<code>
<div id="monitor_overlay"></div> //Contains the overlay
<div id="lastest"></div> //Contains the screens
</code>

The CSS is:

<css>
#lastest {
position:absolute;
top:121px;
width:960px;
height:397px;
background:url(../images/monitor_bg.png);
z-index:-1;
}

#monitor_overlay {
position:absolute;
top:136px;
margin-left:256px;
width:443px;
height:277px;
background:url(../images/monitor_overlay.png) no-repeat;
z-index:1;
}
</css>

Those screens are needed on the index.php only - other content will be shown on the other sites.

That I need is a javascript that does following:

When loading the site it will automaticly load index.php - aka it shows the divs.

Then when I press on the menu-button "Blog" or "Portfolio" it should hide the divs "monitor_overlay" and "lastest"

but then if I press on "Home" again - I want the divs to be shown - How do I do this?

I have searched for hours, and yeah to be honest, I'm not good at javascript - the only thing I have made once was to replace a background color and image when clicking a link or a menu-button:

onclick="document.body.style.background='#169EF2 URL(\'images/background-darkblue.jpg\') center repeat-y fixed';"

But hiding/showing a div when clicking a menu button is really a big problem for me - the only way I could se it should work should be something like this:

onclick="document.div.StyleByID('lastest','monitor_overlay').display.hidden;','document.div.StyleByID('anotherdiv').display.visible;"

but it don't works.

Any that can help? it would be so wonderful!

Thank you, best regards,

Lucas Kristensen