Hola te dejo el codigo en javascript y basicamente se trata de los 3 eventos del boton, cuando aproximas, cuando haces click, y cuando sueltas y hace un efecto rollover, las imagenes se insertan en un array (ImageList).
Lo que hay entre las etiquetas <html> lo pones evidentemente en una pag html,
ah !! no te olvides de poner en el mismo directorio 3 botones que podian ser distintos en color o tono para hacer el efecto, y que se llamen
normal.jpg
encima.jpg
abajo.jpg
espero haberte ayudado
pmike
<HTML>
<HEAD>
<TITLE>Prueba de Efecto Botones por pmike</TITLE>
</HEAD>
<Script Language="JavaScript">
nMaxItem = 4;
NameIndex = 0;
DefaultState = 1;
MouseOverState = 2;
MouseDownState = 3;
imgCounter = 0;
ImageList = new Array();
bIsSupportOK = (
((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 3 )) ||
((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 ))
);
<!-- Funcion para insertar los 3 botones en funcion de los 3 eventos del raton -->
function AddImageToImageList(name, Default, MouseOver, MouseDown)
{
ImageList[imgCounter] = new Array(nMaxItem);
ImageList[imgCounter][NameIndex] = name;
ImageList[imgCounter][DefaultState] = new Image();
ImageList[imgCounter][DefaultState].src = Default;
if (MouseOver != "") {
ImageList[imgCounter][MouseOverState] = new Image();
ImageList[imgCounter][MouseOverState].src = MouseOver;
}
if (MouseDown != "") {
ImageList[imgCounter][MouseDownState] = new Image();
ImageList[imgCounter][MouseDownState].src = MouseDown;
}
imgCounter++;
}
<!-- Funcion para hacer los rollover o cambios de los 3 botones en funcion de los 3 eventos del raton -->
function ReplaceImage(name, state)
{
for (i = 0; i < imgCounter; i++) {
if (document.images[ImageList[i][NameIndex]] != null) {
if ((name == ImageList[i][NameIndex]) && (ImageList[i][state] != null))
document.images[name].src = ImageList[i][state].src;
}
}
}
AddImageToImageList("tag_a", "normal.jpg", "encima.jpg", "abajo.jpg");
</Script>
<BODY>
<A HREF=""
ONMOUSEDOWN="if (bIsSupportOK) ReplaceImage('tag_a', MouseDownState);"
ONMOUSEUP="if (bIsSupportOK) ReplaceImage('tag_a', MouseOverState);"
ONMOUSEOUT="if (bIsSupportOK) ReplaceImage('tag_a',DefaultState);window.status=w indow.defaultStatus;return true"
ONMOUSEOVER="if (bIsSupportOK) ReplaceImage('tag_a', MouseOverState); window.status='';return true;"
TARGET="">
<IMG NAME="tag_a" SRC="normal.jpg" ALT="" WIDTH="97" HEIGHT="30" BORDER="0"></A>
</BODY>
</HTML>