Javascript: Random Image Generator
I wrote a tutorial on generating random links with javascript some months ago. Recently, a person requested to show how to show this method but with images. This is why I’m writing this tutorial about how to create a random image generator.
The first thing you need to do is create an array with the URLs of the images you’re going to use. There are two common ways to do this, as you saw on the random link tutorial.
The condensed array:
1 2 3 4 5 | <script> // Condensed Array var randomImage = new Array("http://url.com/image01.jpg", "http://url.com/image02.jpg", "http://url.com/image03.jpg"); </script> |
Or the regular array:
1 2 3 4 5 6 7 8 9 10 11 | <script> // Regular Array function getRandomImage() { var randomImage = new Array(); randomImage[0] = "http://url.com/image01.jpg"; randomImage[1] = "http://url.com/image02.jpg"; randomImage[2] = "http://url.com/image03.jpg"; } </script> |
You can use any of these two methods. The next step is to create the function that will generate the images using a native random method.
1 2 3 4 5 | <script> var number = Math.floor(Math.random()*randomImage.length); document.write('<img src="'+randomImage[number]+'" />'); } </script> |
And that’s it! All that’s left for you to do is to combine all the code (showed below), which would display the image and every time you refresh the page, a random image from your array will appear.
Here’s the complete code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <script> <!-- // Random Image Generator // Array with random image links is created. You can add as many links as you want/need. // Regular Array var randomImage = new Array(); randomImage[0] = "http://url.com/image01.jpg"; randomImage[1] = "http://url.com/image02.jpg"; randomImage[2] = "http://url.com/image03.jpg"; randomImage[3] = "http://url.com/image04.jpg"; randomImage[4] = "http://url.com/image05.jpg"; function getRandomImage() { var number = Math.floor(Math.random()*randomImage.length); document.write('<img src="'+randomImage[number]+'" />'); } getRandomImage() //--> </script> |
If you have any questions, don’t hesitate to leave a comment.
Javascript: Random Link Generator
This is a very simple code that you can use to generate random links. You can create a button, link, image with this function, which will randomly choose between the specified URLs to visit.
The first thing would be to create the array with the URLs There are two common ways to do this: The condensed array:
1 2 3 4 5 | <script> // Condensed Array var random = new Array("http://google.com", "http://yahoo.com", "http://bing.com", "http://cnn.com"); </script> |
Or the regular array:
1 2 3 4 5 6 7 8 9 10 | <script> // Regular Array var random = new Array(); random[0] = "http://google.com"; random[1] = "http://yahoo.com"; random[2] = "http://bing.com"; random[3] = "http://cnn.com"; </script> |
You can use any of these methods to create the generator, the next step is to create the function that will generate random links using the javascript Math.random method.
1 2 3 4 5 | <script> function randomlink() { window.location = random[Math.floor(Math.random()*random.length)]; } </script> |
And that’s it! All that’s left is to add the HTML portion of the code, it can be a button, image, link, etc. I will use a link for this example:
1 | <a href="javascript:randomlink()">Click here for random link</a> |
This code can be modified to do many different things. For example, if you would like to display random quotes on your website, you could modify this code a little bit to make that happen. I will create a separate tutorial for that, though. Here’s the complete code from this tutorial:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <script> // Random Link Generator // Array with random links is created. You can add as many links as you want/need. /* You can use more than one method to create an array, I will show you two examples */ // Condensed Array var random = new Array("http://google.com", "http://yahoo.com", "http://bing.com", "http://cnn.com"); // or // Regular Array var random = new Array(); random[0] = "http://google.com"; random[1] = "http://yahoo.com"; random[2] = "http://bing.com"; random[3] = "http://cnn.com"; function randomlink() { window.location = random[Math.floor(Math.random()*random.length)]; } </script> // HTML <a href="javascript:randomlink()">Click here for random link</a> |
If you have any questions, don’t hesitate to leave a comment.