I'm in the process of converting a site to PHP and trying to clean up the code a bit while I'm at it. I have a page of photos with a mouseover effect that worked fine in the original site but is not working in the new. I'm sure it's some little thing I'm overlooking but I haven't been able to see it yet.

The original page that works is here.

The new page is here.

The javascript is in an external file called external.js and looks like this:

Code:
function newImage(arg) {
	if (document.images) {
		rslt = new Image();
		rslt.src = arg;
		return rslt;
	}
}

function changeImages() {
	if (document.images && (preloadFlag == true)) {
		for (var i=0; i<changeImages.arguments.length; i+=2) {
			document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
		}
	}
}

var preloadFlag = false;
function preloadImages() {
	if (document.images) {
		photopagenew_16_photopagenew_eg_over = newImage("../_images/office-photos/photopagenew_16-photopagene.jpg");
		photopagenew_16_photopagenew_fountainroom_over = newImage("../_images/office-photos/photopagenew_16-photopag-18.jpg");
		photopagenew_16_photopagenew_chairbooks_over = newImage("../_images/office-photos/photopagenew_16-photopag-19.jpg");
		photopagenew_16_photopagenew_statue_over = newImage("../_images/office-photos/photopagenew_16-photopag-20.jpg");
		photopagenew_16_photopagenew_womb_over = newImage("_images/office-photos/photopagenew_16-photopag-21.jpg");
		photopagenew_16_photopagenew_fountain_over = newImage("_images/office-photos/photopagenew_16-photopag-22.jpg");
		photopagenew_16_photopagenew_desk_over = newImage("_images/office-photos/photopagenew_16-photopag-23.jpg");
		photopagenew_16_photopagenew_plant_over = newImage("_images/office-photos/photopagenew_16-photopag-24.jpg");
		preloadFlag = true;
	}
}
And the pertinent HTML is:

HTML Code:
<img src="_images/office-photos/wide.jpg" alt="Photo of the office" width="514" height="212" style="margin: 20px 0;" />
<!-- ImageReady Slices (photopagenew.psd) -->
<table width="700" border="0" cellpadding="0" cellspacing="0">

	<tr>
		<td>
			<a href="#"
				onmouseover="changeImages('photopagenew_16', '_images/office-photos/photopagenew_16-photopag-21.jpg'); return true;"
				onmouseout="changeImages('photopagenew_16', '_images/office-photos/photopagenew_16.jpg'); return true;">
				<img src="_images/office-photos/photopagenew_womb.jpg" width="80" height="78" border="0" alt="" /></a></td>
		<td>
			<img src="_images/office-photos/photopagenew_02.gif" width="9" height="78" alt="" /></td>
		<td>
			<a href="#"
				onmouseover="changeImages('photopagenew_16', '_images/office-photos/photopagenew_16-photopag-22.jpg'); return true;"
				onmouseout="changeImages('photopagenew_16', '_images/office-photos/photopagenew_16.jpg'); return true;">
				<img src="_images/office-photos/photopagenew_fountain.jpg" width="80" height="78" border="0" alt="" /></a></td>

		<td>
			<img src="_images/office-photos/photopagenew_04.gif" width="9" height="78" alt="" /></td>
		<td>
			<a href="#"
				onmouseover="changeImages('photopagenew_16', '_images/office-photos/photopagenew_16-photopag-23.jpg'); return true;"
				onmouseout="changeImages('photopagenew_16', '_images/office-photos/photopagenew_16.jpg'); return true;">
				<img src="_images/office-photos/photopagenew_desk.jpg" width="80" height="78" border="0" alt="" /></a></td>
		<td>
			<img src="_images/office-photos/photopagenew_06.gif" width="9" height="78" alt="" /></td>
		<td>
			<a href="#"
				onmouseover="changeImages('photopagenew_16', '_images/office-photos/photopagenew_16-photopag-20.jpg'); return true;"
				onmouseout="changeImages('photopagenew_16', '_images/office-photos/photopagenew_16.jpg'); return true;">

				<img src="_images/office-photos/photopagenew_statue.jpg" width="80" height="78" border="0" alt="" /></a></td>
		<td>
			<img src="_images/office-photos/photopagenew_08.gif" width="9" height="78" alt="" /></td>
		<td>
			<a href="#"
				onmouseover="changeImages('photopagenew_16', '_images/office-photos/photopagenew_16-photopag-24.jpg'); return true;"
				onmouseout="changeImages('photopagenew_16', '_images/office-photos/photopagenew_16.jpg'); return true;">
				<img src="_images/office-photos/photopagenew_plant.jpg" width="80" height="78" border="0" alt="" /></a></td>
		<td>
			<img src="_images/office-photos/photopagenew_10.gif" width="8" height="78" alt="" /></td>
		<td>

			<a href="#"
				onmouseover="changeImages('photopagenew_16', '_images/office-photos/photopagenew_16-photopagene.jpg'); return true;"
				onmouseout="changeImages('photopagenew_16', '_images/office-photos/photopagenew_16.jpg'); return true;">
				<img src="_images/office-photos/photopagenew_eg.jpg" width="80" height="78" border="0" alt="" /></a></td>
		<td>
			<img src="_images/office-photos/photopagenew_12.gif" width="8" height="78" alt="" /></td>
		<td>
			<a href="#"
				onmouseover="changeImages('photopagenew_16', '_images/office-photos/photopagenew_16-photopag-18.jpg'); return true;"
				onmouseout="changeImages('photopagenew_16', '_images/office-photos/photopagenew_16.jpg'); return true;">
				<img src="_images/office-photos/photopagenew_fountainroom.jpg" width="80" height="78" border="0" alt="" /></a></td>
		<td>
			<img src="_images/office-photos/photopagenew_14.gif" width="8" height="78" alt="" /></td>

		<td>
			<a href="#"
				onmouseover="changeImages('photopagenew_16', '_images/office-photos/photopagenew_16-photopag-19.jpg'); return true;"
				onmouseout="changeImages('photopagenew_16', '_images/office-photos/photopagenew_16.jpg'); return true;">
				<img src="_images/office-photos/photopagenew_chairbooks.jpg" width="80" height="78" border="0" alt="" /></a></td>
	</tr>
	<tr>
		<td colspan="15">
			<img src="_images/office-photos/photopagenew_16.jpg" alt="" name="photopagenew_16" width="700" height="416" id="photopagenew_16" /></td>
	</tr>
</table>

Can anyone spot what I'm doing wrong?