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 之后，并使用了上面 cmets 的一些建议，我找到了解决问题的方法：

   $('#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 与 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&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官网。