Javascript - 如何更改圖像部分的顏色

我有一個純白色的圖像。我使用<map>和<area>標籤來創建調用函數的小節，但我也想更改每節的顏色。我怎樣才能做到這一點？Javascript - 如何更改圖像部分的顏色

編輯：我也想讓它可以稍後改變顏色，我想使用Javascript，因爲顏色取決於某個變量是什麼。

編輯2：顏色變化不能只是在鼠標懸停。

來源

2014-03-12 CPC

您是使用點擊還是更改jQuery函數或 ?? ........如果您想在某些其他交互發生時更改該部分的顏色？或者只是永久改變它的顏色？ –

只是永久地改變它......其實，我希望稍後將其更改爲另一種顏色，但只要頁面加載，它就應該從某種顏色開始。 – CPC

這將最初在css中設置一個顏色。

設置ID給每個這些標籤

<map id="my_fake_id">

在CSS的

#my_fake_id { 
    color:#color_number; 
}

以後改變這一切，你需要做的就是調用一個函數，檢查其值等於什麼你希望它等於，然後將CSS的顏色設置爲你想要的。

var change_color = function(param){ 
    var exampleValue = whatever-the-value-is; 
    if(param == exampleValue){ 
     $("#my_fake_id").css('color','red'); 

    } 
}

編輯：看到這個搗鼓正確的想法和出發點 http://jsfiddle.net/mrQJu/2/

來源

2014-03-12 16:09:22

我不是內嵌造型的粉絲，但從技術上講，您也可以執行 –

，但沒有工作，我已經試過了。 – CPC

我不明白這會如何更好地工作。 – CPC

編輯：按照您的評論對原來的問題，這不會永久地改變顏色，只是暫時的鼠標移到。

有幾種方法可以做到這一點。首先將爲map的每個區域覆蓋一些div，然後爲div進行着色。您也可以通過疊加圖像並在map的部分上顯示圖像，將鼠標懸停在上方。因此，例如，如果您有一張世界地圖，並且想要在鼠標懸停時突出顯示北美地區，請製作地圖北美部分的圖像，並將該div覆蓋在現有圖像上，以使其顯示在鼠標懸停上。

這樣做的一個更好的（也是更簡單的方法）是創建一個圖像，即原始圖像的寬度乘以<area> s的數目加1.該長圖像的最左側區域將具有原始圖像，將原始圖像的副本相鄰堆放在右側，每個副本都突出顯示所需的區域。

------------------- 
|orig.| 1 | 2 | 
|  |  |  | 
-------------------

然後使用CSS向左移動圖像，使高亮顯示的區域顯示在鼠標上方。這具有隻需要在瀏覽器中加載一個圖像的附加優點，並且還減少了閃爍。

希望這是有道理的;如果您需要進一步澄清請留下評論。

來源

2014-03-12 16:11:01 ElGavilan

如何讓它永久更改？或者至少在我稍後改變它之前。 – CPC

像這樣的東西可能工作

<area shape="rect" COORDS="0,0,800,600" href="#" onmouseover="this.style.backgroundColor='#00FF00';" onmouseout="this.style.backgroundColor='transparent';"/>

或者，如果你想改變顏色，如果用戶選擇它

<area shape="rect" COORDS="0,0,800,600" href="#" onclick="this.style.backgroundColor='#00FF00';"/>

如果顏色是基於變量... 使用onclick = changeMyColor()

function changeMyColor(){ 
    var changeThisColor = document.getElementById('yourElement'); 
    changeThisColor.innerHTML += '<area style="background-color:'+ yourColorVariable +';" 
}

來源

2014-03-12 16:11:12 JayD

我只想讓它成爲那種顏色，不管鼠標在哪裏。 – CPC

你嘗試過內聯嗎？？它不是一個很好的編碼習慣，但是這會改變我在回答中回答的那個顏色 –

。 – CPC

Javascript - 如何更改圖像部分的顏色

回答

相關問題