JSFiddle - React, Tailwind, and code Playground

by ten1seven

HTML

<div id="map"><img src="http://placekitten.com/g/100/100" height="100" width="100" /></div>

CSS

#map { height: 100px; margin: 50px 0 0 50px; position: relative; width: 100px; }
#map a { background: #00a8ff; display: block; position: absolute; }

JavaScript

fetchJSON = function() {
    var xmlHttpReq = false;
    
    if (window.XMLHttpRequest) { // Mozilla/Safari
        xmlHttpReq = new XMLHttpRequest();
    } else if (window.ActiveXObject) { // IE
        xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
    }
    
    // Add data for jsFiddle
    var params = 'json={"x1":15,"x2":25,"y1":20,"y2":30}';
    
    // Open request and set headers
    xmlHttpReq.open('POST', '/echo/json/', true);
    xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    xmlHttpReq.setRequestHeader('Content-length', params.length);
    
    // Wait for response
    xmlHttpReq.onreadystatechange = function() {
        if (xmlHttpReq.readyState == 4) {
            
            // Interpret JSON string
            var d = eval('(' + xmlHttpReq.responseText + ')'); 
            
            // Create link and set styling
            var map = document.getElementById('map');
            var myLink = document.createElement('a');
            myLink.href = '#';
            myLink.style.height = (d.y2 - d.y1) + 'px';
            myLink.style.left = d.x1 + 'px';
            myLink.style.top = d.y1 + 'px';
            myLink.style.width = (d.x2 - d.x1) + 'px';
            
            // Add link to DOM
            map.appendChild(myLink);
        }
    }
    
    // Send the request
    xmlHttpReq.send(params);
};

// Run the function
fetchJSON();