Comment puis-je faire une page de site Web comme vous sélectionnez la couleur et la couleur de l'élément a changé comme la couleur sélectionnée?

Question

Je ne connaissais pas le nom spécifique de cette situation (si c'est le cas), mon problème est le suivant: Je veux construire une page web comme des pages sur les sites d'achats ou sur le site officiel de l'entreprise automobile. Par exemple, vous voulez acheter un t-shirt et il a des options de couleur lorsque vous cliquez sur les couleurs de l'image du t-shirt change comme la couleur sélectionnée ou dans le site officiel de l'entreprise automobile les voitures ont des options de couleur et vous sélectionnez la couleur que le site Web affiche la couleur d'une voiture.

J'ai fait quelque chose comme ça mais 4 options de couleurs et j'ai changé les couleurs sur elle photoshop ça marche mais j'ai 4 images différentes et j'ai besoin de faire comme 100 couleurs différentes. Mais je ne peux pas faire 100 images différentes pour cela est-il possible de gérer ce problème?

J'espère, je pourrais m'expliquer.

Merci!

Answer 1

Si je comprends bien la question, vous demandez s'il existe un moyen de Photoshop par image une image. J'ai essayé cela et je pense avoir une solution.

D'abord vous devriez prendre votre image. Puis, à l'aide de photoshop ou de tout autre logiciel, faites en sorte que l'objet dont la couleur est modifiée soit transparent. Puis regardez le code ci-dessous et adaptez-vous en conséquence.

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> 

Lorsque vous cliquez sur le bouton 'rouge', la couleur de fond des changements div au rouge et parce que vous avez fait l'arrière-plan de l'objet transparent, la l'objet devrait apparaître en rouge.

View example on Codepen