Random image link
4th November 2004
This script takes an existing image link, and randomly changes it into a different one. It works in all modern graphical browsers, plus Opera 5 and 6 (with javascript enabled):
Reload the page to see another random choice.
It's really just another random banner script, but crucially, it still
provides content to unsupported browsers, without reliance on the
less-than-reliable <noscript> paradigm -
if scripting (or this script) is not supported, the default
image or alt text will always be shown.
Get the script
Download the zipfile [12K], unzip it into your site
directory and include the script on your page -
it should go in the <body> section, after the
link(s) you want to change, for example:
<p>
<a id="udm-button" href="http://www.udm4.com/" title="Default page">
<img src="buttons/udm4-button88x31.gif" width="88" height="31"
alt="Accessible Website Menu" /></a>
</p>
<!-- Random Image Link by Brothercake - http://www.brothercake.com/ -->
<script type="text/javascript" src="imagelink.js"></script>
The link is just a regular image link, with a unique
id to identify it
to the script. Once that's in place, the rest of
the configuration is inside imagelink.js -
near the top of the script, where it says Define image links
.
Begin by creating a new image link object,
specifying the id of your link:
//identify an image link ('link-id')
var button = new imageLink('udm-button');
Then define each of the possible choices for that link.
There are six properties for each choice,
all of which are required, although if you don't want
title text you can set that as an empty string:
//add possibilities ('href', 'title text', 'src', 'width', 'height', 'alt text')
button.addLink('http://www.udm4.com/', 'Default page', 'buttons/udm4-button88x31.gif', '88', '31', 'Accessible Website Menu [default]');
You can go on to add as many choices as you like:
button.addLink('http://www.udm4.com/?page=green', 'Green page', 'buttons/udm4-greenbutton88x31.gif', '88', '31', 'Accessible Website Menu [green]');
button.addLink('http://www.udm4.com/?page=red', 'Red page', 'buttons/udm4-redbutton88x31.gif', '88', '31', 'Accessible Website Menu [red]');
button.addLink('http://www.udm4.com/?page=purple', 'Purple page', 'buttons/udm4-purplebutton88x31.gif', '88', '31', 'Accessible Website Menu [purple]');
button.addLink('http://www.udm4.com/?page=blue', 'Blue page', 'buttons/udm4-bluebutton88x31.gif', '88', '31', 'Accessible Website Menu [blue]');
button.addLink('http://www.udm4.com/?page=black', 'Black page', 'buttons/udm4-blackbutton88x31.gif', '88', '31', 'Accessible Website Menu [black]');
button.addLink('http://www.udm4.com/?page=white', 'White page', 'buttons/udm4-whitebutton88x31.gif', '88', '31', 'Accessible Website Menu [white]');
Finally, once all the choices are defined, it only remains to select one and change the link, using this function call:
//select a possibility at random
button.selectLink();
And that's all there is to it 
If you want to run the script over additional image links,
simply repeat this code again,
exchanging "button" for a new variable name, and
passing the id of the new link. You can go on to create
as many instances as you like; such is the beauty of
OO.
The script doesn't need a window.onload event,
because it doesn't modify any document-level properties, nor require
the default image to have finished loading.
But if it's to work, the <script> include for imagelink.js
must always come after the links themselves.
It doesn't have to be directly after, just after.
![[php]](/images/php.gif "Uses PHP")