|
EXAMPLE
You should see a new banner rotating every 7 seconds:
1) Insert this script in the <HEAD> section of the page.
2) Insert the following script also in the <HEAD> section.
NOTE: if you want to cycle images without links attached to them, use the first
script above only.
3) Insert the onLoad event handler inside the <BODY> tag as
follows:
<body onLoad="window.setTimeout('cycle();',7000);(loadbanners());(urlswitch());",
followed by other tags such as bgcolor, etc..
4) Insert the following HTML code in the <BODY> section where
you want the rotating banners to appear in the page.
5) Define the number of banners, the images and their path in this section of the
first script:
function cycle() {
if (++banners > 3) banners=1; // define the number of banners
here (3 in this example)
loadbanners();
document.banner1.src = image;
window.setTimeout('cycle();',7000);
}
function loadbanners() {
if (banners==1)
{
image="images/banner1.gif";
}
if (banners==2)
{
image="images/banner2.gif";
}
if (banners==3)
{
image="images/banner3.gif";
And in this section of the HTML code:
<a href="http://planmagic.com"
onClick="this.href=urlswitch()"><IMG width="468"
height="60" border=0 src="images/banner3.gif"
name="banner1"></a>
6) Define the URL links for each banner in this section of the second
script:
var link = "http://planmagic.com/financial_planning.html"
function urlswitch() {
if (banners==1)
{
link = "http://planmagic.com/business_planning.html";
}
if (banners==2)
{
link = "http://planmagic.com/marketing_planning.html";
}
if (banners==3)
{
link = "http://planmagic.com/financial_planning.html";
7) Choose how fast you want your images to cycle in this section of
the script:
window.setTimeout('cycle();',7000); // the
default is a new image every 7 seconds
And is this section of the onLoad tag:
onLoad="window.setTimeout('cycle();',7000);(loadbanners());(urlswitch());"
8) If you want
to include a second banner rotation on the page add this line of code in this
section of the first script:
function cycle() {
if (++banners > 3) banners=1;
loadbanners();
document.banner1.src = image;
document.banner2.src = image;
And change the name for the second banner in the HTML
code:
<a href="http://planmagic.com" onClick="this.href=urlswitch()"><IMG width="468"
height="60" border=0 src="images/banner3.gif" name="banner2"></a>
For more details on this banner rotation script you
can also visit Heidi
Allen's web site.
See also 
Rotation CGI scripts
|
