私は、単一のimage.Iでいくつかのリンクを作成する単一の画像内のリンク

Question

を作成し、我々は助け

ためthisリンクを使用しているmap.iエリアでそれを行うことができます知っているリンクを見てください。

しかし、今私の要件は選択状態をアクティブとして表示することです。これに加えて、アクティブ状態で複数の状態を同時に選択する必要があります。コントロールキーの組み合わせで

選択状態はここで

click = function(e) { 
       e.preventDefault(); 

       // Get clicked area element. 
       var i = e.srcElement || e.target; 

       /** 
       * Turn on/off alwaysOn option (boolean, false by default). 
       * Indicates whether to always show the hilighted areas. 
       */ 
       i.alwaysOn = !i.alwaysOn; 


       if (window.event) { 
        key = window.event.keyCode;  //IE 
        if (window.event.ctrlKey) 
         isCtrl = true; 
        else 
         isCtrl = false; 
       } 
       else { 
        key = e.which;  //firefox 
        if (e.ctrlKey) 
         isCtrl = true; 
        else 
         isCtrl = false; 
       } 


       // Apply changes. 
       if (isCtrl == true) { 
        i.alwaysOn = true; 
        $(i).data('maphilight', i).trigger('alwaysOn.maphilight'); 
       } 
       else { 
        i.alwaysOn = false; 
        $(img).hasClass('maphilighted').each(function() { 

         $(this).data('maphilight', i).trigger('alwaysOn.maphilight'); 
         /* here i want remove all selected (highlighted) state */ 
        }); 
       } 

      }; 

Answer 1

次のコードでは、マップ上で複数の状態を選択できます。

$('map').click(function(e) { 
    e.preventDefault(); 

    // Get clicked area element. 
    // Works in IE, FF, Chrome. 
    var i = e.srcElement || e.target; 

    /** 
     * Turn on/off alwaysOn option (boolean, false by default). 
     * Indicates whether to always show the hilighted areas. 
     */ 
    i.alwaysOn = !i.alwaysOn; 

    // Apply changes. 
    $(i).data('maphilight', i).trigger('alwaysOn.maphilight'); 
    // Explicitly adding a class to the element. 
    $(i).addClass('maphilighted'); 
}); 

Read about how to toggle highlighting。

---

un-highlightingの更新。

あなたはhasClass後に機能each呼び出すことはできません、なぜなら後者の戻りブール式、ないオブジェクトのリスト。非ハイライト用

ここで働いているコード：

if (!isCtrl) { 
    i.alwaysOn = false; 
    $('area').each(function() { 
     if ($(this).hasClass('maphilighted')) { 
      $(this).data('maphilight', i).trigger('alwaysOn.maphilight'); 
     } 
    } 
} 

---

更新2.

if (isCtrl) { 
    i.alwaysOn = true; 
    $(i).data('maphilight', i).trigger('alwaysOn.maphilight'); 
    $(i).addClass('maphilighted'); 
} else { 
    el = $(i.parentNode).children().each(function() { 
     this.alwaysOn = false; 
     if ($(this).hasClass('maphilighted')) { 
      $(this).data('maphilight', this).trigger('alwaysOn.maphilight'); 
      $(this).removeClass('maphilighted'); 
     } 
    }); 

    i.alwaysOn = true; 
    $(i).data('maphilight', i).trigger('alwaysOn.maphilight'); 
    $(i).addClass('maphilighted'); 
} 

Answer 2

を下回っている、これはあなたが

http://www.workwithchoicecuts.com/methodology/revisiting-the-html-image-map/

をやりたいのお手伝いをする必要があり、アクティブ状態の画像マップの一例です