Add links to images in array

Question

I'm trying to add links to the images in my JS array so that, when clicked, they direct you to a info page.

I tried to use the following code but the images won't show.

var WorkArray = new Array(['work/01.png',"http://www.stackoverflow.com"],
                         ['work/02.png',"http://www.stackoverflow.com"],
                         ['work/03.png',"http://www.stackoverflow.com"],
                         ['work/04.png',"http://www.stackoverflow.com"]);

If I remove the links the images do show.

I'm using a variation of this code: http://bouncingdvdlogo.com/

Here is my full code:

var width = 400;
var height = 400;
var swoosh = 4;
var stopafter=0; //set time in seconds before image disappears. Use 0 for never

var maxswoosh = 50;
var xMax;
var yMax;
var xPos = 0;
var yPos = 0;
var xDir = 'right';
var yDir = 'down';
var screenSavouring = true;
var tempswoosh;
var newXDir;
var newYDir;

function setupShit() {
    if (document.all) {
        xMax = document.body.clientWidth
        yMax = document.body.clientHeight
        document.all("work").style.visibility = "visible";
        }
    else if (document.layers||document.getElementById) {
        xMax = window.innerWidth-0;
        yMax = window.innerHeight;
        if (document.getElementById)
        document.getElementById("work").style.visibility="visible"
        else
        document.layers["work"].visibility = "show";
    }
    setTimeout('moveIt()',500);
    }


function moveIt() {
if (screenSavouring == true) {
calculatePosition();
if (document.all) {
document.all("work").style.left = xPos + document.body.scrollLeft;
document.all("work").style.top = yPos + document.body.scrollTop;
}
else if (document.layers) {
document.layers["work"].left = xPos + pageXOffset;
document.layers["work"].top = yPos + pageYOffset;
}
else if (document.getElementById) {
document.getElementById("work").style.left = xPos + pageXOffset;
document.getElementById("work").style.top = yPos + pageYOffset;
}
doit=setTimeout('moveIt()',30);
}
}

function calculatePosition() {
    if (xDir == "right") {
        if (xPos > (xMax - width - swoosh)) { 
        xDir = "left";
        cC();
        }
    }
    else if (xDir == "left") {
        if (xPos < (0 + swoosh)) {
        xDir = "right";
        cC();
        }
    }
    if (yDir == "down") {
        if (yPos > (yMax - height - swoosh)) {
        yDir = "up";
        cC();
        }
    }
    else if (yDir == "up") {
        if (yPos < (0 + swoosh)) {
        yDir = "down";
        cC();
        }
    }
    if (xDir == "right") {
        xPos = xPos + swoosh;
        }
    else if (xDir == "left") {
        xPos = xPos - swoosh;
        }
    else {
        xPos = xPos;
        }
    if (yDir == "down") {
        yPos = yPos + swoosh;
        }
    else if (yDir == "up") {
        yPos = yPos - swoosh;
        }
    else {
        yPos = yPos;
        }
    }

if (document.all||document.layers||document.getElementById){
window.onload = setupShit;
window.onresize = new Function("window.location.reload()");
}

var WorkArray = new Array(['work/01.png',"http://www.stackoverflow.com", "Your text goes here"],
                             ['work/02.png',"http://www.stackoverflow.com", "Your text goes here"],
                             ['work/03.png',"http://www.stackoverflow.com", "Your text goes here"],
                             ['work/04.png',"http://www.stackoverflow.com", "Your text goes here"]);


var nelements = WorkArray.length;

preload_image_object = new Image();
    var i = 0;
    for(i=0; i<=nelements; i++)  {
    preload_image_object.src = WorkArray[i];
    }

var currentImage = 0

function cC() {
    currentImage = (currentImage + 1) % WorkArray.length;
    document.getElementById("work").style.backgroundImage="url('"+WorkArray[currentImage]+"')";
}

Thanks!

@Victor: not worth it. perhaps just a type by the op. he must have missed it. — Abhitalks
– Abhitalks, Commented Nov 19, 2014 at 14:11

Sreeraj · Accepted Answer · 2014-11-19 15:04:41Z

1

Try replacing your for loop with below

for(i=0; i<nelements; i++)  {
preload_image_object.src = WorkArray[i][0];
}

Also Replace function cC() with below:

function cC() {
    var nelements = WorkArray.length;
    var rdmnum = Math.floor(Math.random() * nelements);
    var currentImage = rdmnum++;
    if (currentImage == nelements) {
        rdmnum = Math.floor(Math.random() * nelements);
    }
    currentImage = (currentImage + 1) % WorkArray.length;
    document.getElementById("work").style.backgroundImage = "url('" + WorkArray[currentImage][0] + "')";
}

edited Nov 19, 2014 at 15:04

answered Nov 19, 2014 at 14:14

Sreeraj

3142 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sreeraj Over a year ago

Have you changed i<=nelements; to i<nelements;?

Benny Over a year ago

Yep I did. I'm really just a noob at JS so there might just as well be another part missing...

Sreeraj Over a year ago

Try cC() function i added to my above answer

Benny Over a year ago

No succes... When I add [0] after WorkArray[currentImage] the images disappear again. Here is our site if you want to see it in action: holymothership.be

Benny Over a year ago

I already used another solution. I couldn't give the images all a seperate link so I made a workaround with jquery. When I use the code you supplied, the images won't show up.

Collectives™ on Stack Overflow

Add links to images in array

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related