JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.kineticjs.com/download/kinetic-v4.0.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/kineticjs/5.2.0/kinetic.js"></script>
<div id="container" />
JavaScript
function loadImages(sources, callback) {
var assetDir = 'http://kinlibtst.elitno.net/PROJECT/';
var images = {};
var loadedImages = 0;
var numImages = 0;
for (var src in sources) {
numImages++;
}
for (var src in sources) {
images[src] = new Image();
images[src].onload = function() {
if (++loadedImages >= numImages) {
callback(images);
}
};
images[src].src = assetDir + sources[src];
}
}
function initStage(images) {
var stage = new Kinetic.Stage({
container: 'container',
width: 900,
height: 452
});
var imagesLayer = new Kinetic.Layer();
// img vars
var n_amer = new Kinetic.Image({
image: images.n_amer,
x: 0,
y: 0
});
var n_amer_sel = new Kinetic.Image({
image: images.n_amer_sel,
x: 0,
y: 0,
visible: false
});
// mouse events
n_amer.on('mouseover', function() {
n_amer_sel.show();
stage.draw();
});
n_amer_sel.on('mouseout', function() {
n_amer_sel.hide();
stage.draw();
});
// add to stage
imagesLayer.add(n_amer);
imagesLayer.add(n_amer_sel);
stage.add(imagesLayer);
}
var sources = {
n_amer: 'N-Amer.png',
n_amer_sel: 'N-Amer_sel.png'
};
loadImages(sources, initStage);