Rollover menu og CSS

Jeg har et lille problem med min load time på min website og det ville jeg jo gerne have ned.

jeg har hele min menu så den kan ses hele time lige meget hvad side man befinder sig på.

Hele menuen er rollover og der er så 33 billeder der skal hentes og det giver en del HTTP requests.

Er det muligt og ville det hjælpe at lægge sådanne en menu ind i CSS´en?

Og hvis ja, hvordan skal det gøres?

min men ser sådanne ud:

<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>


<td colspan="4" rowspan="2"><a href="trampoline.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image66','','images/z1.gif',1)"><img src="images/a1.gif" name="Image66" width="173" height="93" border="0"></a></td>

her er også et link til mit website så i kan se det selv:

http://playasmile.comze.com/eng/index.html