HTML/Javascript: How Do I Re-Create This Image Script?

I wanna put up an image gallery and I wanna use the same script this website is using: www. antsphoto. com/night_images.html. See? I really like how the images sit perfectly on one side and when your mouse rolls over it, it changes the picture. Can someone give me the HTML to copy %26amp; paste to my page??? I can edit it so that my images go in, I looked at the source and it REALLY confuses me :( Thanks to anyone that can help me!
HTML/Javascript: How Do I Re-Create This Image Script?
I don't think I would use that exact same script they are using. There are a few things about it that I would do differently. The example I have provided below will fit your needs, or at least get you started!:



%26lt;!DOCTYPE -be sure to use one of these!

%26lt;html%26gt;

%26lt;head%26gt;

%26lt;title%26gt;%26lt;/title%26gt;

%26lt;script type=%26quot;text/javascript%26quot;%26gt;

/*** Insert your images paths in this array below (the big images to be shown), and add more as needed -following the same format, note the first one [0] is always used onmouseout as it is the same as the default pic. In this case I am just using a single pixel transparent gif which is the same as the default image in the body with the id=%26quot;changedPic%26quot; in it. ***/

var thepic = new Array();

thepic[0] = %26quot;pixel.gif%26quot;;

thepic[1] = %26quot;pic1.jpg%26quot;;

thepic[2] = %26quot;images/pic2.jpg%26quot;;

thepic[3] = %26quot;http://www.example.com/pic3.jpg%26quot;;



/*** This will preload the images by creating a new Image Object for each one from the 'thepic' Array. ***/

var preLoad = new Array();

var i;

for (i=0; i %26lt; thepic.length; i++){

preLoad[i] = new Image();

preLoad[i].src = thepic[i];

}

/*** This function below will change the src= value of the img with the %26quot;changedPic%26quot; id in it. Note in the mouseovers and mouseouts in the thumbnails img's you just need to pass a number to the function, then the parameter (what) will hold that value. The number (what) corresponds exactly to the number of the images file path in the 'thepic' Array above. Always (0) on mouseout. ***/

function showPic(what){

document.getElementById (%26quot;changedPic%26quot;).src = preLoad[what].src;

}

%26lt;/script%26gt;

%26lt;/head%26gt;

%26lt;body%26gt;

%26lt;div style=%26quot;float:left;%26quot;%26gt;

%26lt;img src=%26quot;1_th.jpg%26quot; alt=%26quot;1_th.jpg%26quot; title=%26quot;%26quot; width=%26quot;50%26quot; height=%26quot;50%26quot; onmouseover=%26quot;showPic(1);%26quot; onmouseout=%26quot;showPic(0);%26quot; /%26gt;

%26lt;img src=%26quot;2_th.jpg%26quot; alt=%26quot;2_th.jpg%26quot; title=%26quot;%26quot; width=%26quot;50%26quot; height=%26quot;50%26quot; onmouseover=%26quot;showPic(2);%26quot; onmouseout=%26quot;showPic(0);%26quot; /%26gt;

%26lt;img src=%26quot;3_th.jpg%26quot; alt=%26quot;3_th.jpg%26quot; title=%26quot;%26quot; width=%26quot;50%26quot; height=%26quot;50%26quot; onmouseover=%26quot;showPic(3);%26quot; onmouseout=%26quot;showPic(0);%26quot; /%26gt;

%26lt;/div%26gt;

%26lt;div style=%26quot;float:left; margin-left:40px;%26quot;%26gt;

%26lt;img src=%26quot;pixel.gif%26quot; alt=%26quot;picture%26quot; title=%26quot;%26quot; id=%26quot;changedPic%26quot; /%26gt;

%26lt;/div%26gt;

%26lt;/body%26gt;

%26lt;/html%26gt;