Question

误解如何将表格行与地图区域匹配？

表中的数据来自xml，需要将鼠标悬停与图片中显示的表匹配，现在只有一个问题，即所有表都鼠标悬停在101的相同位置，如何制作它时光标移动到表格的第二行，鼠标悬停可以切换到102？使用gridview将数据导入表中并按如下方式对表进行悬停：

         $(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">

来自此imagelink：http://www.imageurlhost.com/images/uc83gx4ns9ycczuc987f.jpg 到这个imagelink：http://www.imageurlhost.com/images/jj1o6smps93fo80hd5qp.jpg

匹配gridview行表与已创建的地图区域

0 个答案: