JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<div id="results"></div>
    
<map name="sceneROs4" class="makeMasks" >
  <area shape="rect" coords="167,3,456,650" href="/main/ProductArray.jsp?N=306418052+4294912124+399545540&esre=burberrynov11londonMapparelpa" data-ROcoords="154,258,353,300" />
  <area shape="rect" coords="457,4,684,309" href="/main/ProductArray.jsp?N=306429510+4294912414&esre=burberrynov11londonMscarvespa" data-ROcoords="416,67,634,122" />
  <area shape="rect" coords="700,146,943,301" href="/main/ProductArray.jsp?N=306418209+4294912414&esre=burberrynov11londonMwalletspa" />
  <area shape="rect" coords="799,3,952,147" href="/main/ProductArray.jsp?N=306418216+4294912414&esre=burberrynov11londonMjewelrypa" data-ROcoords="768,22,956,87" />
  <area shape="rect" coords="498,341,883,578" href="/main/ProductArray.jsp?N=306421146+4294912414&esre=burberrynov11londonMaccessoriespa" />
</map>

CSS

#results{
    height:100px;
    width:300px;
    border:red 1px solid;
    padding:10px;
}

JavaScript

jQuery(".makeMasks area").each(function() {
    console.log('jquery: ', jQuery(this).attr("coords"));
    console.log('getAttribute: ', this.getAttribute('coords'));
    var attrNode = this.getAttributeNode('coords');
    console.log('getAttributeNode: ', attrNode.nodeValue);
    console.log('getAttributeNode.specified: ', attrNode.specified);
});