ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel

Javascript: Rotate a different image when the page is reloaded

Updated on September 11, 2012

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.

Click to Rate This Article