Unobtrusive Random Images
3. Add to Your Page
More of this Feature
Now that we have the actual script, the next step is to define the actuial random imagesa that we want it to display. The first step in doing this is to place some code into our HTML that defines where we want each random image to appear. The simplest format for doing this is:
You can use whatever id you like as long as each is unique. Note also that if you place something inside the div to display when JavaScipt is not available that you will need to add code to your JavaScript to hide that content when JavaScript is enabled as the script adds the image into the div without removing whatever is already there.
The next step is to add the JavaScript that will actually insert a randomly selected image into the div. This code needs to run after the div has been loaded and so can go in code called from the onload event handler or simply be added to the bottom of the web page.
Let's go through the parts of this call one at a time so you can tell what it is that you need to put where.
- i2 is the name of the object we are going to use to store the random image. Since the script allows us to have the image automatically replaced after a specified time we'll need this object reference so as to be able to tell the timer which image we are updating.
- 'randimg2' identifies the id in the page where the image is to appear
- 60,60 the width and height of the images (respectively). This script only works if all the images are displayed at the same size and will resize any that are not. Better that you have them all that size to start with).
- 10 is the number of seconds we want the image to appear for before it gets replaced with another randomly selected image. It doesn't matter what you specify here if you are not going to replace the image after the page displays since it only gets used if you call the timer for the image.
- mqAry1 is the name of the array containing the image source filenames.
So of course the next thing you'll need to create is that array of image names.
This array should be added to the top of the randimg.js file above the script. You can of course give the array whatever name you like as long as you use the same name in both places. You can also use the same or a different array if you are placing multiple random images on your pages. Note also that you will need to add the path to the image to the front of the filenames if the images are in a different location to the page that will display them.
With that code in place our page will now load a random image from the array into the specified spot in the page every time that the page is loaded. If we want to have it replace the image automatically after the page is loaded then we need to add one more line of code to the JavaScript to call the timer.
This statement needs to come after the one defining the random image object and both of the references in the statement need to refer back to that object by the same name you gave to the object.
For those having trouble working out just how to add these statements to your JavaScript, the example page adds the two random images to the page using the following code above the main script.
function start() {
var i1 = new randImg('randimg1',60,60,4,mqAry1);
var i2 = new randImg('randimg2',60,60,10,mqAry1);
setTimeout(function() {replaceImg(i1)},i1.t);
setTimeout(function() {replaceImg(i2)},i2.t);
}
window.onload = start;