A spike for enhanced area maps

by haikushane

HTML

<map name="primary" id="map">
  <area shape="rect" style="border: 3px solid red;" coords="30,30,70,70" href="boop.html">
</map>

<div>
  <img usemap="#primary" src="https://placehold.it/100x100" id="img">
</div>

JavaScript

class EnhancedMap {
	constructor(map) {
  	this.map = map;
    
    this.image = document.getElementById('img');
    this.parent = this.image.parentElement;
  }
  
  enhance() {
  	this.parent.appendChild(this.styledMap());
    this.parent.style.position = "relative";
  }
  
	styledMap() {
  	var enhancedMap = document.createElement("div");
    enhancedMap.style.width = `${this.image.getBoundingClientRect().width}px`;
    enhancedMap.style.height = `${this.image.getBoundingClientRect().height}px`;
    enhancedMap.style.position = "absolute";
    enhancedMap.style.top = "0px";
    enhancedMap.style.left = "0px";

  	for (var i = 0; i < this.map.children.length; i++) {
    	var area = this.map.children[i];
      var shape = document.createElement("div");

      shape.style.cssText = area.getAttribute('style');
      
      var sizeFromCoords = area.getAttribute('coords').split(',');
      
      shape.style.position = "absolute";
      shape.style.top = `${sizeFromCoords[0]}px`;
      shape.style.left = `${sizeFromCoords[1]}px`;
      shape.style.bottom = `${sizeFromCoords[2]}px`;
      shape.style.right = `${sizeFromCoords[3]}px`;
      
      shape.style.width = `${sizeFromCoords[3] - sizeFromCoords[1]}px`;
      shape.style.height = `${sizeFromCoords[2] - sizeFromCoords[0]}px`;
      
      shape.setAttribute('onClick', `window.location = "${area.getAttribute('href')}"`)
      shape.setAttribute('title', area.getAttribute('href'));
      
      enhancedMap.appendChild(shape);
    }
    
    return enhancedMap;
  }
}

(new EnhancedMap(document.getElementById('map'))).enhance();