title: Selecting a random image to display
body: <p>I have a page that contains 4 images. I would like these images to be chosen randomly from a selection of images, each time the page is viewed.</p>
  
  <p>The images also need to link to a specific page (depending on which image is displayed).
  For example:</p>
  
  <ul>
  <li>image_01 &lt;- links to -> page_620.html</li>
  <li>image_04 &lt;- links to -> page_154.html</li>
  </ul>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="thankyou_wrapper"&gt;
    &lt;div class="thankyou"&gt;
      &lt;div class="socialphoto_container"&gt;
        &lt;div class="socialphoto"&gt;&lt;a href="page_082.html" target="_self"&gt;&lt;img src="images/image_01.jpg" width="220" height="220" /&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class="socialphoto"&gt;&lt;a href="page_128.html" target="_self"&gt;&lt;img src="images/image_05.jpg" width="220" height="220" /&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class="socialphoto"&gt;&lt;a href="page_852.html" target="_self"&gt;&lt;img src="images/image_08.jpg" width="220" height="220" /&gt;&lt;/a&gt;&lt;/div&gt;
        &lt;div class="socialphoto"&gt;&lt;a href="page_685.html" target="_self"&gt;&lt;img src="images/image_04.jpg" width="220" height="220" /&gt;&lt;/a&gt;&lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.thankyou_wrapper {
      width: 100%;
      background-color: #FFF;
  }
  .thankyou {
      margin: auto;
      width: 940px;
      min-height: 216px;
      overflow: hidden;
      padding-top: 20px;
      padding-bottom: 20px;
  }
  .socialphoto_container {
      width: 940px;
      height: 230px;
  }
  .socialphoto {
      width: 240px;
      height: 220px;
      margin-right: 0px;
      float: left;
  }
  .socialphoto:last-child {
      width: 220px;
  }
  </code></pre>
  
  <p>Any ideas?</p>