title: Display random image with link on website
body: <p>I have a website where people can download pdf-documents. In order to make the site more appealing, I would now like to display a screenshot of the first page of a random report and if the user clicks on it, open the appropriate pdf-file from which the screenshot was taken.</p>
  
  <p>Right now, I am using the following javascript code to achieve this:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  var total_images = 3;
  var random_number = Math.floor((Math.random()*total_images));
  var random_img = new Array();
  random_img[0] = '&lt;a href="documents/report1.pdf"&gt;&lt;img src="images/report1.jpg"&gt;&lt;\/a&gt;';
  random_img[1] = '&lt;a href="documents/report2.pdf"&gt;&lt;img src="images/report2.jpg"&gt;&lt;\/a&gt;';
  random_img[2] = '&lt;a href="documents/report3.pdf"&gt;&lt;img src="images/report3.jpg"&gt;&lt;\/a&gt;';
  document.write(random_img[random_number]);
  --&gt;&lt;/script&gt;
  </code></pre>
  
  <p>This is working without any problems. However, there are new pdf-docs added all the time and editing the code everytime is kind of a pain. I've read that it might be possible to populate the javascript array using php. Unfortunately, I am a complete noob when it comes to that and am not sure how I would go about doing this and still have the screenshot link to to the right report.</p>
  
  <p>Any ideas how this could be achieved?</p>
  
  <p>Many thanks in advance!</p>