problema con div y css??.. y javascrip..(cambian la imagen del boton)

[fenixtx]

Hola a todos,
No estoy seguro si el tema va exactamente aca. pero puede que a alguno le habra pasado alguna vez.

primero acepto que soy un novato en el uso de div con css y javascript..(pero quiero salir adelante con este tema, por eso estoy aqui) :)

mi problema es el siguiente:

lo que quiero es cambiar el boton cuando haga click sobre el..o cuando pase sobre el y el codigo que tengo es este.

El problema es que no pasa nada y no se por que:
html

Código:

<div id="menu">
  <ul>
    <li>
    <a href="#"
            onmouseover="window.status='contacto'; changeImages('contacto', 'images/contacto-over.jpg'); return true;"
            onmouseout="window.status=''; changeImages('contacto', 'images/contacto.jpg'); return true;"
            onmousedown="changeImages('contacto', 'images/contacto-over.jpg'); return true;"
            onmouseup="changeImages('contacto', 'images/contacto-over.jpg'); return true;">
            <img name="contacto" src="images/contacto.jpg" width="67" height="38" border="0" alt="contacto"></a>
	</li>
    <li>
   <a href="#"
            onmouseover="window.status='consultas'; changeImages('consultas', 'images/consultas-over.jpg'); return true;"
            onmouseout="window.status=''; changeImages('consultas', 'images/consultas.jpg'); return true;"
            onmousedown="changeImages('consultas', 'images/consultas-over.jpg'); return true;"
            onmouseup="changeImages('consultas', 'images/consultas-over.jpg'); return true;">
			<img name="consultas" src="images/consultas.jpg" width="65" height="38" border="0" alt="consultas"></a>    
     </li>
    <li>
    <a href="#"
            onmouseover="window.status='fotos'; changeImages('fotos', 'images/fotos-over.jpg'); return true;"
            onmouseout="window.status=''; changeImages('fotos', 'images/fotos.jpg'); return true;"
            onmousedown="changeImages('fotos', 'images/fotos-over.jpg'); return true;"
            onmouseup="changeImages('fotos', 'images/fotos-over.jpg'); return true;">
			<img name="fotos" src="images/fotos.jpg" width="43" height="38" border="0" alt="fotos"></a> 
    </li>
    <li>
        <a href="#"
            onmouseover="window.status='nosotros'; changeImages('nosotros', 'images/nosotros-over.jpg'); return true;"
            onmouseout="window.status=''; changeImages('nosotros', 'images/nosotros.jpg'); return true;"
            onmousedown="changeImages('nosotros', 'images/nosotros-over.jpg'); return true;"
            onmouseup="changeImages('nosotros', 'images/nosotros-over.jpg'); return true;">
            <img name="nosotros" src="images/nosotros.jpg" width="63" height="38" border="0" alt="nosotros"></a>
   
    </li>
    <li>
        <a href="#"
				onmouseover="window.status='politica'; changeImages('politica', 'images/politica-over.jpg'); return true;"
				onmouseout="window.status=''; changeImages('politica', 'images/politica.jpg'); return true;"
				onmousedown="changeImages('politica', 'images/politica-over.jpg'); return true;"
				onmouseup="changeImages('politica', 'images/politica-over.jpg'); return true;">
			<img name="politica" src="images/politica.jpg" width="60" height="38" border="0" alt="politica"></a>   
    </li>
    <li>
        
    <a href="#"
				onmouseover="window.status='empresa'; changeImages('empresa', 'images/empresa-over.jpg'); return true;"
				onmouseout="window.status=''; changeImages('empresa', 'images/empresa.jpg'); return true;"
				onmousedown="changeImages('empresa', 'images/empresa-over.jpg'); return true;"
				onmouseup="changeImages('empresa', 'images/empresa-over.jpg'); return true;">
				<img name="empresa" src="images/empresa.jpg" width="76" height="38" border="0" alt="empresa"></a>    

    </li>
  </ul>
  </div>

java script

Código:

<script type="text/javascript">
<!--

function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		empresa_over = newImage("images/empresa-over.jpg");
		politica_over = newImage("images/politica-over.jpg");
		nosotros_over = newImage("images/nosotros-over.jpg");
		fotos_over = newImage("images/fotos-over.jpg");
		consultas_over = newImage("images/consultas-over.jpg");
		contacto_over = newImage("images/contacto-over.jpg");
		preloadFlag = true;
	}
}

// -->
</script>

CSS

Código:

#menu {background-color: #5c5c5c;
height: 38px;
}
#menu ul {text-align: left;}
#menu ul li {float: right;
list-style:none;
width: 16,6%;
}
#menu ul li a {
line-height: 34px;
font-family: "Century Gothic";
font-weight: bold;
text-decoration: none;
display: block;
width: 99%;
}

Muchas gracias a todos de antemano y espero que le sirva a alguien mas si se soluciona :).

Saludos

[fenixtx]

Bueno, tambien tengo un aporte mas... es que lo tengo diseñado con tablas y me funciona bien..pero decidi migrar a css por que cada vez que quiero agregar algo me queda un desastre...

bueno si alguien tiene alguna idea..muchas gracias..

[fenixtx]

Disculpen, pero ya lo solucione y fue por una tontera que se me paso....fue abilitar en el body la función del preload imagen xD


saludos ojala le sirva a alguien ...

<body onLoad="preloadImages();">