使用jquery和html / css在多邊形圖像地圖上懸停效果

Question

我一直在嘗試瀏覽過去的問題，但找不到適合我的答案。

---

我正在這里繪制這些城市的地圖。 我使用地圖坐標創建者作為起點。

<h1>The cities of Hamilton Region</h1>
<img src="img/hamilton.png" alt="" usemap="#Map" />
</div>
<map name="Map" id="Map">
<area class="field" alt="" title="" href="#"  shape="poly" coords="74,175.64999389648437,106,169.64999389648437,95,128.64999389648437,164,111.64999389648437,164,99.64999389648437,191,71.64999389648437,289,164.64999389648437,227,222.64999389648437,196,238.64999389648437,101,262.6499938964844" />
<area alt="" title="" href="#" shape="poly" coords="233,331.64996337890625,255,261.6499938964844,238,233.64999389648437,200,242.64999389648437,101,264.6499938964844" />
<area alt="" title="" href="#" shape="poly" coords="261,193.64999389648437,277,212.64999389648437,268,220.64999389648437,253,224.64999389648437,248,235.64999389648437,218,237.64999389648437,207,237.64999389648437,242,220.64999389648437" />
<area alt="" title="" href="#" shape="poly" coords="314,288.64996337890625,321,272.64996337890625,339,265.6499938964844,341,251.64999389648437,355,255.64999389648437,361,241.64999389648437,349,238.64999389648437,326,198.64999389648437,332,223.64999389648437,322,215.64999389648437,309,211.64999389648437,307,220.64999389648437,291,217.64999389648437,274,221.64999389648437,255,226.64999389648437,251,246.64999389648437,258,262.6499938964844,256,272.64996337890625" />
<area alt="" title="" href="#" shape="poly" coords="403,315.64996337890625,422,253.64999389648437,415,251.64999389648437,404,257.6499938964844,383,245.64999389648437,375,247.64999389648437,363,241.64999389648437,358,257.6499938964844,344,253.64999389648437,343,267.6499938964844,325,276.64996337890625,319,288.64996337890625" />
<area alt="" title="" href="#" shape="poly" coords="374,308.64996337890625,254,271.64996337890625,232,334.64996337890625,352,388.64996337890625" />

</map>
<h1 id="city">Flamborough, Ontario</h1></br>
<h2 id="pop">Population: 39,220</h2>

現在，當我單擊一個字段時，一條藍線會圍繞邊框並包圍我單擊的城市。 我想使用jquery或css執行以下操作：

1. 而不是藍色的輪廓，該字段突出顯示（單擊時我希望它是紅色的）
2. 鼠標懸停時，該字段變為淺藍色
3. 再次單擊已單擊的字段（顯示為紅色）時，紅色消失。
4. 突出顯示為紅色時，圖像下方會出現文字，並提供簡短說明。
5. 再次單擊時，單詞消失。

我知道它與“ area”標簽有關。 也許做

<Area onlick="highlight_city()">

我不確定...

Answer 1

以下是一些解決方案。 其余部分仍在工作（*地圖未正確對齊，但這很容易解決）。

<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<style type="text/css">
area{
    outline-color: red;
}
</style>

<h1>The cities of Hamilton Region</h1>
<img src="http://i.stack.imgur.com/y8cf8.png" alt="" usemap="#Map" />
</div>
<map name="Map" id="Map">
<area data-city="City 1" data-pop="Population 1" class="field" alt="" title="" href="#"  shape="poly" coords="74,175.64999389648437,106,169.64999389648437,95,128.64999389648437,164,111.64999389648437,164,99.64999389648437,191,71.64999389648437,289,164.64999389648437,227,222.64999389648437,196,238.64999389648437,101,262.6499938964844" />
<area data-city="City 2" data-pop="Population 2" alt="" title="" href="#" shape="poly" coords="233,331.64996337890625,255,261.6499938964844,238,233.64999389648437,200,242.64999389648437,101,264.6499938964844" />
<area data-city="City 3" data-pop="Population 3" alt="" title="" href="#" shape="poly" coords="261,193.64999389648437,277,212.64999389648437,268,220.64999389648437,253,224.64999389648437,248,235.64999389648437,218,237.64999389648437,207,237.64999389648437,242,220.64999389648437" />
<area data-city="City 4" data-pop="Population 4" alt="" title="" href="#" shape="poly" coords="314,288.64996337890625,321,272.64996337890625,339,265.6499938964844,341,251.64999389648437,355,255.64999389648437,361,241.64999389648437,349,238.64999389648437,326,198.64999389648437,332,223.64999389648437,322,215.64999389648437,309,211.64999389648437,307,220.64999389648437,291,217.64999389648437,274,221.64999389648437,255,226.64999389648437,251,246.64999389648437,258,262.6499938964844,256,272.64996337890625" />
<area data-city="City 5" data-pop="Population 5" alt="" title="" href="#" shape="poly" coords="403,315.64996337890625,422,253.64999389648437,415,251.64999389648437,404,257.6499938964844,383,245.64999389648437,375,247.64999389648437,363,241.64999389648437,358,257.6499938964844,344,253.64999389648437,343,267.6499938964844,325,276.64996337890625,319,288.64996337890625" />
<area data-city="City 6" data-pop="Population 6" alt="" title="" href="#" shape="poly" coords="374,308.64996337890625,254,271.64996337890625,232,334.64996337890625,352,388.64996337890625" />

</map>
<h1 id="city">Flamborough, Ontario</h1></br>
<h2 id="pop">Population: 39,220</h2>

<script>
$(document).on('click',$('area'),function(e){
    $('#city').html( $(e.target).data('city') );
    $('#pop').html( $(e.target).data('pop') );
})
</script>

更新：

好的，還有更多：沒有辦法輕松地完成您正在談論的事情。 您必須使用畫布並在畫布上實際繪制多邊形

<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>

<style type="text/css">
area:hover {
    outline-color: red;
    border: 1px solid blue;
}
img {
    width: 490px;
}
</style>
</head>
<body>
<h1>The cities of Hamilton Region</h1>
<img src="file:///Users/alainnisam/Desktop/Screen Shot 2016-02-20 at 12.24.40 AM.png" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area data-city="City 1" data-pop="Population 1" class="field" alt="" title="" href="#"  shape="poly" coords="74,175.64999389648437,106,169.64999389648437,95,128.64999389648437,164,111.64999389648437,164,99.64999389648437,191,71.64999389648437,289,164.64999389648437,227,222.64999389648437,196,238.64999389648437,101,262.6499938964844" />
<area data-city="City 2" data-pop="Population 2" alt="" title="" href="#" shape="poly" coords="233,331.64996337890625,255,261.6499938964844,238,233.64999389648437,200,242.64999389648437,101,264.6499938964844" />
<area data-city="City 3" data-pop="Population 3" alt="" title="" href="#" shape="poly" coords="261,193.64999389648437,277,212.64999389648437,268,220.64999389648437,253,224.64999389648437,248,235.64999389648437,218,237.64999389648437,207,237.64999389648437,242,220.64999389648437" />
<area data-city="City 4" data-pop="Population 4" alt="" title="" href="#" shape="poly" coords="314,288.64996337890625,321,272.64996337890625,339,265.6499938964844,341,251.64999389648437,355,255.64999389648437,361,241.64999389648437,349,238.64999389648437,326,198.64999389648437,332,223.64999389648437,322,215.64999389648437,309,211.64999389648437,307,220.64999389648437,291,217.64999389648437,274,221.64999389648437,255,226.64999389648437,251,246.64999389648437,258,262.6499938964844,256,272.64996337890625" />
<area data-city="City 5" data-pop="Population 5" alt="" title="" href="#" shape="poly" coords="403,315.64996337890625,422,253.64999389648437,415,251.64999389648437,404,257.6499938964844,383,245.64999389648437,375,247.64999389648437,363,241.64999389648437,358,257.6499938964844,344,253.64999389648437,343,267.6499938964844,325,276.64996337890625,319,288.64996337890625" />
<area data-city="City 6" data-pop="Population 6" alt="" title="" href="#" shape="poly" coords="374,308.64996337890625,254,271.64996337890625,232,334.64996337890625,352,388.64996337890625" />

</map>
<h1 id="city">Flamborough, Ontario</h1></br>
<h2 id="pop">Population: 39,220</h2>

<canvas id="myCanvas" style="border:1px dashed #FF0000;"></canvas>

<script>
$(document).on('click',$('area'),function(e){
    $('#city').html( $(e.target).data('city') );
    $('#pop').html( $(e.target).data('pop') );
})

$("area").click(function () {
  var $input = $(this);
  var obj = $input.attr("coords").split(',');
  var poly = obj;
  //alert(poly);
  var canvas = document.getElementById('myCanvas');
  var ctx = canvas.getContext('2d');
  ctx.fillStyle = 'rgba(255, 0, 0, .5)';

  ctx.beginPath();
  ctx.moveTo(poly[0], poly[1]);
  for (item = 2; item < poly.length - 1; item += 2) {
    ctx.lineTo(poly[item], poly[item + 1])
  }

  ctx.closePath();
  ctx.fill();
});

//$('#myCanvas').css('width',$('img').css('width')).css('height',$('img').css('height')).css('background-image','url(' + $('img').attr('src') + ')');
$('#myCanvas').css('width','490px').css('height','495px');
</script>
</body>
</html>