title: Image roll over script not working as expected
body: <p>This is how I am calling the JavaScript function in my HTML page:-</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot; src=&quot;imagerollover.js&quot;&gt;&lt;/script&gt;
  
  &lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
  //Following function should be called at the end of the page:
  imagerollover();
  &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  .
  .
  .
  </code></pre>
  <p>this is my imagerollover.js:-</p>
  <pre><code>function imagerollover(){
      
      var allimages=document.getElementsByTagName(&quot;img&quot;)
      var preloadimages=[]
      for (var i=0; i&lt;allimages.length; i++){
          if (allimages[i].getAttribute(&quot;data-over&quot;)){ //if image carries &quot;data-over&quot; attribute
              preloadimages.push(new Image()) //preload &quot;over&quot; image
              preloadimages[preloadimages.length-1].src=allimages[i].getAttribute(&quot;data-over&quot;)
              allimages[i].onmouseover=function(){
                  this.src=this.getAttribute(&quot;data-over&quot;)
              }
              allimages[i].onmouseout=function(){
                  this.src=this.getAttribute(&quot;data-out&quot;)
              }
          } //end if
      } //end for loop
  }
  
  //Usage: Call following function at the end of the page:
  //imagerollover()
  </code></pre>
  <p>Image tags:</p>
  <pre><code>&lt;img src=&quot;knitting1.jpg&quot; 
  data-over=&quot;knitting2.jpg&quot; 
  data-out=&quot;knitting1.jpg&quot; 
  alt=&quot;Logo&quot; width=&quot;400px&quot; height=&quot;90&quot; align=&quot;middle&quot; /&gt;
  </code></pre>
  <p>Also, both images knitting1.jpg and knitting2.jpg exist in my site's root folder. I don't know what is wrong.</p>
  <p>I placed an alert inside imagerollover.js file in the beginning. It is getting called but it is not showing any roll over effect. Why?</p>