Question

我正在使用David Lynch的Maphilight，并且只要在鼠标悬停时突出显示它就可以了。我遇到的问题是什么，似乎没有任何示例，当点击一个区域时，区域A突出显示并保持点亮状态B.单击另一个区域时停用。

基本上，我正在使用演示页面中的脚本并尝试相应地修改它，但是，我尝试过的所有内容都没有用。它看起来非常简单明了，所以我很惊讶这个功能几乎没有文档。

有人有任何想法吗？基本上，我用作地图的图像是一个圆形，分为象限。当鼠标悬停时，每个象限都应亮起，并在点击时保持亮起，直到选择了地图上的新象限。这是我用于我的脚本的内容：

$('.map').maphilight({fillColor: 'ff0000'});

$('#q1, #q2, #q3, #q4').click(function(e) {
        e.preventDefault();
        var data = $(this).mouseout().data('maphilight') || {};
        data.alwaysOn = !data.alwaysOn;
        $(this).data('maphilight', data).trigger('alwaysOn.maphilight');
    });

您可能获得的任何帮助或建议都会很棒。

更新：我正在处理的网页的在线链接是http://test.dpigraphics.net/process.php

Answer 1

试试这个：

$('map area').click(function(e) {
    e.preventDefault();
    var clickedArea = $(this); // remember clicked area
    // foreach area
    $('map area').each(function() {
        hData = $(this).data('maphilight') || {}; // get
        hData.alwaysOn = $(this).is(clickedArea); // modify
        $(this).data('maphilight', hData ).trigger('alwaysOn.maphilight'); // set
    });

});

（至少需要jQuery 1.6。）

Answer 2

在jsfiddle中玩了一些，并使用上面评论中的一些建议后，我找到了解决问题的方法：

   $('#process area').click(function() {
    $(this).data('maphilight', { alwaysOn: true }).trigger('alwaysOn.maphilight');

    $('.selected').data('maphilight', {
        alwaysOn: false
    }).trigger('alwaysOn.maphilight');

    $('#process area').removeClass('selected');

    $(this).addClass('selected');

这段代码几乎就是我打算让我的地图工作的方式。当从一个区域更改为另一个区域时，它会闪烁一点，但它似乎工作得很好。希望这有助于将来的其他人......

Answer 3

仅在jquery＆amp; maphighlight中有解决方案！：

诀窍在于处理maphighlight的输入属性中的一个：alwaysOn：

$( "#map-tag area" ).click(function(){
    $(this).data('maphilight', { 
          alwaysOn: true 
    }).trigger('alwaysOn.maphilight');
    //check if area wasnt already selected - otherwise gets buggy
    if( !$(this).hasClass('selected') ){ 
      $('.selected').data('maphilight', {
          alwaysOn: false
      }).trigger('alwaysOn.maphilight');
      $('#map-tag area').removeClass('selected');
      $(this).addClass('selected');
    }

});

编辑：确保您拥有最新的maphilight！：http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js，来自maphilight的官方网页。

Answer 4

导入两个js文件.. jquery.min.js AND jquery.maphilight.js

然后，

 $(function() {

   $('.map').maphilight({strokeColor:'808080',strokeWidth:10,strokeOpacity: 1,fillColor:'00c31d'});

    });

- HTML部分

<img src="YOUR IMAGE" class="map" usemap="#image-maps"/>
<map id="image-maps">

<area>
</map>

Answer 5

仅在jquery＆amp; maphighlight中有解决方案！：

诀窍在于处理maphighlight的输入属性中的一个：alwaysOn：

$( "#map-tag area" ).click(function(){
    $(this).data('maphilight', { 
          alwaysOn: true 
    }).trigger('alwaysOn.maphilight');
    //check if area wasnt already selected - otherwise gets buggy
    if( !$(this).hasClass('selected') ){ 
      $('.selected').data('maphilight', {
          alwaysOn: false
      }).trigger('alwaysOn.maphilight');
      $('#map-tag area').removeClass('selected');
      $(this).addClass('selected');
    }

});

编辑：确保您拥有最新的maphilight！：http://davidlynch.org/projects/maphilight/jquery.maphilight.min.js，来自maphilight的官方网页。

Maphilight - 需要它在新鼠标点击时停用突出显示

5 个答案: