Random images on click - php

Question

I have code on how to random images on refresh however i wan it to be like when i click a button a random images shows up how do i do that?
Here's the code to random images:
<?
$imglist='';
//$img_folder is the variable that holds the path to the banner images. Mine is images/tutorials/
// see that you don't forget about the "/" at the end
$img_folder = "images/tutorials/";
mt_srand((double)microtime()*1000);
//use the directory class
$imgs = dir($img_folder);
//read all files from the directory, checks if are images and ads them to a list (see below how to display flash banners)
while ($file = $imgs->read()) {
if (eregi("gif", $file) || eregi("jpg", $file) || eregi("png", $file))
$imglist .= "$file ";
} closedir($imgs->handle);
//put all images into an array
$imglist = explode(" ", $imglist);
$no = sizeof($imglist)-2;
//generate a random number between 0 and the number of images
$random = mt_rand(0, $no);
$image = $imglist[$random];
//display image
echo '<img src="'.$img_folder.$image.'" border=0>';
?>

Answer 1

Work with JavaScript:
document.getElementById('the-img-id').onclick = function() {
var randomInt = Math.round(Math.random() * 12); // 12 is the max
this.src = '/path/to/images/img-'+randomInt+'.jpg'; // replace the src
}
This works with /path/to/images/img-1.jpg.
You can also make an array:
var myImages = [
'foo.jpg',
'bar.jpg',
'something.jpg',
'someotherting.jpg',
'ahhhanpng.png'
];
// select a element with id="the-img-id"
document.getElementById('the-img-id').onclick = function() {
var randomInt = Math.round(Math.random() * myImages.length-1 ); // Create random number
this.src = '/path/to/images/'+myImages[randomInt]; // replace the src with the new img
}
Look at the comments (after //) and google some code and you will use this succesfully.

Answer 2

you will need to use javascript. Use getElementById("idOfImageElement").src = "newSrc".