Display random image with fitting link

2013-05-21

An answer to this question on Stack Overflow.

Question

I'm using the below code to show random images which works fine. How can I add to this code so that each image gets it's own link? I.e. if "knife.png" is randomly picked I want it to have a link that takes the user to "products/knife.html" and so on.

Thanks for any help!

<div id="box">
<img id="image" /></div>
<script type='text/javascript'> 
var images = [
"images/knife.png",
"images/fork.png",
"images/spoon.png",
"images/chopsticks.png",];
function randImg() {
var size = images.length
var x = Math.floor(size * Math.random())
document.getElementById('image').src = images[x];
}
randImg();

Answer

Generalize your list of images so that that it can be multi-purposed - you can add additional information later. Then surround the image by an anchor tag (<a>) and use the following.

<div id="box">
  <a name="imagelink"><img id="image" /></a>
</div>
<script type='text/javascript'> 
  var images = ["knife","fork","spoon","chopsticks",];
  function randImg() {
    var size = images.length
    var x = Math.floor(size * Math.random())
    document.getElementById('image').src = "images/"+images[x]+".png";
    document.getElementById('imagelink').href="products/"+images[x]+".html";
  }
</script>
randImg();