使用JavaScript突出顯示圖像的一部分

我運行一個小網頁，允許用戶使用圖像地圖點擊各種鏈接。我想突出顯示用戶點擊的部分以向用戶提供一些反饋（他們可能會快速點擊幾個不同的部分）。使用JavaScript突出顯示圖像的一部分

有沒有一種方法可以顛倒（或以其他方式突出顯示）JavaScript圖像的一小部分？

感謝，

來源

2009-12-13 Joe

有，但請具體說明該地區的大小以及您如何確定該地區。這只是他們點擊的廣場或只有特定區域？你只是想繪製一個他們的圖像地圖是一個盒子？ – 2009-12-13 09:40:12

而不是使用影像地圖，你可以試試這個CSS方法：

使用上的每個「圖像映射」部分（鏈接）上面的透明<div>，然後使用CSS :hover僞類來處理突出顯示。

CSS：

#image { 
    position: relative; 
    width: 400px; 
    height: 100px; 
    background-image: url(image_map.png); 
} 

#map-part { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    width: 50px; 
    height: 50px; 
    background-color: transparent; 
} 

#map-part:hover { 
    background-color: yellow;   /* Yellow Highlight On Hover */ 
    opacity: 0.2; 
    filter: alpha(opacity=20);  
}

HTML：

<div id="image"> 
    <a id="map-part" href="http://www.example.com/"></a> 
</div>

注意，這隻會爲矩形環節的工作。

來源

2009-12-13 09:40:29

對於純CSS選項+1，即使它不是反轉圖像。 – 2009-12-13 10:48:14

+1非常巧妙的解決方案 – Xavi 2009-12-29 00:36:33

謝謝，讓它工作。對於我使用「display：block」的a-links，以及margin-top＆margin-left而不是top＆left，所以座標是相對的。 – 2011-09-22 09:58:21

看看jQuery MapHilight。
我不確定它是否完全符合您的需求，但您可以通過稍微調整來實現。

來源

2009-12-13 09:42:13 Kobi

+1不錯的插件！ – 2009-12-13 09:43:21

請參考本例使用MapHilight：http://stackoverflow.com/a/17614118/2313371 – 2014-08-14 12:29:48

如何將半透明<DIV>塊覆蓋在點擊區域以突出顯示它？

來源

2009-12-13 09:42:28

有很多種方式，

在d時尚的方式，您的圖像分解成許多小塊，用表格把它們結合起來。之後，通過使用javascript替換突出顯示效果的thr「src」屬性。

在另一種CSS方式中，使用CSS來剪切alt。原圖頂部的圖像，並控制哪個區域應該可見。

最好爲所有人提供一張圖片，而不是多張小圖片以加快速度，用戶可以毫不拖延地通過網絡獲取圖片。

來源

2009-12-13 09:44:35

使用JavaScript突出顯示圖像的一部分

回答

相關問題