- HubPages»
- Technology»
- Computers & Software»
- Computer Science & Programming»
- Programming Languages
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>
- Javascript: Pop-up window from a HTML link
- Javascript: How to create a simple slide show with clickable links
- Javascript: Pop up Message Box On Submit
- Javascript: How to disable Right Click option
- Javascript: Controlling the number of characters entered into a HTML form field.
- Javascript: How to refresh parent window from a pop-up after closing pop-up
- Javascript: Drop Down Menu List
- Javascript: A simple calendar with today's date highlighted.
- Javascript: How to hide and show other form fields with a select box with Javascript and HTML
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.