Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Ajax and JavaScript

  • Print
  • + Share This
This chapter is from the book

Displaying a Random Image

If your site is rich with graphics, or if you are displaying digital artwork, then you may want to have a random image from your collection appear when the user enters your site. Once again, JavaScript to the rescue! The extremely simple Script 4.18 shows the required HTML, and Script 4.19 provides the JavaScript. Figure 4.15 shows the result of the script, in this case images of a stuffed lion, tiger, and bear (oh, my!).

Figure 4.15

Figure 4.15 Depending on the value of the random number generated by the script, the user is presented with the lion, the tiger, or the bear.

To display a random image:

  1. var myPix = new Array("images/lion.
    → jpg", "images/tiger.jpg",
    → "images/bear.jpg");

    Inside the function choosePic(), as is now familiar, build an array of three images, and stuff it into the variable myPix.

  2. randomNum = Math.floor((Math.
    → random() * myPix.length));

    The variable called randomNum gets the value of a math expression that’s best read from the inside outwards. Math.random generates a random number between 0 and 1, which is then multiplied by myPix.length, which is the number of items in the array (in this case, it’s 3). Math.floor rounds the result down to an integer, which means that the number must be between 0 and 2.

    Script 4.18. This simple HTML creates the page for a random image.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
    → Transitional//EN"
            "http://www.w3.org/TR/xhtml1/DTD/
            → xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
         <title>Random Image</title>
         <script type="text/javascript"
         → src="script10.js"></script>
    </head>
    <body bgcolor="#FFFFFF">
         <img src="images/spacer.gif" width="305"
         → height="312" id="myPicture"
         → alt="some image" />
    </body>
    </html>

    Script 4.19. You can display random images on your page with this script, which uses JavaScript’s Math.random method to generate a random number.

    window.onload = choosePic;
    
    function choosePic() {
         var myPix = new Array("images/lion.jpg","images/tiger.jpg","images/bear.jpg");
         var randomNum = Math.floor((Math.random() *myPix.length));
         document.getElementById("myPicture").src =myPix[randomNum];
    }
  3. document.getElementById
    → ("myPicture").src =
    → myPix[randomNum];

    This says that the source of the image myPicture is set based on the array myPix, and the value at this moment is dependent on the value of randomNum.

  • + Share This
  • 🔖 Save To Your Account