JSFiddle - React, Tailwind, and code Playground

by Michael Seifert

HTML

<div id="div">
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=350%C3%97150&w=350&h=150" id="myImg" alt="Image" width="350" height="150">
  <br>
  <input type="button" value="Make area active" onClick="function1();">
</div>

JavaScript

function function1() {
  var img = document.getElementById("myImg");
  var map = document.createElement("map");
  map.name = "myMap";

  var area = document.createElement("area");
  area.shape = "rect";
  area.coords = "0,0,100,50"
  area.onmouseover = function() {
    alert("over")
  };

  map.appendChild(area);
  img.appendChild(map);
  img.usemap = "#myMap";
}