Home Articles FAQs XREF Games Software Instant Books BBS About FOLDOC RFCs Feedback Sitemap
irt.Org

Related items

Macromedia Fireworks Image Map Tutorial

The Book of the Day Script

A JavaScript Picture Gallery

Speeding up image rollovers

Fading Images in and out

Controlling Images #2

Controlling Images

Image Maps

Toolbar Images

Highlighting Images (#2)

Random Banner Adverts

You are here: irt.org | Articles | JavaScript | Image | Random Banner Adverts [ previous next ]

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:

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:

Working Example

Try the working example

Related items

Macromedia Fireworks Image Map Tutorial

The Book of the Day Script

A JavaScript Picture Gallery

Speeding up image rollovers

Fading Images in and out

Controlling Images #2

Controlling Images

Image Maps

Toolbar Images

Highlighting Images (#2)

©2018 Martin Webb