title: Conditionally change the image source based on its id value
body: <p>How can I set or change the image using JavaScript or jQuery? The <code>src</code> attribute of <code>img</code> tags with <code>id</code> less than or equal to 3 (that is, <code>img</code> with <code>id</code> as 1, 2, 3) should be changed to (or set to) flower image, then that of <code>img</code> tags with <code>id</code> as 4, 5, 6 be animal image and that of <code>img</code> with id more than 6 (that is, 7, 8) be the default image.</p>
  
  <p>I want to do this using the lesser than and greater than operators (&lt; and >) but I don't want to use a button. I want it to happen automatically when I update the image. Is that possible?</p>
  
  <p>I tried to do this but it is not working. </p>
  
  <pre><code>&lt;div id="image"&gt; 
  &lt;img id="img-1" src="..... "/&gt; 
  &lt;img id="img-2" src="..... "/&gt;
  &lt;img id="img-3" src="..... "/&gt; 
  &lt;img id="img-4" src="..... "/&gt; 
  &lt;img id="img-5" src="..... "/&gt; 
  &lt;img id="img-6" src="..... "/&gt; 
  &lt;img id="img-7" src="..... "/&gt; 
  &lt;img id="img-8" src="..... "/&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>Please answer with the full code using the image that make me understand.</p>