Assign image to random number-range
<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>
