JSFiddle - React, Tailwind, and code Playground

by Keith Henry

HTML

<a href="wrappingAnchor.html" target="_blank">
    <img src="../img/logo.png" width="400" usemap="#test" />
    
</a>

<map name="test" id="test">
	<area shape="rect" coords="10,10,380,80" href="fromMap.html" title="imagemap" target="_blank">
</map>

CSS

body { background-color: navy; }

JavaScript

$('map').click(function() {
    var $this = $(this);
    var name = $this.attr('name');
    var $img = $('img[usemap="#' + name + '"]');
    var $link = $img.parents('a');
    if($link.length > 0){
        var wrapLink = $link[0].href;
        var width = $img.width();
        var height = $img.height();
        var $fallbackArea = $('<area shape="rect" coords="0,0,' + width + ',' + height + '" href="' + wrapLink + '" />')
        $this.prepend($fallbackArea);
    }
});