So you got some neat images and would like to rotate them for your web project, not only would you like to rotate these images, but you’d also like different images, to link to different sources. Let’s find out how that’s done, now!
It is assumed that the reader has a basic understanding of HTML/JS. However, for revision purposes, here’s a quick explaination of some of the elements used in the following set of code snippets. One may skip to here.
<a> – Defines a HTML link, for this tutorial, we will define a HTML link and include two other mandatory attributes: href/value (link address), name/value (element call name).
<img> – Defines an HTML image, for this tutorial it is imperative that attributes src/value (image location) and id/value (element unique identifier) are defined. For the purpose of W3C validation, it is required that alt/value (alternative text) attribute is also defined.
“A function contains code that will be executed by an event or by a call to the function.” This tutorial will include JS functions.
getElementById() is a JS function and it does exactly as it name suggests, in the code line: document.getElementById("myimg").src
document refers to the HTML document/page, so document.getElementById("myimg") searches in the document for any element/tag with an id myimg. In the following HTML snippet, the <img> tag contains such an attribute, so the function will perform an action on that element. Since we would like to change the source/location of the image, we will include .src which further retrieves the src/value attribute of the element (in this case <img>) that the action will be performed on. We must then add a value to this call, the value in this case is the image location which is a string of characters and must be opened and closed with web standard single quotes (for your own good, don’t use any fancy pancy characters – MS Notepad will produce non-fancy characters).
document.getElementById("mylink").href — This inturn retrieves from the HTML document an element (<a>) with a name/id mylink, then again will select the element’s href attribute. That way, we can change the url/link location of the element.
setTimeout("Action to be performed", miliseconds); Another JS function, that performs an action on a given time. In this tutorial, we want to change the image and its link location every 5 seconds (there are 1000 milliseconds in second) so we will call (the Action to be performed) a function (imgOne() etc..) to do so, which will inturn do the same and the beat goes on, in programming jargon, this process is looped. 
Here’s the HTML.
<a href="http://jesus-themessiah.com" id="mylink"><img src="images/mysite.gif" alt="Rotating Images" id="myimg"></a>
Here’s the javascript. Copy/paste it in a .js file or between your page head tags between the
<script type="text/javascript"> <!-- //--> </script>
..tags. Hope that made sense.
if (window.addEventListener) {
window.addEventListener('load', imgOne, false);
} else if (window.attachEvent) {
window.attachEvent('onload', imgOne);
}
seconds = "5";
function imgOne()
{
document.getElementById("myimg").src = 'images/mysite.gif';
document.getElementById("mylink").href = 'http://jesus-themessiah.com';
setTimeout("imgTwo()", seconds * 1000);
}
function imgTwo()
{
document.getElementById("myimg").src = 'images/mysite2.gif';
document.getElementById("mylink").href = 'http://thebruneysite.com';
setTimeout("imgThree()", seconds * 1000);
}
function imgThree()
{
document.getElementById("myimg").src = 'images/anothersite.gif';
document.getElementById("mylink").href = 'http://touchinglives.org';
setTimeout("imgOne()", seconds * 1000);
}
According to the above JS, myimg refers to the id attribute in the above html code snippet <img> tag. mylink refers to the id attribute in the html (above code snippet) <a> tag.
imgOne(), imgTwo() and imgThree() are functions, on <body> tag load, coded as onload="function();", you may choose to call any function, but for the purpose of this tutorial we’ve called imgOne() first. So within the html <body> tag, we’ll do <body onload="imgOne();"> After 5 seconds, the next function [imgTwo()] is called, and then after another 5, the following function [imgThree()] is called. This process is repeated. If you’d like to add more images, simply add a new function, say imgFour() and edit accordingly. In order for the process to be looped, your last funtion should re-call function one. You’ll see in the code above, function imgThree() re-calls imgOne() on line 18: setTimeout("imgOne()", seconds * 1000);
Thats pretty much it!
• Please note that if your site <body> tag contains other ‘to be loaded’ functions, they may prevent the script from ‘working’. Try removing your other functions from the <body> tag to see if this is the case, if it is so, you may want to first call the imgOne() function. If this disables your other functions within onload, then add the following code at the very top of your rotator script:
if (window.addEventListener) {
window.addEventListener('load', imgOne, false);
} else if (window.attachEvent) {
window.attachEvent('onload', imgOne);
}
seconds = "5";
//.....
Another option would be to simply place one function within onload that would call all your other site functions. For instance: onload=”AllFunctions();”.
function AllFunctions() {
function imgOne()
{
//.....
}
function imgTwo()
{
//.....
}
function imgThree()
{
//.....
}
function OtherFunctions()
{
//.....
}
}//end AllFunctions
If you do not want your images to automatically start loading, then onclick=”imgOne();”, onmouseover=”imgOne();” etc are also available for use.
This script works in IE5+. 
Also works with my best friend Firefox and other smart browsers like Google Chrome and Safari.
Hope you enjoyed this one.
Cheers.