更改圖像邊框顏色onclick

-1

我有一個頁面，用戶需要爲t恤選擇一種顏色。更改圖像邊框顏色onclick

當用戶選擇一種顏色時，我希望圖像的邊框顏色變成綠色。

如果用戶點擊不同的顏色，它需要放回默認邊框顏色並更改被點擊的新圖像的邊框顏色。

Here正是我想要做的。

任何想法我可以做到這一點？

來源

2012-10-11 anarchOi

它似乎已經在工作。有什麼問題？ – legendofawesomeness

它的確在您的網站上工作，您鏈接。 – dan

我鏈接到的網站只是我想要做的一個例子。 – anarchOi

說你的圖像是使用img標籤顯示如下：

<img name="img01" id="img01" src="image.gif" border="2" bordercolor="#000000">

實現的onClick fnction fnChangeBorder如下

function fnChangeBorder(){ 
     document.getElementById("img01").style.borderColor="#00FF00"; 
    }

或

function fnChangeBorder(){ 
     var imgElement = document.getElementById("img01"); 
     imgElement.setAttribute("style:borderColor", "#00FF00"); 
    }

，或者你可以定義的樣式類並且喜歡：

function fnChangeBorder(){ 
     document.getElementById("img01").style.className="greenClass"; 
    }

編輯：

對於多張圖片，用索引ID，我們可以通過在onclick功能指標：

<img name="img1" id="img1" src="image.gif" border="2" bordercolor="#000000" 
     onclick="javascript:fnChangeBorder(1);"> 

    <img name="img2" id="img2" src="image.gif" border="2" bordercolor="#000000" 
     onclick="javascript:fnChangeBorder(2);">

而且更新fnChangeBorder爲：

function fnChangeBorder(index){ 
     document.getElementById("img"+index).style.className="greenClass"; 
    }

對於多張圖片，使用非索引編號，我們可以在onclick函數中傳遞id，如下所示：

<img name="imgabc" id="imgabc" src="image.gif" border="2" bordercolor="#000000" 
     onclick="javascript:fnChangeBorder('imgabc`);"> 

    <img name="imgxyz" id="imgxyz" src="image.gif" border="2" bordercolor="#000000" 
     onclick="javascript:fnChangeBorder('imgxyz');">

而且更新fnChangeBorder爲：

function fnChangeBorder(imageId){ 
     document.getElementById(imageId).style.className="greenClass"; 
    }

來源

2012-10-11 05:20:56

感謝您的回覆。但是，因爲我有一打圖像，我需要每個圖像都有這樣的功能嗎？就像我說的，如果用戶點擊另一個圖像，它需要將所有圖像設置爲默認邊框顏色，併爲此設置綠色邊框顏色.. – anarchOi

不是。我之前並沒有明白你有多少張圖片。我希望您一次嘗試更新一個。有更多的方法。我正在用前兩種方法來更新答案。請讓我知道，如果這沒有幫助。 –

創建你的風格一類。例如，

.selected{ 
    border : 1px solid green; 
}

然後在點擊該項目時應用className。避免使用setAttribute設置項目的類名稱。它有一些問題。然後點擊圖像刪除所有項目上選定的類名，然後將選擇的類名應用於目標圖像。

來源

2012-10-11 05:35:15 Exception

更改圖像邊框顏色onclick

回答

相關問題