Randomize images link to different url JavaScript

Question

I am trying to make it so that clicking each randomize images will link to the respective url that it belongs to, i.e. clicking on facebook image will go to facebook.com, and clicking on twitter will go to twitter.com

Currently my code here is:

    <p id="background" style="width:12%;height:23%"></p>
    <script type="text/javascript">
    function randomImage() {
        var fileNames = [
        "image1.png",
        "image2.jpg",
        "image3.png"
    ];


    var randomIndex = Math.floor(Math.random() * fileNames.length);

    document.getElementById('background').style.background = 'url(' + 
    fileNames[randomIndex] + ')';
    }
    randomImage();
    setInterval(randomImage, 2000);

   </script>

I've tried adding in various other methods to add the url, however my image will always disappear after adding. Thank you for looking at this post.

Max · Accepted Answer · 2019-02-23 17:55:51Z

1

it is not displaying because you set height of image in a percent, below is the working example:

<div style="height: 100vh;"><p id="background"style="width:12%;height:23%" ></p></div>

edited Feb 23, 2019 at 17:55

answered Feb 23, 2019 at 17:50

Max

8019 silver badges21 bronze badges

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

2 Comments

Bob Over a year ago

But how do you add a link to each randomize image..?

Max Over a year ago

you need you array of objects and another tag 'a' instead 'p' codepen.io/KoldunMax/pen/bzXLww?editors=1010

Collectives™ on Stack Overflow

Randomize images link to different url JavaScript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related