proba con esto:
<html>
<head>
<style type="text/css">
<!--
.fondo { background-image: url(fondo1.gif)}
.fondo2 { background-image: url(fondo2.gif)}
-->
</style>
<script language="JavaScript">
function volver_fondo(id_capa){
document.getElementById(id_capa).className="fondo" ;
}
function cambiar_fondo(id_capa){
document.getElementById(id_capa).className="fondo2 ";
}
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000">
<div id="capa1" class="fondo" style="position:absolute; left:303px; top:1px; width:344px; height:167px; z-index:1"></div>
<div id="capa2" class="fondo" style="position:absolute; left:303px; top:246px; width:344px; height:167px; z-index:1"></div>
<a href="#" onMouseOver="cambiar_fondo('capa1')" onMouseOut="volver_fondo('capa1')">1</a>
<br><a href="#" onMouseOver="cambiar_fondo('capa2')" onMouseOut="volver_fondo('capa2')">2</a>
</body>
</html>
Tenes que tener en el mismo directorio dos imagenes (fondo1.gif y fondo2.gif)
Dependiendo de la cantidades de capas y fondos se pueden hacer otras cosas.
suerte.
PD. entra a hotscripts.com o dynamicsdrives.com (aunque por que no forosdelweb.com) que hay muchos ejemplos.