Hola
A ver, aquí te dejo un sencillito ejemplo de imágenes que cambian al pasar el ratón por encima, trata de adaptarlo a tus necesidades, es decir, cambia el nombre de las imágenes y sus tamaño, de igual forma puedes variar las posiciones a fin de que estén acorde a tu diseño:
Código:
<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es">
<head>
<script type="text/javascript">
<!--
var imagen = new Array(2);
{
imagen[0]= new Image (50,50);
imagen[0].src="imagen_00.gif";
imagen[1]= new Image (50,50);
imagen[1].src="imagen_01.gif";
}
function cambiar(nimbre_imagen,x) {
document.getElementById(nombre_imagen).src = imagen[x].src
}
//-->
</script>
<title>Imágenes que cambian al pasar el ratón por encima</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
<div style="position: absolute; top: 10px; left: 10px;"><img src="imagen_01.gif" width="34" height="35" id="imagen_0" onmouseover="javascript:cambiar('imagen_0',0)" onmouseout="javascript:cambiar('imagen_0',1)" alt="" /></div>
</body>
</html>
También recuerda que cada imagen no debe pesar mucho. Si haces esto, cargará rápidamente, si tienes problemas con este código, déjans verlo cuando lo hayas implementado en tu página.
Suerte
Felicidad