Foro de elhacker.net

Hola.

Estoy intentando hacer que cada vez que se pasa el ratón por encima de un enlace se cargue una imagen diferente a la que tiene cuando no pasa el ratón por encima.
Pero la función quiero que se utilice para todos los enlaces, pero cada enlace tiene su respectiva imagen con su respectivo nombre, entonces he creado un par de funciones para que se cargue una imagen u otra según el nombre que le pases a la función.

Aquí está el código de la javascript:

boton_on = new Image();
boton_off = new Image();
function entra_boton(boton){
	boton_on.src = "imatges/botons/" + boton + ".png";
	boton_off.src = "imatges/botons/" + boton + "b.png";
	document.images[boton].src = boton_on.src;
}
function sale_boton(boton){
	document.images[boton].src = boton_off.src;
}
 

y aquí el código del enlace/imagen que tiene que cambiar su aspecto cuando pasa el ratón por encima:

<a href = "estudios.php" onmouseover = "entra_boton(boton1)" onmouseout = "sale_boton(boton1)">
      <img src = "imatges/botons/boton1.png" name = "boton1" border="0">
</a>
 

Bien, pues no me funciona, a ver si alguien puede decirme que pasa.

Gracias de antemano.

Me autorespondo.

Era una tontería, como no, fallo en la sintaxis.

Cuando llamo la función desde el onmouseon tengo que ponerle comillas simples al parámetro que le envío a la función:

Esto estaría bien:

<a href = "estudios.php" onmouseover = "entra_boton('boton1')" onmouseout = "sale_boton('boton1')">
      <img src = "imatges/botons/boton1.png" name = "boton1" border="0">
</a>
 

Esto está mal:

<a href = "estudios.php" onmouseover = "entra_boton(boton1)" onmouseout = "sale_boton(boton1)">
      <img src = "imatges/botons/boton1.png" name = "boton1" border="0">
</a>
 

Y otra cosa, he simplificado bastante el código javascript a una linea por función.

function entra_boton(boton){
	document.images[boton].src = "imatges/botons/" + boton + "b.png";
}
function sale_boton(boton){
	document.images[boton].src = "imatges/botons/" + boton + ".png";
}
 

Si el script está mal o a la larga funcionará mal  o simplemente se puede mejorar o algo parecido podríais decírmelo y os lo agradecería.

Porqué no lo haces con CSS?

Por que creo que si lo hago con css tendría que crear un estilo por cada botón que tengo en todas las páginas de la web, ya que no sería la misma imagen para todos los botones. Con el js, si te fijas, se usa el nombre del botón que se le pasa a la función, entonces busca la imagen del botón con el mismo nombre que el botón, así que usando una nomenclatura correcta en las imágenes no tienes que picar mas código.

Si esto que te explico se puede hacer con el css y no tengo que poner un estilo y un id concreto para botón entonces te agradecería que nos lo comentarás, porque para eso esta el post :)