rollover images in a menu

allright, I was wondering if there was anyway to use rollover images inside a loop. I have a simple javascript (below) that I am using to display a menu. It contains a for loop that writes out the menu for me so that the code is simpler and easier to change. I was wondering if there was anyway I could add mouse over commands to this script, or somehow include them in a loop system so that I don't have as much code to go throught and change if I add pages in the future. Currently everytime I try to add the mouse over command to the document.writeln it just stops everything from working. Is there anyway I can accomplish what I want, or am I just going to have to write out each individual anchor and image tag?

var buttons = new Array ("index","projects","staff","awards");



for (var loop=0; loop <buttons.length; loop++)

{

  document.writeln ("<A HREF='" + buttons[loop] + ".html'><IMG src='images/menu/" + buttons[loop] + ".gif' BORDER=0></A><br>")

}