JSFiddle - React, Tailwind, and code Playground

by jmjpro

HTML

<img class="preload" src ="http://cloud.github.com/downloads/malsup/cycle/beach1.jpg"/>
<img class="preload" src ="http://cloud.github.com/downloads/malsup/cycle/beach2.jpg"/>
<img class="preload" src ="http://cloud.github.com/downloads/malsup/cycle/beach3.jpg"/>
<div id="container"></div>

CSS

.preload {
    display: none;
}

JavaScript

var stage = new Kinetic.Stage({
  container: 'container',
  width: 200,
  height: 200
});

var layer = new Kinetic.Layer();


var creatures = new Array();

var images = document.getElementsByTagNames("img");
  curY = 10;
  for( var imageIt = 0; imageIt < images.length; imageIt++ ) {
    image = images[imageIt];
    creature = new Kinetic.Image({
      x: 10,
      y: curY,
      image: image,
      width: image.width,
      height: image.height
    });
    layer.add(creature);
    creature.on('mouseover', function() {
      creature.hide();
      layer.draw();;            
    });
    curY++;
  }
  stage.add(layer);