JSFiddle - React, Tailwind, and code Playground

HTML

<div id="main">
      <img id="image" src="http://23.23.184.26/miller/keyboardanimation/0.gif" width="506" height="319">
      <div id="key1" class="keyzone" style="top:175px; left:55px;"></div>
      <div id="key2" class="keyzone" style="top:100px; left:85px;"></div>
</div>

CSS

#main {
                position:relative;
            }
            .keyzone {
                position:absolute;
                z-index:1;
                width:50px;
                height:75px;
            }
            .keyzone:hover {
                background: red;
                opacity: 0.3; /* or use rgba() for modern browsers */
            }
            #image {
                background: url('http://23.23.184.26/miller/keyboardanimation/0.gif'); /* avoid flicker,
                   make it possible to load transparent key images */
            }

JavaScript

function load(path) {
    var img = new Image();
    img.src = path;
    return img;
}
var images = {
    key1: load("http://23.23.184.26/miller/keyboardanimation/1.gif"),
    key2: load("http://23.23.184.26/miller/keyboardanimation/2.gif")
};
var img = document.getElementById("image");

function keyUp() {
    img.src = "http://23.23.184.26/miller/keyboardanimation/0.gif";
}

function prevent(e) {
    e.preventDefault();
    return false;
}
for (var id in images) // see object declaration above
    (function(keyEl, src) {
        keyEl.onmousedown = function keyDown() {
            img.src = src;
        };
        keyEl.onmouseup = keyEl.onmouseout = keyUp; // resetter
        keyEl.onclick = prevent; // no selection on doubleclick etc.
    })(document.getElementById(id), images[id].src);