Son botones hechos con rollovers de dos estados. En un estado el botón esta normal y en el segundo estado la imagen del botón tiene el efecto de brillo y se acciona con el evento OnMouseOver.
El codigo es este, a ver si me explico:
- Paso 1 -
Entre el <head> y el </head> del sitio vas a poner la siguiente funcion Javascript:
<SCRIPT languaje="JavaScript">
function mueveimg(img_name,img_src)
{
document[img_name].src=img_src;
}
</SCRIPT>
- Paso 2 -
Cada imagen que quieras que cambie cuando pase el mouse deberas agregarle un parametro name="nombre de la imagen" donde podras ponerle un nombre cualquiera a la imagen (no necesariamente el del archivo) pero que no se repitan.
- Paso 3 -
Vas a poner como ligas los botones que es donde quieres que al pasar el mouse cambie la imagen con el siguiente formato:
<a href="#" onmouseover="mueveimg('nombre que le diste a la imagen','URL de la imagen CON el mouse encima');return true;" onmouseout= "mueveimg('nombre que le diste a la imagen','URL de la imagen SIN el mouse encima');return true;"><img name="nombre que le diste a la imagen" border="0" src="URL de la imagen SIN el mouse encima"></a>
(poco lioso )
Consideraciones:
- En la liga "nombre que le diste a la imagen" debe ser exactamente el mismo del parametro name="nombre de la imagen"
- Debes tener cuidado con las URL de las dos imagenes (con y sin mouse)
CASO PRACTICO
<!-- Funcion para traslapar las imagenes-->
<head>
<SCRIPT languaje="JavaScript">
function mueveimg(img_name,img_src)
{
document[img_name].src=img_src;
}
</SCRIPT>
</head>
<body>
<!-- Codigo de uno solo de los botones, uno por cada boton -->
<a href="#" onmouseover="mueveimg('MiImagen','MiImagenOn.gif');return true;" onmouseout= "mueveimg('MiImagen','MiImagenOff.gif');return true;"><img name="MiImagen" border="0" src="MiImagenOff.gif" width="80" height="80"></a>
</body>
