Cargar diferentes imagenes en un boton al cargar la pagina

[alexpere]

Hola amigos, quisiera saber si alguien tiene una rutina de javascript mediante la cual se puedan cambiar los archivos grafico pertenecientes a un boton cada vez que se cargue la pagina.

Les expongo un ejemplo de como hacerlo con una imagen sencilla, la cual se modifica cada vez que se carga la pagina, pero no se hacerlos dentro de un boton.

Gacias por la ayuda que me puedan prestar.



<script language="JavaScript">
<!-- inicio funcion banner
var banner = 4;
var now = new Date()
var sec = now.getSeconds()
var ad = sec % banner;
ad +=1;
if (ad==1) {
url="registro.htm";
alt="Inicio";
banner=" www.arepaeditorial.com.ve/images/arepa01.jpg";
width="174";
height="86";
}
if (ad==2) {
url="registro.htm";
alt="Inicio";
banner=" www.arepaeditorial.com.ve/images/arepa02.jpg";
width="174";
height="86";
}
if (ad==3) {
url="registro.htm";
alt="Inicio";
banner=" www.arepaeditorial.com.ve/images/arepa03.jpg";
width="174";
height="86";
}
if (ad==4) {
url="registro.htm";
alt="Inicio";
banner=" www.arepaeditorial.com.ve/images/arepa04.jpg";
width="174";
height="86";
}
document.write('<center>');
document.write('<a href=\"' + url + '\" target="_self">');
document.write('<img src=\"' + banner + '\" width=')
document.write(width + ' height=' + height + ' ');
document.write('alt=\"' + alt + '\" border=0><br></a>');
document.write('</center>');
// Final funcion banner -->
</script>

Necesito hacer esto mismo pero dentro de un boton

<a target="_self" href="registro.htm">
<img border="0" id="img1" src="www.arepaeditorial.com.ve/images/button3.gif" onmouseover="www.arepaeditorial.com.ve/images/button3b.gif" onmouseout="www.arepaeditorial.com.ve/images/button3a.gif">
</a>

Donde las imagenes que varien sean button3a.gif y button3b.gif