Javascript: Rotate a different image when the page is reloaded

Description:

After creating a web page, keeping it updated is the hardest part. There are times when you would like an image to change every time the user refreshes the page, or comes back to visit. This gives the feel that content has changed on the site.

With javascript, this is a pretty simple set-up. The example below illustrates this.

Javascript example 1

In example 1, the images are in the same directory as the file with the javascript.

Place the following javascript between the <HEAD></HEAD tags of your web page.

 <script type="text/javascript">
            var picPaths = ['image1.jpg','image2.jpg','image3.jpg','image4.jpg'];
            var oPics = [];
            for(i=0; i < picPaths.length; i++){
                oPics[i] = new Image();
                oPics[i].src = picPaths[i];
            }
            curPic = Math.floor(Math.random()*oPics.length);
            window.onload=function(){
                document.getElementById('imgRotator').src = oPics[curPic].src;
            }
        </script>

Javascript example 2

Example 2, the images are in a different directory as the web page calling the images. Also, it can rotate through gif, jpg or png images.

  <script type="text/javascript">
            var picPaths = ['images/image1.gif','images/image2.jpg','images/image3.jpg'];
            var oPics = [];
            for(i=0; i < picPaths.length; i++){
                oPics[i] = new Image();
                oPics[i].src = picPaths[i];
            }
            curPic = Math.floor(Math.random()*oPics.length);
            window.onload=function(){
                document.getElementById('imgRotator').src = oPics[curPic].src;
				          }
        </script>

HTML

Place the following <HTML> between the <BODY></BODY> tag of your web page.

 <div>
    <img id="imgRotator" src="" alt="" />
 </div>

Javascript: Example 3 Images and Links

The below javascript example allows you to have links with your images that rotate out.

Javascript

Place the following code between the <HEAD></HEAD tags of your web page.

<script type="text/javascript"> 
var ranNum = Math.floor(Math.random() * 3);
        //alert(ranNum);
        var quote = new Array(3)
        var lnk = new Array(3)
          quote[0] = "image1.jpg";
          quote[1] = "image2.jpg";        
          quote[2] = "image3.jpg";

          lnk[0] = "link1.html";      
          lnk[1] = "link2.html"; 
          lnk[2] = "link3.html"; 

</script>

HTML with Images and Links

Place the following HTML/Javascript in the body of your web page.

<script type="text/javascript">                                 
 //<![CDATA[ 
    document.write('<a href="' + lnk[ranNum] + '"><img src="' + quote[ranNum] + '" alt="Description"/></a>')
 //]]>
</script>

Summary

As you can see, that the javascript to perform the image rotation is not to bad. It will add a little dynamic processing on your web page.

More by this Author

  • Tips For How to Stain Concrete Floors
    1

    You don't always have to tile, carpet, or hardwood your floors. The new thing is to just stain the concrete that's already there. It's a lot of work, but if done properly, your home will look gorgeous. If you're...

  • How to Get Rid of Mice In and Around The House?
    5

    Until this year, the only time that I've had mice or rats in the house were when my daughter had pet mice and rats, and one of those times we did have one loose in the house. (Science fair project got loose.) Anyway,...

  • How to Build Wooden Roof Trusses
    21

    You may refer to a truss as the rafter, but it's basically the skeleton of the roof, carrying the weight of the frame and supporting the walls of the building. Trusses are very important to preventing the walls from...


Click to Rate This Article
working