Maphilight-需要在新的鼠标单击上使其停用高亮显示

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＆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 ANDjquery.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＆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的官方网页。