how can i make Image object in array to be href

Question

Here is an array i declare with images using Javascript. I need those pictures to be href to several sites (different site each picture). Is there any easy solution? I'm new to javascript...

imgSlide = document.getElementById('img');
 

images = new Array();
images[0] = new Image();
images[0].src = "img1.jpg";
images[1] = new Image();
images[1].src = "img2.jpg";
images[2] = new Image();
images[2].src = "img3.jpg";
images[3] = new Image();
images[3].src = "img4.jpg";
images[4] = new Image();
images[4].src = "img4.jpg";
images[5] = new Image();
images[5].src = "img5.jpg";
images[6] = new Image();
images[6].src = "img6.jpg";
images[7] = new Image();
images[7].src = "img7.jpg";
 
}

Answer 1

There were two possible solutions: Adding an anchor around the Imgae or setting an onclick event.

I decided for the onclick event, cause it can be achieved without any further logic behind it (not selecting the a and setting the href).

The other solution is also in an answer here.

If you add an onclick handler dont forget to set the code in an function block.

var imgSlide = document.getElementById('img');
 

var images = new Array();
images[0] = new Image();
images[0].src = "http://www.finepix-x100.com/de/sites/default/files/imagecache/sample_thumb_ccw/sample_images/DSCF3300.JPG";
images[0].onclick = function(){window.location ="http://www.w3schools.com";}
images[1] = new Image();
images[1].src = "http://www.finepix-x100.com/de/sites/default/files/imagecache/sample_thumb/sample_images/DSCF3165_2.jpg";
images[1].onclick = function(){window.location ="http://forum.xda-developers.com";}
images[2] = new Image();
images[2].src = "http://www.finepix-x100.com/de/sites/default/files/imagecache/sample_thumb/sample_images/DSCF3352_2.jpg";
images[2].onclick = function(){window.location ="http://yelp.com";}
images[3] = new Image();
images[3].src = "http://www.finepix-x100.com/de/sites/default/files/imagecache/sample_thumb_ccw/sample_images/DSCF1668.JPG";
images[3].onclick = function(){window.location ="http://www.finepix-x100.com";}
images[4] = new Image();
images[4].src = "http://www.finepix-x100.com/de/sites/default/files/imagecache/sample_thumb/sample_images/DSCF1773.JPG";
images[4].onclick = function(){window.location ="";}
images[5] = new Image();
images[5].src = "http://www.finepix-x100.com/de/sites/default/files/imagecache/sample_thumb/sample_images/DSCF3983_2.jpg";
images[5].onclick = function(){window.location ="";}
images[6] = new Image();
images[6].src = "http://www.finepix-x100.com/de/sites/default/files/imagecache/sample_thumb_ccw/sample_images/DSCF2904_2.jpg";
images[6].onclick = function(){window.location ="";}
images[7] = new Image();
images[7].src = "http://www.finepix-x100.com/de/sites/default/files/imagecache/sample_thumb_cw/sample_images/DSCF2564.JPG";
images[7].onclick = function(){window.location ="";}

//length in ms
var duration = 2000;

var i = 0;
    appendImage(i);
for (i; i<images.length; i++){    
    appendImage(i);
}
setInterval(function(){
    imgSlide.removeChild(images[images.length-1]);
    var i = 0;
    appendImage(i);
    for (i; i<images.length; i++){    
        appendImage(i);
    }
},(images.length) * duration);



function appendImage(number){
    setTimeout(function(){
    if (number == 0){
    imgSlide.appendChild(images[number]);
    }else if(number < images.length){
        imgSlide.removeChild(images[number-1]);
        imgSlide.appendChild(images[number]);
    }
    },number * duration);
}

<div id = "img"></div>