| JavaScript Rotate Image
function initImgRotation()
{
// create rotating image objects here
// arguments: image name, rotation speed (milliseconds)
var rotator1
= new rotateImgObj('img1',2500);
// add the images to rotate into that image object
rotator1.addImages("sample7.jpg","sample8.jpg","sample9.jpg");
// add the corresponding actions to take onclick of those images
// (last one shows how to do nothing onclick)
rotator1.addActions("http://www.link.com", "http://www.link.com",
"http://www.link.com");
rotator1.rotate();
var rotator2 = new rotateImgObj('img2', 4000);
rotator2.addImages("sample2.jpg","sample3.jpg");
// demonstrates how to call another function onclick
rotator2.addActions("http://www.link.com", "http://www.link.com");
rotator2.rotate();
rotateImgObj.start();
} // for example function call onclick
// This function demonstrates how to obtain some of the information
available about the image clicked on
function doMsg() {
var obj = rotateImgObjs[1]; // refers to 2nd rotateImgObj (i.e.,
rotator2)
var msg = "You clicked on " + obj.imgObj.src;
msg += ". It's height is " + obj.imgObj.imgs[obj.ctr].height + "
pixels.";
alert(msg);
}
// If all the images you wish to display are in the same location, you can
specify the path here
rotateImgObj.imagesPath = "ads/";
// if you want url's to open in separate window, un-comment this line
//rotateImgObj.tgt = "_blank";
// no need to edit code below
/////////////////////////////////////////////////////////////////////
rotateImgObjs = []; // holds all rotating image objects defined
// constructor
function rotateImgObj(nm,s) {
this.speed=s; this.ctr=0; this.timer=0;
this.imgObj = document.images[nm]; // get reference to the image object
this.index = rotateImgObjs.length; rotateImgObjs[this.index] = this;
this.animString = "rotateImgObjs[" + this.index + "]";
}
rotateImgObj.prototype = {
addImages: function() { // preloads images
this.imgObj.imgs = [];
for (var i=0; i<arguments.length; i++) {
this.imgObj.imgs[i] = new Image();
this.imgObj.imgs[i].src = rotateImgObj.imagesPath + arguments[i];
}
},
addActions: function() {
this.actions = [];
for (var i=0; i<arguments.length; i++) { this.actions[i] = arguments[i];
}
},
rotate: function() {
if (this.ctr < this.imgObj.imgs.length-1) this.ctr++;
else this.ctr = 0;
this.imgObj.src = this.imgObj.imgs[this.ctr].src;
}
}
// sets up rotation for all defined rotateImgObjs
rotateImgObj.start = function() {
for (var i=0; i<rotateImgObjs.length; i++)
rotateImgObjs[i].timer = setInterval(rotateImgObjs[i].animString +
".rotate()", rotateImgObjs[i].speed);
}
// called onclick of images
rotateImgObj.doClick = function(n) {
if ( document.images && rotateImgObjs[n] ) {
var obj = rotateImgObjs[n]; // shorten reference
if ( obj.actions && obj.actions[obj.ctr] ) {
if ( typeof obj.actions[obj.ctr] == "string" ) {
if ( rotateImgObj.tgt == "_blank" ) {
// open in separate window (add features here if you want, i.e.,
chrome, size, position, ...)
var win = window.open(obj.actions[obj.ctr], "subwin");
if ( win && !win.closed ) win.focus();
} else window.location = obj.actions[obj.ctr];
} else obj.actions[obj.ctr]();
}
return false;
} else return true;
}
// for stopping/starting onmouseover/out
rotateImgObj.pause = function(n) {
if (rotateImgObjs[n]) clearInterval(rotateImgObjs[n].timer);
}
rotateImgObj.resume = function(n) {
if ( rotateImgObjs[n] ) {
var obj = rotateImgObjs[n]; // shorten reference
obj.rotate(); // rotate now and resume repeated calls
obj.timer = setInterval( obj.animString + ".rotate()", obj.speed );
}
}
</script>
<body link="#000066" bgcolor="#000066" onfiltered="initImgRotation();">
<a href="http://www.link.com"
onfiltered="return rotateImgObj.doClick(1)" onfiltered="rotateImgObj.pause(1)"
onfiltered="rotateImgObj.resume(1)" onfiltered="this.blur()"><img
name="img2" src="ads/sample2.jpg" ></a><br>
|