製作疊加圖像映射的更好方法？

我的目標是在屏幕上顯示圖像，並且當用戶將鼠標懸停在各種多邊形上時，它們將在它們所在的多邊形上覆蓋藍色覆蓋。製作疊加圖像映射的更好方法？

拿這個圖像爲例：

我想象寫這樣的代碼：

<img src="planets.gif" width="145" height="126" usemap="#polymap"> 
<img id="StarOverlay" src="StarOverlay.png" style="position:absolute;top:30px;left:59px;display:none;"/> 

<map name="polymap"> 
    <area id="star" shape="poly" coords="0,0,82,126" alt="Star"> 
    <area shape="circle" coords="90,58,3" alt="Circle"> 
    <area shape="Rectangle" coords="124,58,8" alt="Square"> 
    <area shape="Rectangle" coords="124,58,8" alt="Square"> 
</map> 

$(document).ready(function() { 
    $('#star').hover(function() { 
     $('#StarOverlay').show(); 
    }, function() { 
     $('#StarOverlay').hide(); 
    }); 
});

不過，我需要進行非常詳細的覆蓋每個並採取很特別關心映射。我需要做15個圖像，每個圖像超過40個映射，所以這將非常耗時（我估計它會花費我一個月或更長的時間）。

有沒有比HTML5更好的方法？或任何其他HTML功能來實現這一點，而不必在Photoshop中創建這些地圖和圖像覆蓋？

來源

2016-05-23 Jrud

您可以參考https://css-tricks.com/examples/ShapesOfCSS/並使用css創建各種形狀 – brk

好主意，但我應該清楚。我不會總是有完美的幾何形狀。有沒有辦法用點來定義一個poly？ – Jrud

我會說你對SVG更好 - 無論是涉及到瀏覽器支持還是易用性（從開發人員的角度來看）。甚至可用性方面，因爲你可以直接使用put鏈接，https ：//www.w3.org/wiki/SVG_Links – CBroe

我會說你最好用SVG [而不是CSS形狀] - 無論是涉及到瀏覽器支持還是易用性（從開發人員的角度來看）。甚至可用性方面，因爲您可以直接將鏈接放入它中（請參閱fe https://www.w3.org/wiki/SVG_Links）

只要您通過svg元素嵌入它，就可以直接在SVG內部處理懸停效果，以便可以輕鬆地從主要文檔的樣式表。

使用任何可以處理矢量圖形/ SVG的半路體面圖形程序/編輯器（如Inkscape或Illustrator）應該可以獲得形狀。這些人往往會在他們保存的SVG文件中包含大量的臃腫內容，因此您可能希望在將SVG放入網絡之前將其縮小/縮小 - https://jakearchibald.github.io/svgomg/是一款易於使用的在線工具（可用於更頻繁的使用）

來源

2016-05-23 21:57:36 CBroe

製作疊加圖像映射的更好方法？

回答

相關問題