samedi 27 décembre 2014

how to randomize image once it is clicked?


I am trying to create a random gif generator. Very simple in design, just have the gif/img load in and once the user clicks/taps it randomizes and pulls another random image from the array.


For now I would just like to have the image randomize when it is clicked.


Currently it only randomizes when the page is refreshed.


HTML



<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
<script src="js/rand.js"></script>
<link rel="stylesheet" type="text/css" href="css/style.css">

<head>
<title>Gif Generator - Prototype</title>
</head>

<body>

<h1>Gif Generator - Prototype</h1>

<section>
<p>This image is random</p>
<a href="#" class="click">
<script>
getRandomImage()
</script>
</a>
</section>



</body>


JS



var randomImage = new Array();

randomImage[0] = "images/100.jpg";
randomImage[1] = "images/200.jpg";
randomImage[2] = "images/300.jpg";
randomImage[3] = "images/400.jpg";


function getRandomImage() {
var number = Math.floor(Math.random()*randomImage.length);
document.write('<img src="'+randomImage[number]+'" />');
}




Aucun commentaire:

Enregistrer un commentaire