Welcome friends to Blogger Codemaster. This is our another post. So in this post, I would like to give you some code scripts by which you can display random images by just using some JavaScript.
So let's get started with our today's topic - DISPLAY RANDOM IMAGES.
WHAT IS A MAIN AIM BEHIND DISPLAYING RANDOM IMAGES?
Today, most web developers are mainly dependent on various ad networks for their earnings. Other than this, all web developers are dependent on images and CSS for user attraction. Many times, we think that here if I can display random images, it would be a wonderful thing. So, here I am with the solution to your problem.
Benefits of Display Random Images:
- It can help the web developers to display random ads in their sites, thus decreasing the amount of ads as the ads will automatically be displayed to users randomly.
- This can be used to give visitors links to other posts.
- This can be used to display random background images.
STEPS FOR CREATING A RANDOM IMAGE GENERATOR (ON BUTTON CLICK)
- Declare an array using JavaScript which will contain the URLs of the images which are to be displayed randomly.
- Add the links or URLs of images in the above declared array. You can also add the height and width in the array for the image size to display on the webpage.
- Declare a JS variable to store the random value generated using this floor(Math.random()*randomImage.length) method. A random number between 0 and the length of the array will get generated that will be assigned to the images to display randomly.
- Now, let us return to the random images selected using a number calculated in the previous step.
- Now, we will put all the above steps in a user-defined function (genRandomImg), which will call by clicking on a Generate Random Image button.
EXAMPLE CODE
<html>
<head>
<title> Random Image Generator </title><!-- Bootstrap core CSS -->
<link href="https://cdn.jsdelivr.net/gh/ToonsHub/beta@main/files/css/bootstrap-v5.css" rel="stylesheet">
</head>
<body style="margin:20px;max-height:max;background-color:#fcffbd">
<script>
function genRandomImg() {
//declare an array to store the images
var ImageSet = new Array();
//insert the URL of images in array
ImageSet[0] = "https://i.imgur.com/z3xBNX2.jpg";
ImageSet[1] = "https://i.imgur.com/HAoxixa.gif";
ImageSet[2] = "https://i.imgur.com/2PzaGf7.jpg";
ImageSet[3] = "https://i.imgur.com/0HD4b3m.jpg";
//generate a number and provide to the image to generate randomly
var number = Math.floor(Math.random()*ImageSet.length);
//return the images generated by a random number
return document.getElementById("result").innerHTML = '<img src="'+ImageSet[number]+'" width="100%"/>';
}
</script>
<center><h2 style="color:green"> <b><u>Random Image Generator</u></b> </h2></center>
<center><h3 style="color:red"> (by <a href="//blogger-codemaster.blogspot.com">Blogger Codemaster</a>) </h3></center> <br>
<center> <p><span style="color:blue"><b>Instructions:</b></span> Click the button to generate and display random images on the webpage </p></center>
<br>
<center> <button onclick="genRandomImg()" type="button" class="btn btn-warning"> Generate Random Image </button> </center>
<br> <br>
<span id="result" align="center"> </span>
</body>
</html>
Here in this example, I have used Bootstrap v5.0 for just beautification of the page. Main code is in between <body> and </body>.
STEPS FOR CREATING A RANDOM IMAGE GENERATOR (AUTO ON PAGELOAD)
- Declare an array using JavaScript which will contain the URLs of the images which are to be displayed randomly.
- Add the links or URLs of images in the above declared array. You can also add the height and width in the array for the image size to display on the webpage.
- Declare a JS variable to store the random value generated using this floor(Math.random()*randomImage.length) method. A random number between 0 and the length of the array will get generated that will be assigned to the images to display randomly.
- Now, let us return to the random images selected using a number calculated in the previous step.
- Now, we will display on the selected image using document.write method.
EXAMPLE CODE
<html>
<head>
</head>
<body style="margin:20px;max-height:max;background-color:#fcffbd">
<script>
//declare an array to store the images
var ImageSet = new Array();
//insert the URL of images in array
ImageSet[0] = "https://i.imgur.com/z3xBNX2.jpg";
ImageSet[1] = "https://i.imgur.com/HAoxixa.gif";
ImageSet[2] = "https://i.imgur.com/2PzaGf7.jpg";
ImageSet[3] = "https://i.imgur.com/0HD4b3m.jpg";
//generate a number and provide to the image to generate randomly
var number = Math.floor(Math.random()*ImageSet.length);
//return the images generated by a random number
document.write('<img src="'+ImageSet[number]+'" width="100%"/>');
</script>
</body>
</html>
Here, we come to the end of our another post. We will discuss various other interesting topics in our upcoming posts.
So uptil then I bid you a goodbye😇.
Please follow our 👉blog and comment💬 below for any queries.
Sir how to make accordion with download buttons.
ReplyDeleteMy next post will be based on Accordion with Stylish buttons and columns.
DeleteSir please tell how to make accordion menu with download buttons.
ReplyDelete