JavaScript - Principiante botones :S

Hola, tengo un problema a la hora de cargar una serie de botones en una página html, consiste en el cambio de imágen cuando paso el raton por encima del boton. Os pongo el código para que me digais porfavor en que estoy fallando.


<script language="Javascript">
<!--
// Precarga de imágenes
if (document.images) {
var boton01off = new Image();
boton01off.src = "images/boton01off.gif";
var boton01on = new Image();
boton01on.src = "images/boton01on.gif";

var boton02off = new Image();
boton02off.src = "images/boton02off.gif";
var boton02on = new Image();
boton02on.src = "images/boton02on.gif";

var boton03off = new Image();
boton03off.src = "images/boton03off.gif";
var boton03on = new Image();
boton03on.src = "images/boton03on.gif";

var boton04off = new Image();
boton04off.src = "images/boton04off.gif";
var boton04on = new Image();
boton04on.src = "images/boton04on.gif";

var boton05off = new Image();
boton05off.src = "images/boton05off.gif";
var boton05on = new Image();
boton05on.src = "images/boton05on.gif";

var boton06off = new Image();
boton06off.src = "images/boton06off.gif";
var boton06on = new Image();
boton06on.src = "images/boton06on.gif";
}

<!-- boton01 -->
// Carga de imagen cuando el ratón pasa por encima
function entra(boton) {
if (document.images) {
if (boton == 'boton01') {
document.images[boton].src = boton01off.src;
}
}
}

// Carga de imagen cuando el ratón abandona el área de la imagen
function sale(boton) {
if (document.images) {
if (boton == 'boton01') {
document.images[boton].src = boton01on.src;
}
}
}

<!-- boton02 -->

// Carga de imagen cuando el ratón pasa por encima
function entra(boton) {
if (document.images) {
if (boton == 'boton02') {
document.images[boton].src = boton02off.src;
}
}
}

// Carga de imagen cuando el ratón abandona el área de la imagen
function sale(boton) {
if (document.images) {
if (boton == 'boton02') {
document.images[boton].src = boton02on.src;
}
}
}

<!-- boton03 -->

// Carga de imagen cuando el ratón pasa por encima
function entra(boton) {
if (document.images) {
if (boton == 'boton03') {
document.images[boton].src = boton03off.src;
}
}
}

// Carga de imagen cuando el ratón abandona el área de la imagen
function sale(boton) {
if (document.images) {
if (boton == 'boton03') {
document.images[boton].src = boton03on.src;
}
}
}

<!-- boton04 -->

// Carga de imagen cuando el ratón pasa por encima
function entra(boton) {
if (document.images) {
if (boton == 'boton04') {
document.images[boton].src = boton04off.src;
}
}
}

// Carga de imagen cuando el ratón abandona el área de la imagen
function sale(boton) {
if (document.images) {
if (boton == 'boton04') {
document.images[boton].src = boton04on.src;
}
}
}

<!-- boton05 -->

// Carga de imagen cuando el ratón pasa por encima
function entra(boton) {
if (document.images) {
if (boton == 'boton05') {
document.images[boton].src = boton05off.src;
}
}
}

// Carga de imagen cuando el ratón abandona el área de la imagen
function sale(boton) {
if (document.images) {
if (boton == 'boton05') {
document.images[boton].src = boton05on.src;
}
}
}

<!-- boton06 -->

// Carga de imagen cuando el ratón pasa por encima
function entra(boton) {
if (document.images) {
if (boton == 'boton06') {
document.images[boton].src = boton06off.src;
}
}
}

// Carga de imagen cuando el ratón abandona el área de la imagen
function sale(boton) {
if (document.images) {
if (boton == 'boton06') {
document.images[boton].src = boton06on.src;
}
}
}

//--> </script>


<a href="#" onMouseOver="entra('boton01');" onMouseOut="sale('boton01');"><img src="images/boton01on.gif" alt="Inicio" border="0" name="boton01"></a>

<!--<a href="#" onMouseOver="entra('boton02');" onMouseOut="sale('boton02');">--><img src="images/boton02off.gif" alt="Servicios" border="0" name="boton02"><!--</a>-->

<a href="#" onMouseOver="entra('boton03');" onMouseOut="sale('boton03');"><img src="images/boton03on.gif" alt="Clientes" border="0" name="boton03"></a>

<a href="#" onMouseOver="entra('boton04');" onMouseOut="sale('boton04');"><img src="images/boton04on.gif" alt="Trabajos" border="0" name="boton04"></a>

<a href="#" onMouseOver="entra('boton05');" onMouseOut="sale('boton05');"><img src="images/boton05on.gif" alt="Conocenos" border="0" name="boton05"></a>

<a href="#" onMouseOver="entra('boton06');" onMouseOut="sale('boton06');"><img src="images/boton06on.gif" alt="Contacta" border="0" name="boton06"></a>


Muchas Gracias!!

El código visto:

<script language="Javascript">
<!--
// Precarga de imágenes
if (document.images) {
var boton01off = new Image();
boton01off.src = "images/boton01off.gif";
var boton01on = new Image();
boton01on.src = "images/boton01on.gif";

var boton02off = new Image();
boton02off.src = "images/boton02off.gif";
var boton02on = new Image();
boton02on.src = "images/boton02on.gif";

var boton03off = new Image();
boton03off.src = "images/boton03off.gif";
var boton03on = new Image();
boton03on.src = "images/boton03on.gif";

var boton04off = new Image();
boton04off.src = "images/boton04off.gif";
var boton04on = new Image();
boton04on.src = "images/boton04on.gif";

var boton05off = new Image();
boton05off.src = "images/boton05off.gif";
var boton05on = new Image();
boton05on.src = "images/boton05on.gif";

var boton06off = new Image();
boton06off.src = "images/boton06off.gif";
var boton06on = new Image();
boton06on.src = "images/boton06on.gif";
}

<!-- boton01 -->
// Carga de imagen cuando el ratón pasa por encima
function entra(boton) {
if (document.images) {
if (boton == 'boton01') {
document.images[boton].src = boton01off.src;
}
}
}

// Carga de imagen cuando el ratón abandona el área de la imagen
function sale(boton) {
if (document.images) {
if (boton == 'boton01') {
document.images[boton].src = boton01on.src;
}
}
}

<!-- boton02 -->

// Carga de imagen cuando el ratón pasa por encima
function entra(boton) {
if (document.images) {
if (boton == 'boton02') {
document.images[boton].src = boton02off.src;
}
}
}

// Carga de imagen cuando el ratón abandona el área de la imagen
function sale(boton) {
if (document.images) {
if (boton == 'boton02') {
document.images[boton].src = boton02on.src;
}
}
}

<!-- boton03 -->

// Carga de imagen cuando el ratón pasa por encima
function entra(boton) {
if (document.images) {
if (boton == 'boton03') {
document.images[boton].src = boton03off.src;
}
}
}

// Carga de imagen cuando el ratón abandona el área de la imagen
function sale(boton) {
if (document.images) {
if (boton == 'boton03') {
document.images[boton].src = boton03on.src;
}
}
}

<!-- boton04 -->

// Carga de imagen cuando el ratón pasa por encima
function entra(boton) {
if (document.images) {
if (boton == 'boton04') {
document.images[boton].src = boton04off.src;
}
}
}

// Carga de imagen cuando el ratón abandona el área de la imagen
function sale(boton) {
if (document.images) {
if (boton == 'boton04') {
document.images[boton].src = boton04on.src;
}
}
}

<!-- boton05 -->

// Carga de imagen cuando el ratón pasa por encima
function entra(boton) {
if (document.images) {
if (boton == 'boton05') {
document.images[boton].src = boton05off.src;
}
}
}

// Carga de imagen cuando el ratón abandona el área de la imagen
function sale(boton) {
if (document.images) {
if (boton == 'boton05') {
document.images[boton].src = boton05on.src;
}
}
}

<!-- boton06 -->

// Carga de imagen cuando el ratón pasa por encima
function entra(boton) {
if (document.images) {
if (boton == 'boton06') {
document.images[boton].src = boton06off.src;
}
}
}

// Carga de imagen cuando el ratón abandona el área de la imagen
function sale(boton) {
if (document.images) {
if (boton == 'boton06') {
document.images[boton].src = boton06on.src;
}
}
}
//-->
</script>

<a href="#" onMouseOver="entra('boton01');" onMouseOut="sale('boton01');"><img src="images/boton01on.gif" alt="Inicio" border="0" name="boton01"></a>

<a href="#" onMouseOver="entra('boton02');" onMouseOut="sale('boton02');"><img src="images/boton02off.gif" alt="Servicios" border="0" name="boton02"></a>

<a href="#" onMouseOver="entra('boton03');" onMouseOut="sale('boton03');"><img src="images/boton03on.gif" alt="Clientes" border="0" name="boton03"></a>

<a href="#" onMouseOver="entra('boton04');" onMouseOut="sale('boton04');"><img src="images/boton04on.gif" alt="Trabajos" border="0" name="boton04"></a>

<a href="#" onMouseOver="entra('boton05');" onMouseOut="sale('boton05');"><img src="images/boton05on.gif" alt="Conocenos" border="0" name="boton05"></a>

<a href="#" onMouseOver="entra('boton06');" onMouseOut="sale('boton06');"><img src="images/boton06on.gif" alt="Contacta" border="0" name="boton06"></a>

Apenas he quitado algunos signos que estaban fuera de lugar, el resto parece estar bien. Aunque conviene señalar que se puede conseguir el mismo resultado con menos código, de forma más fácil y eficaz.

Un Saludo.

Muchas gracias!! Me ha servido de mucho :D:D:D:D

Podrias poner el codigo que simplifica estas funciones, precisamente estoy intentando, hacer un album de fotos que cuando se situe el cursor, encima de la imagen cambie la imagen y al hacer click sobre ella se vea en una ventana aparte y aumentada. Gracias de antemano