Image swaping

I am new to javascript but have a fairly good understanding of it but am having a problem whith this. First I want to start off with loading a bunch of variables (they are images I am using as variables). Then I will have some buttons on one side of the sreen. Depending what button is pressed, it will display an image on the other side of the screen. I know i need to create an event for this to happen, but I am having a problem getting it right.

(this is for my variables, I know I need the event in here, but not having any luck)

<SCRIPT LANGUAGE="JavaScript">

<!--

if (document.images) {

  var pic1 = new Image();

  pic1.src = "..pic1.gif";

  var pic2 = new Image();

  pic2.src = "..pic2.gif";

}

//-->

</SCRIPT>

(this is my buttons on the one side of the page)

<button type="button" onclick="pic1()">Show Image 1</button>

<button type="button" onclick="pic2()">Show Image 2</button>

(and finnaly this is my action to display the image on the otherside, I just called it function1 for now)

<p id="function1">

It might be better to post in Java Script forum rather than PHP!