A JavaScript Web-Ring

You are here: irt.org | Articles | JavaScript | Source | A JavaScript Web-Ring [ previous next ]

Published on: Saturday 9th May 1998 By: Martin Webb

Introduction
What is a Web-Ring?
Why would I want to join a Web-Ring?
So has does one person manage it all?
Source Code

Introduction

Have you ever wanted to link your site up with others using a web-ring, where people can click on an image to go to the next or previous site in the ring? Web-rings traditionally require server side programming, this article describes how to combine JavaScript and HTML to allow one person to manage the complete web-ring for as many sites that you require.

What is a Web-Ring?

You may on your travels across the internet seen something similar to that shown below

Previous in Web-Ring Web-Ring Home Next in Web-Ring

If a visitor to your site, once they have finished viewing your pages, wants to look at further details, they have the opportunity to select an associated site made available by the above images. Either the previous site or the next site. When the they choose to go to one of these sites, they will again be presented with the same thing somewhere on that page:

Previous in Web-Ring Web-Ring Home Next in Web-Ring

One of which will take them back to your site, and the other onto another site. So you can see that these links appear as a ring that goes all around the sites in the Web-Ring to eventually arrive back at your site:

Site1 >> << Site2 >> << Site3 >> << Site4 >> << Site5 >> ... ... << Site1

Why would I want to join a Web-Ring?

Simply to generate more hits to your site. You'll not lose visitors as a result of adding a Web-Ring to your site, but once your visitors have finished on your site, they might elect to visit someone else in the Web-Ring. If you reverse this, you can see that you might gain visitors from other sites in the Web-Ring.

So has does one person manage it all?

Web-Rings can quickly become an administrative nightmare. If people continually join or leave, then the HTML required to support the Web-Ring could require constant amendment, if everyone on the ring were require to change their versions of the HTML you'll soon get in trouble.

What is required is a simple Cut 'n Paste once and once only approach. Where you can supply a standard piece of HTML, that when placed on someone's web page will instantly insert them into the appropriate place in the Web-Ring, and automatically adjust the sites around them so that they all link correctly.

This is where a Web-Ring Index page comes in. Somewhere on the Internet there has to be some supporting JavaScript and HTML that controls the complete Web-Ring. All the sites in the Web-Ring then refer to the Web-Ring Index page for assistance in controlling where they are in the ring, and who sits either side of them.

The Web-Ring Index page basically consists of a database of all the URLs in the Web-Ring. To create such a database in JavaScript is fairly simple:

function Add(href) {
    WebRing[++NumInWebRing] = new WebRingObject(href);
    if (location.href.indexOf(href) > -1)
        WhereInRing = NumInWebRing;
}

function WebRingObject(href) {
    this.href = href;
}

var WhereInRing = 0, NumInWebRing = 0, WebRing = new Array();

Add("http://www.site1.com/index.html");
Add("http://www.site2.com/index.html");
Add("http://www.site3.com/index.html");
Add("http://www.site4.com/index.html");
Add("http://www.site5.com/index.html");
Add("http://www.site6.com/index.html");
Add("http://www.site7.com/index.html");

if (WhereInRing == 0) WhereInRing = 1;

if (WhereInRing == 1)
    PrevInRing = NumInWebRing;
else
    PrevInRing = WhereInRing - 1;

if (WhereInRing == NumInWebRing)
    NextInRing = 1;
else
    NextInRing = WhereInRing + 1;

Each URL is added to the database using the add() function. The add() function accepts the href parameter and stores a WebRingObject in the next empty position in the WebRing[] array. Each WebRingObject has one href property. A check is made to see if the current location contains the href of the current URL being added to the WebRing[] array. If it is then we store the current position within the Web-Ring in the WhereInRing variable.

Once all the URLs have been added to the database the script then works out, based on the WhereInRing variable, which is the PrevInRing (previous URL in the ring) and the NextInRing (next URL in the ring).

If the current location is not one of the Web-Ring sites, perhaps because the database is slightly out of step with the sites that contain the Web-Ring HTML, then the current location defaults to the first URL in the database. This ensures that the Web-Ring can at no time be broken.

To add or remove a site from the Web-Ring is as simple as adding a extra add() function with the required URL.

Okay so we've worked out the current, next and previous locations. How can we display the correct images on the page?

The following shows a simple version of the output that can be generated in JavaScript:

var output = '';

output += '<A HREF="' + WebRing[PrevInRing].href + '" TARGET="_top">';

output += '<IMG SRC="http://www.site1.com/left.gif" BORDER="0" WIDTH="50" HEIGHT="50" ALT="Previous"></A>';

output += '<A HREF="' + WebRing[NextInRing].href + '" TARGET="_top">';

output += '<IMG SRC="http://www.site1.com/right.gif" BORDER="0" WIDTH="50" HEIGHT="50" ALT=" "></A>';

document.write(output);

This script will generate two images, one linked to the previous site in the Web-Ring, and one linked to the next site in the Web-Ring. If either of the images are clicked the relevant URL is loaded into the _top document, breaking out of any frames that the current site maybe using.

Each of the two links is made up of the href property of either the previous (PrevInRing) or the next (NextInRing) WebRingObject obejct contained in the WebRing[] array.

The only thing not yet explained is the two images used. They are hard coded to always be on the same site, perhaps the site of the maintainer of the Web-Ring. This ensures that once one site has loaded the images into the visitors cache, that they are immediately available for use on the next site in the ring.

So how do we get the above script to work automatically on everyone's site in the Web-Ring?

This is where the Cut 'n Paste HTML comes into effect. There are two methods that we'll utilitse to embed some HTML into a page. The first relies on the use of JavaScript *.js source files, supported in NN3, NN4 and MSIE4. The other relies of Floating Frames, supported in MSIE3 and MSIE4. As you can see from this list NN2 does not appear. I'm afraid that the Web-Ring will not work in NN2. It will not cause any errors to occur, the Web-Ring will just not appear on the browser used by a visitor if they are using NN2.

The Cut 'n Paste HTML that sites in the Web-Ring need to insert somewhere on their chosen URL would look something like this:

<SCRIPT LANGUAGE="JavaScript"><!--
if (navigator.appVersion.indexOf('MSIE 3') == -1)
    document.write('<SCRIPT LANGUAGE="JavaScript1.1" SRC="http://www.site1.com/webring.js"><\/SCRIPT>');
else
    document.write('<CENTER><IFRAME FRAMEBORDER=0 WIDTH="100" HEIGHT="50" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING=no SRC="http://www.site1.com/webring.html"><\/IFRAME><\/CENTER>');
//--></SCRIPT>

Its all contained in JavaScript so that we either use a JavaScript webring.js source file, or a Floating Frame with a webring.html file, both located somewhere on one of the sites, again perhaps the site of the maintainer of the Web-Ring.

There is a test for MSIE 3. Microsoft slipped partial support of JavaScript *.js source files into some versions of MSIE 3.02 for some platforms. It would have been better if they hadn't, because the support was very limited, and in some instances will cause the browser to crash. See the article Internet Explorer version 3.02 and SRC files for further details.

Now all we need is the contents of webring.js and webring.html.

Source Code

webring.js

This just combines the two portions of JavaScript described earlier in the article:

function Add(href) {
    WebRing[++NumInWebRing] = new WebRingObject(href);
    if (location.href.indexOf(href) > -1)
        WhereInRing = NumInWebRing;
}

function WebRingObject(href) {
    this.href = href;
}

var WhereInRing = 0, NumInWebRing = 0, WebRing = new Array();

Add("http://www.site1.com/index.html");
Add("http://www.site2.com/index.html");
Add("http://www.site3.com/index.html");
Add("http://www.site4.com/index.html");
Add("http://www.site5.com/index.html");
Add("http://www.site6.com/index.html");
Add("http://www.site7.com/index.html");

if (WhereInRing == 0) WhereInRing = 1;

if (WhereInRing == 1)
    PrevInRing = NumInWebRing;
else
    PrevInRing = WhereInRing - 1;

if (WhereInRing == NumInWebRing)
    NextInRing = 1;
else
    NextInRing = WhereInRing + 1;

var output = '';

output += '<A HREF="' + WebRing[PrevInRing].href + '" TARGET="_top">';

output += '<IMG SRC="http://www.site1.com/left.gif" BORDER="0" WIDTH="50" HEIGHT="50" ALT="Previous"></A>';

output += '<A HREF="' + WebRing[NextInRing].href + '" TARGET="_top">';

output += '<IMG SRC="http://www.site1.com/right.gif" BORDER="0" WIDTH="50" HEIGHT="50" ALT=" "></A>';

document.write(output);

webring.html

Exactly the same as webring.js except the script is wrapped up in <SCRIPT> and </SCRIPT> tags:

<SCRIPT LANGUAGE="JavaScript"><!--
function Add(href) {
    WebRing[++NumInWebRing] = new WebRingObject(href);
    if (location.href.indexOf(href) > -1)
        WhereInRing = NumInWebRing;
}

function WebRingObject(href) {
    this.href = href;
}

var WhereInRing = 0, NumInWebRing = 0, WebRing = new Array();

Add("http://www.site1.com/index.html");
Add("http://www.site2.com/index.html");
Add("http://www.site3.com/index.html");
Add("http://www.site4.com/index.html");
Add("http://www.site5.com/index.html");
Add("http://www.site6.com/index.html");
Add("http://www.site7.com/index.html");

if (WhereInRing == 0) WhereInRing = 1;

if (WhereInRing == 1)
    PrevInRing = NumInWebRing;
else
    PrevInRing = WhereInRing - 1;

if (WhereInRing == NumInWebRing)
    NextInRing = 1;
else
    NextInRing = WhereInRing + 1;

var output = '';

output += '<A HREF="' + WebRing[PrevInRing].href + '" TARGET="_top">';

output += '<IMG SRC="http://www.site1.com/left.gif" BORDER="0" WIDTH="50" HEIGHT="50" ALT="Previous"><\/A>';

output += '<A HREF="' + WebRing[NextInRing].href + '" TARGET="_top">';

output += '<IMG SRC="http://www.site1.com/right.gif" BORDER="0" WIDTH="50" HEIGHT="50" ALT=" "><\/A>';

document.write(output);
//--></SCRIPT>

Cut 'n Paste HTML

To be included on each site in the Web-Ring:

<SCRIPT LANGUAGE="JavaScript"><!--
if (navigator.appVersion.indexOf('MSIE 3') == -1)
    document.write('<SCRIPT LANGUAGE="JavaScript1.1" SRC="http://www.site1.com/webring.js"><\/SCRIPT>');
else
    document.write('<CENTER><IFRAME FRAMEBORDER=0 WIDTH="100" HEIGHT="50" MARGINHEIGHT=0 MARGINWIDTH=0 SCROLLING=no SRC="http://www.site1.com/webring.html"><\/IFRAME><\/CENTER>');
//--></SCRIPT>

Source Files

Feedback on 'A JavaScript Web-Ring'

Wednesday May 26th, 1999 at 22:43:48 - Jeff Goldstein

Related items