使用 jquery 和 html/css 在多边形图像地图上悬停效果答案

【问题标题】：Hover effect over a poly image map using jquery and html/css使用 jquery 和 html/css 在多边形图像地图上悬停效果
【发布时间】：2016-02-20 01:25:19
【问题描述】：

我一直在尝试查看过去的问题，但找不到适合我的答案。

我正在这里制作这些城市的图像地图。我使用地图坐标创建器来启动我。

<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 来执行以下操作：

该字段不是蓝色轮廓，而是突出显示（我希望它点击时为红色）
当鼠标悬停时，字段变为浅蓝色
当再次单击已单击的字段（显示为红色）时，红色消失了。
当以红色突出显示时，图像下方会出现文字关于它的描述。
再次点击时，文字消失。

我知道这与“区域”标签有关。也许在做

<Area onlick="highlight_city()">

我不确定...

【问题讨论】：

标签： jquery html css

【解决方案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>

【讨论】：

非常感谢！你已经走得比我一个人走得更远了。我不完全明白你添加了什么以及为什么它需要它是什么，但我会接受这个作为答案。
问题在于，使用“区域”标签，无法在区域形状中应用透明颜色。因此，唯一的方法是使用“canvas”标签（透明颜色）绘制一个形状。好消息是画布标签可以使用与区域标签相同的坐标。然后，您必须使用 position: absolute 和 z-index 将画布定位在地图上。这是一项相当复杂和笨拙的工作。祝你好运！
@AlainNisam：它就像一个魅力！我们也可以在鼠标悬停时做同样的事情吗？