Need my js menu code fixed - PAID

I have the following code on my site to make a horizontal menu on the top of the site work. e.g. home, contact etc...

The menu has 4 states-NORMAL, MOUSE OVER, MOUSE OFF, ACTIVE TAB.

The problem at the moment is that the menu images are in a folder in the root and every page that uses the menu has to be listed in the code for the images to show which is really not going to work when I add more pages to the site.

I want someone to help fix the code for me. Using $_SERVER['DOCUMENT_ROOT] or something to make the file find the images whatever folder the code is in.

}
var out,b;
function onout(out,b)
{
 var ss;
 ss=b+'/'+out+'_rel.gif';
 document[out].src=ss;
}
</script>
<? $a=$_SERVER['REQUEST_URI']; 
  if($a=='/bigfreebet/bettingodds/index.php' || $a=='/bigfreebet/bettingodds/')
  {
  $flo='../images/menu';
  $fol='../images/menu';
  }
  else
  {
  $flo='images/menu';
  $fol='images/menu';
  }
?>
<div id="menu_main"> 
    <ul id="menutopmain" >
	  <li>
	  <? if($a=='/bigfreebet/' || $a=='/bigfreebet/index.php') { ?><img src="<? echo $flo;?>/onhome.gif" width="50" height="25"><? } else {?>
	  <a href="/bigfreebet/index.php" onMouseOver="onmouse('home','<? echo $flo;?>')" onMouseOut="onout('home','<? echo $flo;?>')"><img src="<? echo $flo;?>/home.gif" name="home"  width="50" height="25" border="0"></a> <? }?>
	  </li>
	  <li> <img src="<? echo $fol;?>/cross.png"> </li>
      <li>
	 <? if($a=='/bigfreebet/bettingodds/index.php' || $a=='/bigfreebet/bettingodds/') { ?><img src="<? echo $flo;?>/onbettingodds.gif" width="90" height="25"><? } else {?>
	  <a href="/bigfreebet/bettingodds/" onMouseOver="onmouse('bettingodds','<? echo $flo;?>')" onMouseOut="onout('bettingodds','<? echo $flo;?>')"><img src="<? echo $flo;?>/bettingodds.gif" name="bettingodds"  width="90" height="25" border="0"></a><? } ?></li>
	   <li> <img src="<? echo $fol;?>/cross.png"> </li>

   <li>
	 <? if($a=='/bigfreebet/bettingodds/index.php' || $a=='/bigfreebet/freebets.php') { ?><img src="<? echo $flo;?>/onfreebets.gif" width="71" height="25"><? } else {?>
	  <a href="/bigfreebet/freebets.php" onMouseOver="onmouse('freebets','<? echo $flo;?>')" onMouseOut="onout('freebets','<? echo $flo;?>')"><img src="<? echo $flo;?>/freebets.gif" name="freebets"  width="71" height="25" border="0"></a><? } ?></li>
	   <li> <img src="<? echo $fol;?>/cross.png"> </li>


 <li>
	 <? if($a=='/bigfreebet/bettingodds/index.php' || $a=='/bigfreebet/freebets.php') { ?><img src="<? echo $flo;?>/onforum.gif" width="50" height="25"><? } else {?>
	  <a href="/bigfreebet/forum.php" onMouseOver="onmouse('forum','<? echo $flo;?>')" onMouseOut="onout('forum','<? echo $flo;?>')"><img src="<? echo $flo;?>/forum.gif" name="forum"  width="50" height="25" border="0"></a><? } ?></li>
	   <li> <img src="<? echo $fol;?>/cross.png"> </li>


 <li>
	 <? if($a=='/bigfreebet/bettingodds/index.php' || $a=='/bigfreebet/freebets.php') { ?><img src="<? echo $flo;?>/onpreviews.gif" width="65" height="25"><? } else {?>
	  <a href="/bigfreebet/forum.php" onMouseOver="onmouse('previews','<? echo $flo;?>')" onMouseOut="onout('previews','<? echo $flo;?>')"><img src="<? echo $flo;?>/previews.gif" name="previews"  width="65" height="25" border="0"></a><? } ?></li>
	   <li> <img src="<? echo $fol;?>/cross.png"> </li>

      <li>
	  <? if($a=='/bigfreebet/contact.php') { ?><img src="<? echo $flo;?>/oncontact.gif" width="61" height="25"><? } else {?>
	  <a href="/bigfreebet/contact.php" onMouseOver="onmouse('contact','<? echo $flo;?>')" onMouseOut="onout('contact','<? echo $flo;?>')"><img src="<? echo $flo;?>/contact.gif" name="contact" width="61" height="25" border="0"></a><? } ?></li>
    </ul>
</div>

Code (markup):

 

I will do it for you but where is onmouse() defined?

Try this for onout():

function onout(out,b)
{
 var ss;
 ss='/'.b+'/'+out+'_rel.gif';
 document[out].src=ss;
}

Code (markup):