title: Assign image to random number-range
body: <p>So, I've got my code ready to generate and print a random number between "-20 and 20". </p>
  
  <p>What I'd like to do, and this is where I'm stuck, is to assign 4 different images to a number range between my total range of "-20 to 20". </p>
  
  <p>For instance: </p>
  
  <ul>
  <li><code>image1.gif</code> would be assigned to any random # between "-20 and -10"</li>
  <li><code>image2.gif</code> assigned to "-9 and 0"</li>
  <li><code>image3.gif</code> to "1 and 10" </li>
  <li><code>image4.gif</code> to "11 and 20"</li>
  </ul>
  
  <p>Any suggestions much welcomed!</p>
  
  <p>EDIT:
  So based on Jon's answer, i've changed the last two lines to a document.write and am trying to get my actual images shown above the text output. I'm however aware of a faulty line in the IMG.SRC. What would this be needed to change to if my images were lying in my root dir? Thanks in advance.</p>
  
  <pre><code>&lt;html&gt;
  &lt;title&gt;RANDOM IMAGE TO NUMBER RANGE&lt;/title&gt;
  &lt;body&gt;
  &lt;center&gt;
  &lt;script language="javascript" type="text/javascript"&gt;
  var ranges = [
      { from: 11, image: "image4.jpg" },
      { from: 1, image: "image3.jpg" },
      { from: -9, image: "image2.jpg" },
      { from: -20, image: "image1.jpg" }       
  ];
  
  var random_num = (Math.round((Math.random()*41)+-20));
  var image = "default";
  
  for(var i = 0; i &lt; ranges.length; ++i) {
      if(random_num &gt;= ranges[i].from) {
          image = ranges[i].image;
          break;
      }
  }
  document.write("Number: " + random_num + " parts, " + " Imagetitle: = " + image);
  document.write('&lt;img src="'+ranges[image]+'"&gt;');
  
  &lt;/script&gt;
  &lt;br&gt;&lt;/br&gt;
  &lt;div&gt;
  CLICK &lt;a href="javascript:history.go(0);"&gt;REFRESH or F5&lt;/a&gt; FOR A RANDOM IMAGE on NUMBER-RANGE.
  &lt;/div&gt;
  &lt;/center&gt;
  &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>