bannerFrames v1.03
Source
Below is the complete source code for a working example. You might want to view this in a seperate window.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>bannerFrames source code sample</title>
<script type="text/javascript" src="/lib/js/livedonkey.bannerFrames.js"></script>
<script type="text/javascript">
// <![CDATA[
// Script should start automatically, but if errors occurs, try uncomenting the line below
// livedonkey_bannerFrames_init();
// EXTRA LOUD DEBUGGING
// comment this function call when you do not want debugging info to be displayed in the window status bar
verbose(); // set to 'on' for now
// SET THE IMAGE DATA
// variable for storing image names
var targetImageID;
// EXAMPLE NUMBER 1
// first store image name in variable
targetImageID = "myImage";
// add the name and frame interval with defineImage( 'myImageName', 1000 ), below we use the variable "im"
// syntax: defineImage( imageID [, interval] ) interval is options and has default of 2000ms (2 seconds)
defineImage( targetImageID, 750 );
// add frames as we see fit, below we add 3 frames to our variable "im" which is 'myImage'
// syntax: addFrame( imageID, imageSource, theHref [, theTarget] ) theTarget defaults to "_blank" so is optional
addFrame( targetImageID, "./img/comics_animate_f01.gif", "./img/comics_animate_f01.gif", "newwin" );
addFrame( targetImageID, "./img/comics_animate_f02.gif", "./img/comics_animate_f02.gif", "newwin" );
addFrame( targetImageID, "./img/comics_animate_f03.gif", "./img/comics_animate_f03.gif", "newwin" );
// EXAMPLE NUMBER 2
// do the process again
targetImageID = "anotherImage";
defineImage( targetImageID, 2000 );
addFrame( targetImageID, "./img/comics_animate_f03.gif", "javascript: alert('this should go off to another page now, but you get the idea')", "" ); // target of "" (empty string) sets target to _self
addFrame( targetImageID, "./img/comics_animate_f01.gif", "javascript: alert('this should go off to another page now, but you get the idea')", "" );
addFrame( targetImageID, "./img/comics_animate_f02.gif", "javascript: alert('this should go off to another page now, but you get the idea')", "" );
// EXAMPLE NUMBER 3
// one more that is a little more advanced ;)
// this one loops through numbers 001 to 121 for images in the smilies directory
// targetImageID = 'smilies';
defineImage( "smilies" );
for( var q = 1; q <= 121; q++ )
{
var numAsString = q.toString();
while( numAsString.length < 3 )
numAsString = "0" + numAsString;
addFrame( 'smilies', "./img/smilies/" + numAsString + ".gif", "javascript: alert('you clicked smiley number " + q + "')" );
}
// set the interval after it has been defined --- this is for an example silly
// syntax: changeInterval( imageID, milliseconds)
changeInterval( 'smilies', 1500 );
// START IT
// you can set this here, or add to the <body onload="bannerFrame_start()"> event
// it simply starts the rotating of images once the page loads
window.onload = bannerFrame_start;
// ]]>
</script>
</head>
<body>
<h1>bannerFrames source code sample</h1>
<p>
<a href="javascript:void(bannerFrame_messageLog())">message log()</a> |
<a href="javascript:void(bannerFrame_start())">resume all</a> |
<a href="javascript:void(bannerFrame_stop())">pause all</a>
</p>
<p>
<b>myImage</b><br />
<a href="javascript:void(linkClick('myImage'))">
<img src="./img/comics_animate_f01.gif" width="200" height="135" alt="" name="myImage" id="myImage" onmouseover="bannerFrame_stop('myImage')" onmouseout="bannerFrame_start('myImage')" />
</a><br />
<a href="javascript:void(bannerFrame_start('myImage'))">resume</a> |
<a href="javascript:void(bannerFrame_stop('myImage'))">pause</a> |
<a href="javascript:void(bannerFrame_increaseInterval('myImage', 1000))">delay +</a> |
<a href="javascript:void(bannerFrame_increaseInterval('myImage', -1000))">delay -</a>
</p>
<p>
<b>anotherImage</b><br />
<a href="javascript:void(linkClick('anotherImage'))">
<img src="./img/comics_animate_f01.gif" width="200" height="135" alt="" name="anotherImage" id="anotherImage" />
</a><br />
<a href="javascript:void(bannerFrame_start('anotherImage'))">resume</a> |
<a href="javascript:void(bannerFrame_stop('anotherImage'))">pause</a> |
<a href="javascript:void(bannerFrame_increaseInterval('anotherImage', 1000))">delay +</a> |
<a href="javascript:void(bannerFrame_increaseInterval('anotherImage', -1000))">delay -</a>
</p>
<p>
<b>smilies</b><br />
<a href="javascript:void(linkClick('smilies'))">
<img src="./img/smilies/001.gif" width="32" height="32" alt="" name="smilies" id="smilies" />
</a><br />
<a href="javascript:void(bannerFrame_start('smilies'))">resume</a> |
<a href="javascript:void(bannerFrame_stop('smilies'))">pause</a> |
<a href="javascript:void(bannerFrame_increaseInterval('smilies', 1000))">delay +</a> |
<a href="javascript:void(bannerFrame_increaseInterval('smilies', -1000))">delay -</a>
</p>
</body>
</html>
Download: bannerFrames.v1.03.zip
| top
- bannerFrames
-
bannerFrames.v1.03
size: 128 KB
This featured script allows the complete validation
of an HTML form through simple 'rules' defined within hidden
form fields. » more