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 - 需要它去激活突出顯示新鼠標點擊

回答

相關問題