151 lines
3.5 KiB
HTML
151 lines
3.5 KiB
HTML
<html dir=ltr>
|
|
<HEAD>
|
|
<TITLE>Five 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(6); //This array contains the image names
|
|
link = new Array(6); //This array contains image Web links
|
|
delay = new Array(6); //This array contains the amount of time that an image should be displayed
|
|
|
|
//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] = "bayshore.jpg";
|
|
img[2] = "nyc.jpg";
|
|
img[3] = "rock.jpg";
|
|
img[4] = "nzealand.jpg";
|
|
img[5] = "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";
|
|
link[5] = "http://www.microsoft.com";
|
|
|
|
|
|
//Set the amount duration for which each image is displayed
|
|
delay[1] = 12;
|
|
delay[2] = 1;
|
|
delay[3] = 1;
|
|
delay[4] = 1;
|
|
delay[5] = 1;
|
|
|
|
//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%5 == 0) {
|
|
index = 0;
|
|
}
|
|
index = index + 1;
|
|
|
|
//Delay next transition by the amount of time (milliseconds) specified by the duration variable
|
|
window.setTimeout( 'transImage()', duration);
|
|
|
|
}
|
|
|
|
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";
|
|
duration = delay[index]*1000;
|
|
|
|
}
|
|
|
|
else {
|
|
|
|
image2.src = img[index];
|
|
image2.style.visibility = "";
|
|
imgmap.href = link[index];
|
|
image1.style.visibility = "hidden";
|
|
duration = delay[index]*1000;
|
|
}
|
|
|
|
//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="bayshore.jpg" usemap=rotate.htm#addmap>
|
|
<IMG id="image2" STYLE="POSITION:absolute;TOP:0;LEFT:0" SRC="bayshore.jpg" usemap=rotate.htm#addmap>
|
|
|
|
</DIV>
|
|
|
|
|
|
</BODY>
|
|
</HTML>
|