You are here: irt.org | Articles | JavaScript | Image | Random Banner Adverts [ previous next ]
Published on: Wednesday 23rd July 1997 By: Martin Webb
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 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;
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:
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:
Try the working example
Macromedia Fireworks Image Map Tutorial