Image link with javascript

Question

I am not into javascript, but I really want randomized pictures on my index page so was wondering if there is anything I could do with my current javascript to add image link to each picture?

< img id = "reklame" / >
  < script >
  function getRandomImage() {
    var images = ['bilder/reklame.jpg', 'bilder/reklame1.jpg', 'bilder/reklame2.jpg', 'bilder/reklame3.jpg'];
    var image = images[Math.floor(Math.random() * images.length)];

    return image;
  }

function displayRandomImage() {
  var htmlImage = document.getElementById("reklame");
  htmlImage.src = getRandomImage();
}
displayRandomImage(); < /script>

Now it is only doing it once - you need to add event like click or time interval, something that will call displayRandomImage() function. — n-dru
– n-dru, Commented Apr 24, 2015 at 9:19
What dou you mean by "imagelink"? Do you just mean the source of the imagefile or should the image redirect to another page on click? — Markai
– Markai, Commented Apr 24, 2015 at 9:23
I want it to be an image link, as in, when I click on the image, it will redirect me to another page, for example "products.php" — TheAsianTutorials
– TheAsianTutorials, Commented Apr 24, 2015 at 9:28

jmgross · Accepted Answer · 2015-04-24 09:22:21Z

1

You can do that with the setInterval function

//First call
displayRandomImage();
var loop = setInterval(function() {
    //Call each 5 seconds
    displayRandomImage()
}, 5000);

jsFiddle

answered Apr 24, 2015 at 9:22

jmgross

2,3461 gold badge22 silver badges25 bronze badges

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

Comments

Payer Ahammed · Accepted Answer · 2015-04-24 09:48:20Z

hope this will work:

<html>
<head></head>
<body>
<div id = "reklame">
<img  / >
</div>
  <script type="text/javascript">
  function getRandomImage() {
    var images = ['bilder/reklame.jpg', 'bilder/reklame1.jpg', 'bilder/reklame2.jpg', 'bilder/reklame3.jpg'];
    var image = images[Math.floor(Math.random() * images.length)];

    return image;
  }

function displayRandomImage() {
  var imgDiv = document.getElementById("reklame");
  var image = imgDiv.getElementsByTagName('img')[0];
    image.src = getRandomImage();
  var a=document.createElement('a');
     a.href=getRandomImage();
     a.appendChild(image);
    imgDiv.appendChild(a);
} 

window.setInterval(function(){
      displayRandomImage();
}, 5000);
</script>
</body>
</html>

Yellen · Accepted Answer · 2015-04-24 10:32:03Z

0

Call your displayRandomImage() inside setInterval()

window.setInterval(function(){
      displayRandomImage();
}, 5000);

try this fiddle - http://jsfiddle.net/yellen/twf16y5a/4/

Fiddle updated to link a url with each image

function getRandomImage() {
  var images = [{
      "image": "http://freethumbs.dreamstime.com/8/big/free_89634.jpg",
      "url": "http://www.google.com"
    }, {
      "image": "http://freethumbs.dreamstime.com/14/big/free_144227.jpg",
      "url": "http://www.facebook.com"
    }, {
      "image": "http://freethumbs.dreamstime.com/22/big/free_229201.jpg",
      "url": "http://www.stackoverflow.com"
    }]
    // You'd like store the image path and the url as a single object and have an array of that 
    //images = [{img, url},{img, url}]
  var image = images[Math.floor(Math.random() * images.length)];
  return image;
}

function displayRandomImage() {
  var htmlImage = document.getElementById("reklame");
  var link = document.getElementById("myuA");
  var imageObj = getRandomImage();
  htmlImage.src = imageObj.image;
  link.href  = imageObj.url;
}
displayRandomImage();
window.setInterval(function() {
  displayRandomImage();
}, 5000);

<a id="myuA" href="" target="_blank">
  <img id="reklame" />
</a>

edited Apr 24, 2015 at 10:32

answered Apr 24, 2015 at 9:34

Yellen

1,80016 silver badges35 bronze badges

4 Comments

Yellen Over a year ago

Give interval of your choice

TheAsianTutorials Over a year ago

Thank you, this worked, but am i able to click on the image and let it redirect me to products which is called "product.php" ??

Yellen Over a year ago

You can do that by chaging your getRandomImage() function to return an object {image:'path to image', link:'link to click'}

Yellen Over a year ago

@TheAsianTutorials - I've updated the answer with a new fiddle that links a url with each image

Simon · Accepted Answer · 2015-04-24 09:29:40Z

0

Maybe something like this?

<a id="reklame-link" href="#";>
<img id = "reklame" />

function displayRandomImage() {
var htmlImage = document.getElementById("reklame");
var htmlLink = document.getElementById("reklame-link");
var randomImage = getRandomImage();
htmlImage.src = randomImage;
htmlLink.href = randomImage; 
console.log(getRandomImage()); 
}

http://jsfiddle.net/y7rwhmd7/

answered Apr 24, 2015 at 9:29

Simon

1

Collectives™ on Stack Overflow

Image link with javascript

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related