I recently can across this interesting website that shows how you can create cross browser fading effects for images. However, I needed to rotate a number of images displayed in addition to the blending effects. Furthermore, I wanted to have 2 or more sets of rotating images in the same page if possible. So I decided to enhance the javascript provided in the above website. There are 3 steps. Firstly, create a html page and include the js.file called, "rotatingImages.js" as below.
<HEAD>
<SCRIPT language="JavaScript" src="rotatingImages.js" type="text/javascript"></SCRIPT>
<TITLE>Test page</TITLE>
</HEAD>
Then include the following DIV tag, A tag and IMG tag in the body of the html file. Although not very elegant, you will have to declare two javascript arrays to store the hyperlinks (when users click on the image) and the tooltips (when users moveover the image). This is necessary if we want to display more than one set of rotating images in a html page.
<div id="rotatingImagesDiv" style="background-repeat: no-repeat;" >
<a id="linkbanner">
<img id="rotatingImages" src="http://www.abc.com/images/0.jpg"
border="0" hspace="0"
onload="var urls = new Array();
urls[0]='http://www.0.com';
urls[1]='http://www.1.com';
urls[2]='http://www.2.com';
urls[3]='http://www.3.com';
urls[4]='http://www.4.com';
urls[5]='http://www.5.com';
urls[6]='http://www.6.com';
var toolTips = new Array();
toolTips[0]='0 image';
toolTips[1]='1 image';
toolTips[2]='2 image';
toolTips[3]='3 image';
toolTips[4]='4 image';
toolTips[5]='5 image';
toolTips[6]='6 image';
initImagesRotation('http','www.abc.com/images/',7,urls,toolTips,'rotatingImagesDiv','linkbanner','rotatingImages',10000,2000)" />
</a>
</div>
<div id="rotatingImagesDiv1" style="background-repeat: no-repeat;">
<a id="linkbanner1">
<img id="rotatingImages1" src="http://www.abc.com/images/0.jpg"
border="0" hspace="0"
onload="urls = new Array();
urls[0]='http://www.one.com';
urls[1]='http://www.two.com';
urls[2]='http://www.three.com';
urls[3]='http://www.four.com';
urls[4]='http://www.five.com';
urls[5]='http://www.six.com';
urls[6]='http://www.seven.com';
toolTips= new Array();
toolTips[0]='zero image';
toolTips[1]='one image';
toolTips[2]='two image';
toolTips[3]='three image';
toolTips[4]='four image';
toolTips[5]='five image';
toolTips[6]='six image';
initImagesRotation('http','www.abc.com/images/',7,urls,toolTips,'rotatingImagesDiv1','linkbanner1','rotatingImages1',5000,1000)" />
</a>
</div>
Lastly, create the javascript file, "rotatingImages.js" to make it all work. Then enjoy!
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
function RotateImageClass(){
var counter = 1;
var toggleFlag = false;
var imageFiles = new Array();
var timeoutHandler, timer, speed;
var self = this;
function fade(clsid, id, speed, opacStart, opacEnd) {
var percentChange = Math.abs( (opacStart - opacEnd) );
speed = Math.round( (speed / 100) );
//determine the direction for the blending, if start and end are the same nothing happens
var timer = 0, ct;
if(opacStart > opacEnd) {
opacEnd -= 1;
for(ct = opacStart; ct> opacEnd; ct--)
{
setTimeout("changeOpac(" + ct + ",'" + id + "')",(speed*timer));
timer++;
}
} else if(opacStart < opacEnd) {
opacEnd += 1;
for(ct = opacStart; ct < opacEnd; ct++)
{
setTimeout("changeOpac(" + ct + ",'" + id + "')",(speed*timer));
timer++;
}
}
}
this.Init = function() {
timer = parseInt(this.Duration);
speed = parseInt(this.FadingSpeed);
if( speed < 100 )
speed = 100; //Pointless if set too low.
// Need to do this because IE 7 choke when function parameters contains 'http://'!
var prefix = "";
if( this.ProtocolType.indexOf("http",0) > -1 ){
prefix = 'http://';
}
else if( this.ProtocolType.indexOf("file",0) > -1 ){
prefix = 'file:///';
}
for( var i=0; i<this.ImageQuantity; i++ ){
imageFiles[i] = prefix + this.ImageLocation + i + '.jpg';
}
}
this.GetImage = function(index) { return imageFiles[index]; }
this.Rotate = function(){
if( counter < this.ImageQuantity ){
// do nothing
}
else{
counter = 0;
}
// Set tool tips
setTimeout("document.getElementById('" + this.ImageId + "').title='"
+ this.ToolTipArray[counter] + "'",this.Duration);
// Set the hyperlink
setTimeout("document.getElementById('" + this.LinkId + "').href='"
+ this.UrlArray[counter] + "'",this.Duration);
if( toggleFlag ) {
fade(this.ImageId,this.ImageId,speed,0,100);
// Set the DIV background image when it is totally faded
setTimeout("document.getElementById('" + this.DivId + "').style.backgroundImage='url("
+ imageFiles[counter] + ")'",this.Duration);
}
else{
fade(this.ImageId,this.ImageId,speed,100,0);
// Set image source when it is totally faded
setTimeout("document.getElementById('" + this.ImageId + "').src='"
+ imageFiles[counter] + "'",this.Duration);
}
timeoutHandler = setTimeout("rotateImageInstances['" + this.ImageId + "'].Rotate()",timer);
counter++;
toggleFlag = !toggleFlag;
}
}
var rotateImageInstances = new Array();
function initImagesRotation(protocolType, imageLocation, numberOfImages, urlArray, toolTipArray, divId, linkId, imageId, duration, fadingSpeed)
{
// Sanity check
if( fadingSpeed > duration )
{
// Huh?
}
else if( numberOfImages<2 ){
// Huh?
}
else if( urlArray.length!=numberOfImages ){
alert("The list of image URL do not match the number of images given.");
}
else if( toolTipArray.length!=numberOfImages){
alert("The number of tooltips do not match the number of images given.");
}
else
{
if( typeof(rotateImageInstances[imageId])=="undefined" )
{
rotateImageInstances[imageId] = new RotateImageClass();
rotateImageInstances[imageId].ProtocolType = protocolType;
rotateImageInstances[imageId].ImageLocation = imageLocation;
rotateImageInstances[imageId].ImageQuantity = numberOfImages;
rotateImageInstances[imageId].UrlArray = urlArray;
rotateImageInstances[imageId].ToolTipArray = toolTipArray;
rotateImageInstances[imageId].DivId = divId;
rotateImageInstances[imageId].LinkId = linkId;
rotateImageInstances[imageId].ImageId = imageId;
rotateImageInstances[imageId].Duration = duration;
rotateImageInstances[imageId].FadingSpeed = fadingSpeed;
rotateImageInstances[imageId].Init();
document.getElementById(divId).style.backgroundImage = 'url(' + rotateImageInstances[imageId].GetImage(0) + ')';
document.getElementById(imageId).src = rotateImageInstances[imageId].GetImage(0);
rotateImageInstances[imageId].Rotate();
}
}
}
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment