I had a go at that getElementsByName method, but it didn't seem to work. It displays a table with the varicolored squares, but doesn't change them to anything on mouseover. I changed blue.png to bluesquare.png, red.png to redsquare.png, orang.png to orangesquare.png, and blank.png to whitesquare.png. All the images are the same size. I've uploaded the page to my website so you can investigate if you like.
But, as far as I understand it, the first function gets every element, and does the doMouseOver function on mouseover, and the doMouseOut function on mouseout. The second function gets all the elements that share the same name and changes their image to blank.png (whitesquare.png in the linked page). The last function changes everything back to the original image. Is that about right, or am I missing a key element?
I really appreciate your showing the entire code so I can see where everything needs to go and how it should look; it's a great help.