How do I place an image inside a <div> depending on the image dimensions?
<p>I am looking to place images inside a div depending on what the images dimensions are. For example:</p>

<ul>
<li>Div1: Any images with the width > 600 goes here.</li>
<li><p>Div2: Any images with the height >800 goes here.</p></li>
<li><p>img1 Dimensions = width:601px; height: 300px; Place this image on
Div1.</p></li>
<li>img2 Dimensions = width:400px; height: 850px; Place this image inside
Div2.</li>
</ul>

<p>How can I do that using javascript? </p>

<p>here is how I am attempting to do it.</p>

<pre><code>#Div1{
    width:600px;
    height:auto;
}
#Div2{
    width:auto;
    height:600px;
}
</code></pre>



<pre><code>var imageUrl = new Array();
    imageUrl[2] = '&lt;img id="checkfunctionfirst" src="img1.jpg"&gt;'
    imageUrl[3] = '&lt;img id="checkfunctionfirst" src="img2.jpg"&gt;'
    imageUrl[5] = '&lt;img id="checkfunctionfirst" src="img3.jpg"&gt;'

function checkfunctionfirst () {

    for(i=0;i&lt;=imageUrl.length;i++){
        if(imageUrl[i].width&gt;600){
            //place this image on Div1
        } 
        if(imageUrl[i].height&gt;800){
            //place this image on Div2
        }

    }    
}
</code></pre>

<p>Thanks</p>
