|
Random Banner Adverts
You are here: irt.org | Articles | JavaScript | Image | Random Banner Adverts
Published on: Wednesday 23rd July 1997 By: Martin Webb
Introduction
This article will explain how to create a presentation random of
banner adverts which will work on both Netscape Navigator 3+ and
Internet Explorer 3+.
However, the JavaScript will allow some limited functionality for
Netscape 2.02.
This article relies on the Image array within JavaScript and the
Floating Frame within Internet Explorer to enable images to be
changed.
The Code
The banner adverts and associated URLs will be retained in one array
held in the main document, and accessed within that document for
Netscape Navigator and accessed within the Floating Frame for Internet
Explorer.
<html>
<body>
<script language="JavaScript"><!--
function Href(dest,image,text) {
this.dest = dest;
this.image = image;
this.text = text;
}
function setHref(dest,image,text) {
myHref[hrefItems++] =
new Href(dest,image,text);
}
var random = 0;
var lastrandom = -1;
function replace() {
var now = new Date();
random = now.getSeconds()%hrefItems;
if (random == lastrandom) {
if (random == hrefItems-1)
random--;
else
random++;
}
document ['banner'].src =
myHref[random].image;
document.links[0].href =
myHref[random].dest;
window.setTimeout('replace()',5000);
lastrandom = random;
}
var hrefItems = 0;
var myHref = new Array();
setHref(
'../../articles.htm',
'../images/banner.gif',
'Click to go to articles page'
);
setHref(
'../../index.htm',
'../images/banner2.gif',
'Click to go to home page'
);
if (navigator.appName == "Netscape") {
var now = new Date();
random = now.getSeconds()%hrefItems;
lastrandom = random;
document.write(
'<a href="' + myHref[random].dest + '">' +
'<img name="banner" width=400 height=40 border=1 ' +
'alt="Image" src="' + myHref[random].image + '"><\/a>'
);
}
if (navigator.appName == "Netscape" &&
parseInt(navigator.appVersion) >= 3
) {
window.setTimeout('replace()',5000);
}
//--></script>
<iframe
frameborder="0"
width="402"
height="42"
marginheight="0"
marginwidth="0"
scrolling="no"
src="banner.htm"
>
</iframe>
</body>
</html>
|
If you copy this code and use it on your own page, then update the
link number (links[0]) in the following statement to reflect the
image's link in your document:
document.links[0].href = myHref[random].dest;
So, how does it work?
Quite simply really. The Href() function defines an object
called Href.
The setHref() function creates an instance of a Href
object.
The myHref[] array holds an array of Href objects.
Each Href object has three properties: dest, image and text.
For Netscape Navigator:
- Once all the Href objects have been created using the
setHref() function, one of the objects is chosen at random
(based on the seconds, within the current time divided by the number
of hrefItems within the myHref() array).
- The first initial image is then displayed using the dest and image
elements of the chosen Href object.
- If the Netscape Navigator browser is version 3.0 or greater, then
a timer is set to invoke the replace() function five seconds
later.
- The replace() function, again selects a random
Href object, and changes the source of the banner
image, and the href attribute of the link. Note: the link is
referenced using the inbuilt JavaScript links[] array, which
in this example is the first item in the links[] array,
i.e. position 0. If you use this JavaScript within your own
documents, then this number may need to be changed depending on how
many other links are within your document.
- Finally, the replace() sets the timer to invoke the
replace() function in another five seconds later.
- If the Netscape Navigator browser is less than version 3.0 then,
the initial image is displayed, but is not changed again, unless the
user reloads the page themselves.
Internet Explorer and Floating Frames
For Internet Explorer the contents of the floating frame consists of
the following code:
<html>
<head>
<meta http-equiv="Refresh" content="5">
</head>
<body onLoad="setTimeout('refresh()',6000)">
<script language="JavaScript"><!--
function refresh() {
window.location.href = self.location.href;
}
var now = new Date();
var random = now.getSeconds()%parent.hrefItems;
if (random == parent.lastrandom) {
if (random == parent.hrefItems-1)
random--;
else
random++;
}
parent.lastrandom = random;
document.write(
'<a href="' + parent.myHref[random].dest + '"
target="_parent">' +
'<img name="banner" width="402" height="43" border="1" alt="' +
parent.myHref[random].text + '" src="' +
parent.myHref[random].image + '"><\/a>'
);
//--></script>
</body>
</html>
|
This again selects one of the Href objects within the
parent frame randomly, and displays the appropriate
image. However, it also sets the ALT text to the Href objects
text property.
Once the whole frame has been loaded the onLoad event in the
BODY tag will invoke the refresh() function six seconds later
to refresh the whole floating frame.
The Refresh META tag has been included, as sometimes the page is not
redrawn when reloaded in Microsoft Internet Explorer 4. The Refresh
META tag will ensure that floating frame is reloaded every five
seconds.
It is not possible to set the ALT tag within the Netscape Navigator
specific version, as the ALT tag is not yet accessible within
JavaScript.
There are several features with this JavaScript:
- The images are not preloaded, they are only loaded when
required.
- The status bar is not updated when an image is changed if the
pointer is currently over the banner in the Netscape Navigator
specific version.
- The images can be anywhere, i.e. on the current server, or
elsewhere on the WWW.
Working Example
Try the working example
Feedback on 'Random Banner Adverts'
View the profile on Martin Webb and the list of other Articles by Martin Webb.
|
|