Image rollover for all images too bloated

[videoexp]

I have designed a page with a fairly complicated flowchart made up of images. When the user presses a button, all the images in the chart will change to their counterpart image of the same size. It must work in NN4 and there is no need for pre-loading.
The JS code I use works fine. The problem is that it is bloated and inefficient since all I want, is to change ALL the images on the page to their counterparts with a single click, and change them back with another click.
I am sure it is possible to do this using "document.images[i]" array notation and incrementing through the images array, switching each image to its counterpart without giving each image a separate name! But I can't manage to do it. I would be grateful for any help/ideas. Thank you.

Here is a code snippet:

<script language="javascript">

var flowchartURL = "cooling.gif";
flowURL = "pipes.gif";

function reverseImage() {
if (document.images) {
if (flowURL == "pipeshot.gif") flowURL = "pipes.gif";
else flowURL = "pipeshot.gif";

if (flowchartURL == "heating.gif") flowchartURL = "cooling.gif";
else flowchartURL = "heating.gif";

document.chart1.src = flowchartURL;
document.chartf2.src = flowURL;
document.chart3.src = flowchartURL;
document.chartf4.src = flowURL;
}
}

</script>
<IMG SRC="cooling.gif" NAME="chart1" width="70" height="300">
<IMG SRC="pipes.gif" NAME="chartf2" width="70" height="30">
<IMG SRC="cooling.gif" NAME="chart3" width="70" height="300">
<IMG SRC="pipes.gif" NAME="chartf4" width="70" height="30">

<FORM>
<INPUT TYPE="Button" VALUE="Reverse Process" onClick="reverseImage();">
</FORM>

[videoexp]

Beautiful!
Thank you.