JSFiddle - React, Tailwind, and code Playground

by Michael Prosser

HTML

<img src="http://stanfordflipside.com/images/3.jpg" width="2197" height="1463" border="0" usemap="#Map" />

JavaScript

$(document).ready(function (e) {
    
    var img = $('img');
    
    
    var clickunit = 20;
    var mapcode = '<map name="Map" id="Map">';
    
    img.attr('usemap','#Map');
    
    // get the width and height of the image then divide it by click unit
    
    var w = img.width();
    var h = img.height();
    
    // start loop - height first - like a typewriter
    
    var tw = 0;
    var th = 0;
    
    for(y=0;y<h;y+=clickunit){
        
        for(x=0;x<w;x+=clickunit){
        
            mapcode += '<area shape="rect" coords="' + x + ',' + y + ',' + parseInt(x+clickunit) + ',' + parseInt(y+clickunit) + '" href="javascript:void(0);" onclick="alert(\'X: ' + x + ' Y: ' + y + '\');" />'; 
            
            
            
        }
        
    }
    
    mapcode += '</map>';
    
$('body').append(mapcode);  
    
    
    
    
});