Maphilight - 需要它去激活突出显示新鼠标点击

我使用的是由大卫林奇Maphilight，并尽可能突出鼠标悬停，这很好。我遇到的问题以及似乎没有任何示例的情况是，单击某个区域时，使区域A突出显示并保持点亮状态，并且在点击另一个区域时取消激活。Maphilight - 需要它去激活突出显示新鼠标点击

本质上，我使用演示页面中的脚本并试图相应地修改它，但是，我尝试过的所有内容都无法正常工作。它看起来非常简单直接，所以我很惊讶几乎没有关于这个功能的文档。

任何人有任何想法？基本上，我用作地图的图像是一个圆形，分为四个象限。每个象限在被挖空时应点亮，并在点击时保持点亮状态，直到地图上的新象限被选中。这是我用我的脚本：

$('.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'); 
    });

任何帮助或建议，你可能会很好。

UPDATE：在线链接到我工作的页面是http://test.dpigraphics.net/process.php

来源

2012-09-16 jbrown574

见[这个问题]（http://stackoverflow.com/questions/8397556/always-on-jquery-command ） – Owlvark

唯一的问题则存在链接到海报的例子不工作了，所以很难在什么情况下的解决方案是可用于查看。 – jbrown574

您是否在答案中尝试了解决方案？看起来您只需在点击处理程序中添加一行即可首先关闭所有高亮。 – Owlvark

中的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');

这段代码几乎是我原本想让我的地图工作的。从一个区域切换到另一个区域时，它闪烁一下，但它看起来工作得很好。希望这可以帮助别人，将来别人...

来源

2012-09-17 21:16:55 jbrown574

我喜欢这个解决方案 - 只是一个音符 - 有一个函数的缺失“}）;”而这一次犯规处理好，如果在同一区域多次:) –

用户点击，如果你选择地图的区域该解决方案不起作用，选择一个新的区域，然后回去和选择先前的区域。它永远不会回头。 – EHerman

试试这个：

$('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 
    }); 

});

（至少1.6 jQuery的需要。）

来源

2012-09-17 21:52:45 Owlvark

谢谢，但上面的代码正在为我工作。 – jbrown574

你应该把这个标记为答案。 – dreboy

该解决方案在本页面中充分利用所有这些解决方案。我只是希望当选择一个时，如果你在新区域上空盘旋，突出显示的区域将被隐藏。 – EHerman

有jQuery的解决方案& maphighlight只！：

的诀窍就在于在处理maphighlight输入的很好的一个属性：始终开启：

$("#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的官方网页。

来源

2013-08-06 10:29:08

-1

在jquery &只有maphighlight！：

的诀窍就在于在处理maphighlight输入的很好的一个属性：始终开启：

$("#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的官方网页。

来源

2013-08-06 10:40:53

这是非常错误的。当您选择地图的一个区域时，请选择一个新区域，然后返回到之前选择的区域。不知道发生了什么，但效果不佳。 – EHerman

@EHerman这是无稽之谈，因为那里是由全球removeClass，你有没有最新的maphighlight？你有没有其他的JS错误会阻止它的处理？我知道有几个旧版本盘旋...这对我有效... –

我不认为我有一个旧版本。我刚刚在两天前下载了它。我知道，通过代码看起来它应该可以工作，但对我而言，它造成了一些问题。我采用了另一种方法，我现在就要发布。 – EHerman

导入2 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>

来源

2015-06-30 14:09:11

随意问.. –

Maphilight - 需要它去激活突出显示新鼠标点击

回答

相关问题