Web Services Blog

Home page feature – rotate image on refresh script

This is how to add rotating images to the feature area on your home page.

Create a new text file and copy the content in red below into it. Save the file as rotateImageOnRefresh.js and upload it to Cascade. Place it in the same folder as your index page.

<!-- SET THE MAX FEATURE COUNT (Total -1) -->
var maxFeatureNo = 4  <!-- 5 total - 1 = 4 -->

var featureNo
var myFeature = new Array()
<!-- CHANGE img src= to the file path of your image --!>
<!-- MAKE SURE YOU HAVE ONE FOR EACH FEATURE IMAGE -->
myFeature[0] = '<img src="images/features/01.jpg" width="688" alt="Put your ALT tag here" border="0">'

myFeature[1] = '<img src="images/features/02.jpg" width="688" alt="Put your ALT tag here" border="0">'

myFeature[2] = '<img src="images/features/03.jpg" width="688" alt="Put your ALT tag here" border="0">'

myFeature[3] = '<img src="images/features/04.jpg" width="688" alt="Put your ALT tag here" border="0">'

myFeature[4] = '<img src="images/features/05.jpg" width="688" alt="Put your ALT tag here" border="0">'

<!-- DONT TOUCH --> featureNo = Math.round(Math.random() * maxFeatureNo) document.write(myFeature[featureNo])

<!-- IF NOTHING DISPLAYS ON THE PAGE THEN SOMETHING IS WRONG -->

Edit your index page. Copy the following content in red where you want your images to be displayed.

<script src="pathToFile/rotateImageOnRefresh.js"></script>

Submit your index page. Publish the rotateImageOnRefresh.js file, your index page and all the images that will rotate when the page is refreshed.