This is an Example of how to do this, I'm just going to throw the source code at you and give you the link to the site. These things are awesome:
http://www.geocities.com/slookytech/te1.html
PHP:
<html>
<head>
<title></title>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
</head>
<body>
<div style="position:absolute; top:2px; left:2px;"> <img src="startbar.png" name="s1" border="0" usemap="#s1Map" style="visibility:visible;" onMouseOut="s1.src='startbar.png'">
<map name="s1Map">
<area shape="rect" coords="2,2,95,28" href="#" onClick="s1.src='startbarp.png'; s2.style.visibility='visible';" onMouseOut='s1.src="startbar.png"; s2.style.visibility="hidden";'>
</map>
</div>
<div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:1; left: 3px; top: 30px; visibility: hidden;"> <img src="startmenu1.PNG" width="381" height="488" name="s2" border="0" usemap="#Map" onMouseOver="s2.style.visibility='visible'; s1.src='startbarp.png';" onMouseOut='s2.style.visibility="hidden"; s1.src="startbar.png";'>
<map name="Map">
<area shape="rect" coords="5,409,185,445" href="#" onMouseOver="s2.style.visibility='visible'; s1.src='startbarp.png'; s3.style.visibility='visible';" onMouseOut="s3.style.visibility='hidden';">
</map>
</div>
<div id="Layer2" style="position:absolute; width:200px; height:115px; z-index:2; left: 150px; top: 148px; visibility: hidden;"><img src='startmenu2.png' name="s3" border="0" usemap="#s3Map" onMouseOver="s1.src='startbarp.png'; s2.style.visibility='visible'; s3.style.visibility='visible';" onMouseOut='s3.style.visibility="hidden";'>
<map name="s3Map">
<area shape="rect" coords="0,193,212,216" href="http://www.google.com" target="_blank" onMouseOver='s3.style.visibility="visible"; s2.style.visibility="visible"; s1.src="startbarp.png";' onMouseOut="s3.style.visibility='hidden';">
</map>
</div>
</body>
</html>http://www.geocities.com/slookytech/te1.html
, and well the onClick makes it seem like you are using a Windoze start bar - yeah I know, I should have made the dock, changing the image when you went over a specific one. Someone should make that and post it.