1

私は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です。

4

5 に答える 5

7

これを試して：

$('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 が必要です。)

于 2012-09-17T21:52:45.147 に答える
0

jsfiddle someで遊んで、上記のコメントからの提案のいくつかを使用した後、私は私の問題の解決策を見つけました:

   $('#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-17T21:16:55.037 に答える
-1

jquery&maphighlightのみに解決策があります! :

秘訣は、maphighlight の入力属性の適切な 1 つを処理することです: 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 の公式 Web ページから。

于 2013-08-06T10:40:53.477 に答える