图像映射访问ID(区域)

时间:2013-03-12 02:11:59

标签: javascript jquery image map

我有一张图像地图,我想要突出显示多边形,直到点击下一个多边形。

喜欢:点击plogone 1 - 突出显示

than:点击多边形2 - 突出显示(多边形1未突出显示)

<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="jquery.maphilight.js"></script>
<script>
$(function() {
 var nr = 0;
$('.map').maphilight({ strokeColor: 'ff0000', strokeWidth: 5});
$(polymap).click(function(e) {
            var data = $(high1).mouseout().data('maphilight') || {};
            data.alwaysOn = !data.alwaysOn;
            $(high1).data('maphilight', data).trigger('alwaysOn.maphilight');
            });
  });

</head>
  <body>
    <br>
    <img class="map" src="pb90%20%28150%29.html.png" ismap="ismap" usemap="#mapmap" alt="html imagemap created with QGIS" border="0">
    <map id="polymap" name="mapmap">
      <area id='high1'  shape="poly" href="PDF1.pdf" target="cont" coords="834,366,837,363,840" alt="">
      <area id='high2'  shape="poly" href="PDF2.pdf" target="cont" coords="940,236,941,236" alt="">
      <area id='high3'  shape="poly" href="PDF3.pdf" target="cont" coords="831,345,828,348,824" alt="">
....

我的问题是我无法访问区域的ID。如果单击多边形,则“high1”区域将高亮显示。 所以不是那个

$(high1).

我需要一种事件处理程序。

如果有人知道解决方案,那真的很酷: - )

欢呼伊曼纽尔

1 个答案:

答案 0 :(得分:0)

您的jquery选择器可以在area上,然后在click事件上运行的函数将取决于您单击的区域。在您的函数中,您可以使用this关键字来引用调用对象。

   $('area').click(function (e) {
        var data = $(this).mouseout().data('maphilight') || {};
        data.alwaysOn = !data.alwaysOn;
        $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
    });