使用jquery和html/css覆蓋多圖像映射的懸停效果

我一直試圖查看過去的問題，但無法找到適合我的答案。使用jquery和html/css覆蓋多圖像映射的懸停效果

我正在這裏這些城市的影像圖。我使用地圖座標創建器來啓動我。

<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()">

我不知道......

來源

2016-02-20 Beta

這裏有一些解決方案。仍然在其餘的工作（*地圖不正確，但這是一個簡單的修復）。

<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>

來源

2016-02-20 05:49:23

非常感謝！你已經以比我以前任何時候都更遠的方式獲得了這種方式。我不完全理解你添加的內容以及它爲什麼需要成爲它的內容，但我會接受這個答案。 – Beta

問題是，使用「區域」標記時，無法在區域的形狀中應用透明顏色。因此，唯一的方法就是使用「canvas」標籤（使用透明顏色）繪製圖形。好消息是canvas標籤可以使用與區域標籤相同的座標。然後，您必須使用position：absolute和z-index在地圖上定位畫布。這是一個相當複雜和雜亂的工作。祝你好運！ –

使用jquery和html/css覆蓋多圖像映射的懸停效果

回答

相關問題