Hi,
I recently found a great code to rotate images onLoad, either randomly or in order. Its a great code and all, but I would like to use it for something else, too. Unfortunately, I have not successfully customized it...
The code is:
(Source:
... and what I want to do is use the same code (with different variables) to also rotate captions for the images onLoad, in order. This is tricky, since the captions need to correspond with the images, otherwise, there's no point. The caption is inside a paragraph:
If anyone can help me, that would be great.
SWagner
I recently found a great code to rotate images onLoad, either randomly or in order. Its a great code and all, but I would like to use it for something else, too. Unfortunately, I have not successfully customized it...
The code is:
Code:
<!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'];
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);
}
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>... and what I want to do is use the same code (with different variables) to also rotate captions for the images onLoad, in order. This is tricky, since the captions need to correspond with the images, otherwise, there's no point. The caption is inside a paragraph:
Code:
<p id="caption">...caption text to be rotated...</p>If anyone can help me, that would be great.
SWagner
