match gridview row table with map area already created

Question

Misunderstanding how to match the table row with map area?

The data inside the table is getting from the xml, need to match the mouseover with the table that in the picture show, now only having a problem that all the table is mouseovering the same location of 101 , how to make it when cursor move to second row of the table the mouseover can switch to 102 ? For getting the data into the table using gridview and doing the hover for the table as below:

         $(function() {
           $('.map').maphilight();
           $('#table').mouseover(function(e) {
             $('#101').mouseover();
           }).mouseout(function(e) {
             $('#101').mouseout();
           }).click(function(e) {
             e.preventDefault();
           });
         });


         function onMouseOver(rowIndex) {
           var gv = document.getElementById("table");
           var rowElement = gv.rows[rowIndex];
           rowElement.style.backgroundColor = "#7761a7";
           rowElement.cells[1].style.backgroundColor = "purple";


         }

         function onMouseOut(rowIndex) {
           var gv = document.getElementById("test");
           var rowElement = gv.rows[rowIndex];
           rowElement.style.backgroundColor = "#fff";
           rowElement.cells[1].style.backgroundColor = "#fff";
         }

<img src="images/test.png" width="auto" height="auto" class="map maphilighted" usemap="#simple" style="opacity: 0; position: absolute; left: 0px; top: 0px; padding: 0px; border: 0px;">
   
<map name="simple">
  <area id="101" href="#" shape="poly" coords="65, 47, 263, 46, 264, 76, 265, 132, 66, 134" alt="tab-1" data-maphilight="{&quot;strokeColor&quot;:&quot;7761a7&quot;,&quot;strokeWidth&quot;:1,&quot;fillColor&quot;:&quot;7761a7&quot;,&quot;fillOpacity&quot;:0.6}"
  title="Room 101">