嘗試使用HTML/CSS/jQuery/JavaScript突出顯示.png部分

我正在嘗試使用HTML/CSS/JavaScript/jQuery突出顯示.png文件的一部分。我能夠顯示圖像，但不知道如何突出顯示特定部分（我不想突出顯示整個圖像）。嘗試使用HTML/CSS/jQuery/JavaScript突出顯示.png部分

此刻，我必須要顯示的圖像的HTML代碼很簡單：

<img src="myImage.png" />

沒有什麼過於奢侈。

必須突出顯示的部分對用戶仍然可見。理想情況下，我希望突出顯示是一組可以通過調用特定方法/函數打開/關閉的控件。這是可能的，如果是的話，如何？我是否需要指定想要突出顯示的區域的確切座標（例如，x，y，長度，寬度）？我對此很滿意，這只是我是網頁設計新手，並且誠實地不知道如何做到這一點。

來源

2013-04-28 syedfa

你是什麼意思的「亮點」？你可以創建一個覆蓋在圖像上的半透明盒子來創建一個高光，或者你的意思是在一個區域周圍放置一個邊框？請解釋什麼會突出顯示或爲什麼你會突出顯示，所以我可以給你一些想法。 – rncrtr 2013-04-28 03:04:19

非常感謝您的及時響應。通過「突出顯示」，我的意思是我想在圖像的一部分周圍放置一個彩色（但透明）的邊框，以增強該區域所包圍的區域的可見性。換句話說，前者在你的答案中，而不是後者:-) – syedfa 2013-04-28 03:06:34

你能做到這一點可見這些方針的東西：jsFiddle example

HTML

<div id="container"> 
    <img src="http://www.placekitten.com/200/200" /> 
    <div id="highlight"></div> 
</div>

CSS

#container { 
    position:relative; 
} 
#highlight { 
    position:absolute; 
    width:75px; 
    height:75px; 
    top:75px; 
    left:75px; 
    background: rgba(255, 0, 0, 0.4); 
}

此例如位置內的圖像上面一個div一個騙局tainer，並使用rgba將背景設置爲部分透明。您可以通過JavaScript設置位置，顏色，不透明度等。

來源

2013-04-28 03:13:15 j08691

非常感謝你的解決方案。我是否需要使用jQuery才能正常工作，如果我想單獨留下顏色和區域，可以使用javascript打開/關閉此功能？ – syedfa 2013-04-28 03:20:22

不，從技術上講，你永遠不需要jQuery，因爲你可以做任何jQuery在普通JavaScript中做的事情; jQuery使它變得非常容易。但要確保它是動態的，就像打開或關閉它，或者移動它，然後是的，你需要JavaScript（某種類型的）。 – j08691 2013-04-28 03:21:44

我確實需要在這裏澄清。這裏定義的區域如何？我看到寬度和高度已定義，但頂部和左側又是什麼？距離圖像上限（即「y」座標，「左」，「x」座標）的距離是「頂部」？ – syedfa 2013-04-28 03:26:12

嘗試使用HTML/CSS/jQuery/JavaScript突出顯示.png部分

回答

相關問題