JSFiddle - React, Tailwind, and code Playground

by jfriend00

HTML

<div>
    <img id="test" src="http://photos.smugmug.com/photos/344291068_HdnTo-Ti.jpg" usemap="#anatomy"/>
</div>

<map name="anatomy">
  <area id="nose" shape="rect" coords="0,0,100,66"/>
</map>


<div>
<img id="preview"/>
</div>

JavaScript

function addEventHandler(obj, name, fn) {
    if (typeof obj == "string") {
        obj = document.getElementById(obj);
    }
    if (obj.addEventListener) {
        return(obj.addEventListener(name, fn));
    } else if (obj.attachEvent) {
        return(obj.attachEvent("on" + name, function() {return(fn.call(obj));}));
    }
}

function zoom() {
    // this here will refer to the calling object (which in this case is sthe <map>)
    console.log(this.id);
    document.getElementById("preview").src="http://photos.smugmug.com/photos/344290962_h6JjS-Ti.jpg";
}

addEventHandler("nose", "mouseover", zoom);