Rotating banners with URL links and no duplicates

Question

unfortunately I have very little experience with JS so please be patient :p

I am trying to rotate banners on a site. I want to be able to put banners in different locations and have no duplicates shown. It would also be great if the banners were in an array so adding more to the rotation would be simple.

Here is a code I've been trying to get working but have had little success. It has been saved to in rotate.js through notepad

script type="text/javascript">


link = new Array
image = new Array

link[1]="www.audio-philia.co.uk"
image[1]="www.hificornershop.co.uk/nodups/audiophilia.gif"

link[2]="www.emporiumhifi.com"
image[2]="www.hificornershop.co.uk/nodups/emporiumhifi.gif"

link[3]=""
image[3]=""

link[4]=""
image[4]=""

link[5]=""
image[5]=""

link[6]=""
image[6]=""

link[7]=""
image[7]=""

link[8]=""
image[8]=""

link[9]=""
image[9]=""

link[10]=""
image[10]=""


rnd = (Math.round((Math.random()*9)+1))

document.write('<a href="' + link[rnd] + '" target="_blank">'); 
document.write('<img src="' + image[rnd] + '" border="0"></a>');

value = array.splice(rnd,1)[0]; // remove the selected number from the array and get it in another variable

logosElement.innerHTML += (value);
}

</script>

I would then copy the following into the areas I want the banners displayed#

<img src='rotate.js?i=0'>image #1 <img src='rotate.js?i=1'>image #2 <img src='rotate.js?i=2'>image #3

etc

If the value of 'i' is different for every banner spot on a particular page, there will be no duplicates. I had a very similar script work in php put I would really love this to work in JS.

Answer 1

The approach you took isn't helping you. I'd suggest you replace your img tags by divs like this in your HTML source:

<div class="myImage" id="image1"></div>
<div class="myImage" id="image2"></div>
<div class="myImage" id="image3"></div>

Then in your rotate.js file, you could do something like this:

window.onload = function() {
    //Find all images with class myImage
    var images = document.getElementsByClassName('myImage');
    var total  = images.length;

    //Looping through all the elements found
    for (var i = 0; i < total; i++) {
        //Retrieve array index from the id
        var index = images[i].id.subtring(4);
        //Add the html to the element
        images[i].innerHTML = '<a href="'+link[index]+'"><img src="'+image[index]+'" /></a>';
    }
}

The myImage class is used to easily retrieve all the divs to be treated and the id is used to know which image to display in the div.

For the array: I would recommend the use of Javascript objects for your banners. Javascript objects are defined like this: {}, they have properties like in the example below:

var banners = array();

//Image and link are properties
//push is the function to add an element to an array without specifying the index
banners.push({image:your_url, link:your_url});
//The first banner can then be accessed 
banners[0];
//To access its image
banners[0].image;
//Or
banners[0]['image'];

Example

rotate.js file

var banners = array(); //The first element pushed in the array is at the index 0
banners.push({link: 'www.audio-philia.co.uk', image: 'hificornershop.co.uk/nodups/audiophilia.gif', alt: 'My Image alt'}); 
//Repeat the push for every images

window.onload = function() {
//Find all images with class myImage
var images = document.getElementsByClassName('myImage');
var total  = images.length;

//Looping through all the elements found
for (var i = 0; i < total; i++) {
    if (banners.length == 0) {
          break;//No more banners can't display anymore            
    }
    //Retrieve a random banner 
    var rnd = Math.floor((Math.random()*banners.length));
    //Add the html to the element
    images[i].innerHTML = '<a href="'+banners[rnd].link+'"><img src="'+banners[rnd].image+'" alt="'+banners[rnd].alt+'" /></a>';
    banners.splice(rnd, 1);
}

}​

HTML

<div class="myImage"></div>
<div class="myImage"></div>
<div class="myImage"></div>
<!-- The script should be just before the end of the body tag if possible -->
<script type="text/javascript" src="www.hificornershop.co.uk/bannercode/rotate.js"></script>