title: Tween Kineticjs Images loaded in loop
body: <p>I have an issue with images loaded to the canvas not tweening properly. I have mouseover and mouseout events listening on each images that loaded. I want the image to enlarge when mouseover is triggered and reverse on mouseout.</p>
  
  <p>Problem is when I mouseover any image, only the last loaded image enlarges and retracts.</p>
  
  <p>This coincides with another issue I will have when object is clicked, the attributes I want to pass will only be the of the last one loaded..</p>
  
  <p>How do I focus the mouse clicks and hovers to specific node and its attributes from array? The answer may be an index, but seeing I'm not a pro developer, I need some assistance</p>
  
  <p>I tried a suggestion from a similar post here to focus the event in my situation, titled "KineticJS: Play tween after finish other tween" (don't have reputation for multiple links). I tried the following <a href="http://jsfiddle.net/cr3jmy2b/30/" rel="nofollow">http://jsfiddle.net/cr3jmy2b/30/</a> using a portion of the sample code and it did not work.</p>
  
  <p>Below is the portion of code that loads the image successfully and tweens only the last image (<a href="http://jsfiddle.net/cr3jmy2b/27/" rel="nofollow">http://jsfiddle.net/cr3jmy2b/27/</a>).</p>
  
  <p>Many thanks to someone who can help or suggest a different way. </p>
  
  <pre><code>var x = 25;
      var xx = 25; 
  
      buttonSize = 52 + 10;
  
  
  
  
      for(var i=0;i&lt;imgs.length;i++){
         if(i &gt; 11){
          var img=new Kinetic.Image({
              x:xx,
              y:400,
              width:45,
              height:65,
              image:imgs[i],
              draggable:true
          }); l.add(img);  xx+=buttonSize;
         } else {
          var img=new Kinetic.Image({
              x:x,
              y:320,
              width:52,
              height:65,
              image:imgs[i],
              draggable:true
          });
  
          l.add(img); x+=buttonSize;
       }
        for(var s=0; s&lt;oweb.length; s++){
        var ser = oweb[s];
        var sdb = ser.split("_");
        var sname = sdb[1];
        var sattrib = sdb[2];
        var sval = sdb[3];
        var sid = sdb[4];
        }
  
  
        //l.draw();
  
          var tween = new Kinetic.Tween({ node: img, duration: 1, scaleX: 2, scaleY: 2 });
        img.on('mouseover', function(){ tween.play(); console.log("over"); });
        img.on('mouseout', function(){ tween.reverse(); console.log("out"); });
        img.on('mousedown touchstart', function(){
        //document.getElementID(sdb[4]).checked = true;
        console.log("clicked");
        }); l.draw();
        }
  
      l.draw();
  }                                 
  </code></pre>
  
  <p>Andre               </p>