Another thing that may be happening is that the JavaScript that refers to those IMG elements is getting called before the browser parses the IMG tag, in which case the elements may not exist in the Document Object Model yet even though they do exist in the HTML file.
For small images such as buttons, I usually dispense with all the preloader crap in the document's HEAD and just set an IMG tag's source to an absolute URL in the mouseover and mouseout code, like so:
HTML Code:
<a href="home.html" onmouseover="document.images['button1'].src='home_rollover.gif';" onmouseout="document.images['button1'].src='home_default.gif';"><img name="button1" src="home_default.gif" border="0"></a>
Keeping the rollover code close to the IMG tag itself assures that the tag will be loaded before the event handler is likely to be called.
By the way, the "if (document.images)" tests in your code are unnecessary, since every DOM and older DHTML model (e.g., IE4 & NS4) has a document.images collection - there's no need to test for it.