I'm trying to get an image to change to a second image when it is clicked. I'm using a code to randomly pick the image and i want each image to have a seperate second image.
here is the code:


<!-- Begin
// Set up the image files to be used.
var theImages = new Array() // do not change this
// To add more image files, continue with the
// pattern below, adding to the array.
theImages[0] = 'http://freetopwallpaper.com/wp-content/gallery/puppy-pic/puppy-wallpaper-hd-19.jpg'
theImages[1] = 'http://freetopwallpaper.com/wp-content/gallery/puppy-pic/puppy-wallpaper-hd-19.jpg'
theImages[2] = 'http://freetopwallpaper.com/wp-content/gallery/puppy-pic/puppy-wallpaper-hd-19.jpg'
theImages[3] = 'http://freetopwallpaper.com/wp-content/gallery/puppy-pic/puppy-wallpaper-hd-19.jpg'

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');


<!-- Begin
// End -->

Thx........ <:x:cicipie:x:>