如何製作一個網站頁面，就像選擇顏色一樣，項目的顏色也會像選擇的顏色一樣變化？

Question

我其實並不知道這種情況的具體名稱（如果有的話），我的問題是這樣的; 我想在購物網站或官方汽車公司網站上建立一個像網頁一樣的網頁。

例如，你想購買一件T恤，它有顏色選項，當你點擊T恤衫的圖像顏色改變像所選的顏色，或在官方汽車公司網站汽車有一個顏色選項並且您選擇網站顯示汽車顏色的顏色。

我做了這樣的事情，但4種顏色選項，我改變了它的工作，但它有效的Photoshop我的顏色，但我有4個不同的圖像，我需要這樣做像100種不同的顏色。但我無法制作100張不同的圖像，因此有什麼辦法可以解決這個問題？

我希望我能解釋一下自己。

謝謝！

Answer 1

如果我正確地理解了這個問題，你問是否有一種方法來編程圖像的Photoshop圖像。我試過了，我想我有一個解決方案。

首先，你應該把你的形象。然後使用Photoshop或任何其他軟件，使需要改變其顏色的對象變得透明。然後查看下面的代碼並相應地進行調整。

JS：

function blue() { 
    document.getElementById("div").style.backgroundColor = "blue"; 
} 
function red() { 
    document.getElementById("div").style.backgroundColor = "red"; 
} 
function green() { 
    document.getElementById("div").style.backgroundColor = "green"; 
} 

HTML：

<button onclick="blue()">Blue</button> 
<button onclick="red()">Red</button> 
<button onclick="green()">Green</button> 

<div id="div" style="z-index: 1; background-color: blue; width:550; height:718;"> //Insert the width and height of the picture 
<img src="Picture1.png" style="z-index:2;"/> //Picture1 is the picture with the object 
</div> 

當你點擊按鈕 '紅色'，的DIV變爲紅色的背景色和，因爲你所做的對象的背景透明的對象應該顯示爲紅色。

View example on Codepen