Sometimes you may want to cycle affiliate ads on your site from an array of ads. The ads may be shown randomly or in a sequential fashion. What if the ads are of different sizes?
This script is a solution to all the above problems. This script can cycle images of different sizes on your site in a random or sequential order.
Extract the images directory and this file into the same directory and run the script for a demo.
This script is a solution to all the above problems. This script can cycle images of different sizes on your site in a random or sequential order.
Extract the images directory and this file into the same directory and run the script for a demo.
<!doctype html public "-//w3c//dtd html 4.01 transitional//en">
<html>
<head>
<title>Javascript Image Rotater</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
<!--
// The order of display : True - Random / False - Sequential
var randomOrder = false;
// Default Width of the image (if not set individually)
var defaultWidth = 50;
// Default Height of the image (if not set individually)
var defaultHeight = 50;
// An array of the images to be rotated (Image Path[, Width of the Image[, Height of the Image]])
// If the width and height is not specified, the Default value specified above will be used
var arImg = new Array();
arImg[0] = ['images/1.gif'];<html>
<head>
<title>Javascript Image Rotater</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script type="text/javascript">
<!--
// The order of display : True - Random / False - Sequential
var randomOrder = false;
// Default Width of the image (if not set individually)
var defaultWidth = 50;
// Default Height of the image (if not set individually)
var defaultHeight = 50;
// An array of the images to be rotated (Image Path[, Width of the Image[, Height of the Image]])
// If the width and height is not specified, the Default value specified above will be used
var arImg = new Array();
arImg[1] = ['images/2.gif', 100, 100];
arImg[2] = ['images/3.gif'];
arImg[3] = ['images/4.gif', 25, 25];
arImg[4] = ['images/5.gif'];
function rotateImage(){
if(randomOrder){
index = Math.floor(Math.random() * arImg.length);
}else{
var index = getCookie('rotate_image');
index = index ? index : 0;
index = ++index % arImg.length;
}
(img = document.getElementById('image_id')).src = arImg[index][0];
img.width = (arImg[index][1]) ? arImg[index][1] : defaultWidth;
img.height = (arImg[index][2]) ? arImg[index][2] : defaultHeight;
setCookie('rotate_image', index);
}
/*
Functions for storing and retrieving cookies from my previous example
Check http://www.weberdev.com/get_example-4570.html
*/
function getCookie(name) {
var sPos = document.cookie.indexOf(name + '=');
var len = sPos + name.length + 1;
if((!sPos) && (name != document.cookie.substring(0, name.length))){
return null;
}
if(sPos == -1){
return null;
}
var ePos = document.cookie.indexOf(';', len);
if(ePos == -1) ePos = document.cookie.length;
return unescape(document.cookie.substring(len, ePos));
}
function setCookie(name, value, expires, path, domain, secure){
var today = new Date();
if(expires){
expires = expires * 1000 * 3600 * 24;
}
document.cookie = name+'='+escape(value) +
((expires) ? ';expires=' + new Date(today.getTime() + expires).toGMTString() : '') +
((path) ? ';path=' + path : '') +
((domain) ? ';domain=' + domain : '') +
((secure) ? ';secure' : '');
}
//-->
</script>
</head>
<body onload="rotateImage()">
<img src="images/1.gif" id="image_id" width="50" height="50" border="0" alt=""/>
</body>
</html>
0 comments: