<html dir=ltr>
<HEAD>
<TITLE>Four Image Ad Rotator -- A Scriptlet Example</TITLE>
<SCRIPT LANGUAGE="JavaScript">
//Variable Definitions
//
//
var teffect = 0; //Index of the current effect
var transitions = 23; //Total number of transition effects; 23 is the maximum.
var speed=3.0; //Transition speed
var index =1; //Index number used to reference images
//Array Definitions
img = new Array(5); //This array contains the image names
link = new Array(5); //This array contains image Web links
//This function start the image rotation when this page is loaded into a Web browser.
function startRot(){
//Define four ad images to rotate and related Web links
//
img[1] = "nyc.jpg";
img[2] = "rock.jpg";
img[3] = "nzealand.jpg";
img[4] = "natpark.jpg";
link[1] = "http://www.microsoft.com";
link[2] = "http://www.microsoft.com";
link[3] = "http://www.microsoft.com";
link[4] = "http://www.microsoft.com";
//Define dimension of images
var imgHeight = 180;
var imgWidth = 180;
//Define the default images that the rotators displays first and set their dimensions
image1.src = img[1];
image1.src = img[2];
imgmap.coords = "0,0," + imgWidth + "," + imgHeight;
rotImg.style.height = imgHeight;
rotImg.style.width = imgWidth;
//Prepare to begin image rotation
image1.style.visibility = "hidden";
transImage();
}
//When the transition is completed, select a new transition filter.
function changeTrans() {
if (teffect%4 == 0) {
index = 0;
}
index = index + 1;
//Delay rendering next image for 1 second (1000 milliseconds)
window.setTimeout( 'transImage()', 1000);
}
function transImage() {
//Freeze image
rotImg.filters.item(0).Apply();
rotImg.filters.item(0).transition = teffect;
if (teffect % 2 == 0) {
image1.src = img[index];
image1.style.visibility = "";
imgmap.href = link[index];
image2.style.visibility = "hidden";
}
else {
image2.src = img[index];
image2.style.visibility = "";
imgmap.href = link[index];
image1.style.visibility = "hidden";
}
//Start transition
rotImg.filters(0).Play(speed);
bTransInProgress = true;
teffect = teffect + 1;
if (teffect > transitions) {
teffect = 0;
}
}
</SCRIPT>
<META HTTP-EQUIV="Content-Type" content="text/html; charset=Windows-1252">
</head>
<BODY onload="startRot()" link=white alink=white vlink=white>
<!--TOOLBAR_START-->
<!--TOOLBAR_EXEMPT-->
<!--TOOLBAR_END-->
<!-- This image map is defined for images with dimensions of 180 X 180 pixels
-->
<map name="addmap">
<area id=imgmap shape=rect coords="0,0,180,180" href="http://www.microsoft.com" >
</map>
<DIV ID="rotImg"
STYLE="position:ABSOLUTE;
height:175;
width:180;
top:0;
left:0;
background-color:black;
filter:revealTrans(Duration=4.0, Transition=12)"
onFilterChange="changeTrans()">
<IMG id="image1" STYLE="POSITION:absolute;TOP:0;LEFT:0" SRC="" usemap=rotate.htm#addmap>
<IMG id="image2" STYLE="POSITION:absolute;TOP:0;LEFT:0" SRC="" usemap=rotate.htm#addmap>
</DIV>
</BODY>
</HTML>