Random images on click

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".