title: Raphael.js onmouseover onmouseout event
body: <p>I've made 4 rectangles in raphael.js using the <strong>for loop</strong>. When I apply events such as onmouseover or onmouseout it applies only to the last rectangle created. I know something is wrong in my code. Please provide a solution and is there a way to simplify the code?</p>
  
  <p>JS Fiddle <a href="http://jsfiddle.net/TL78u/3/" rel="nofollow">Link</a></p>
  
  <pre><code>window.onload = function(){
      var paper = Raphael(0,0,640,540);
  
      for (i=0;i&lt;2;i++){
          for (j=0;j&lt;2;j++){
              var boxes = paper.rect(0+(j*320),0+(i*270),320,270).attr({fill:'#303030',stroke:'white'});
              boxes.node.onmouseover = function () {
                  boxes.attr("fill", "blue");
              };
              boxes.node.onmouseout = function () {
                  boxes.attr("fill", "#303030");
              };
          }
      }    
  }​
  </code></pre>