How to change color of image based on choice of color palette

Question

I have an image that I'm trying to change the color of, I have a <ul> of colors, all displayed in small squares. I want to modify the color of my image based on which box the user clicks.

  <li swatch="3FB8AF"></li>
  <li swatch="7FC7AF"></li>
  <li swatch="DAD8A7"></li>
  <li swatch="FF9E9D"></li>
  <li swatch="FF3D7F"></li>

Ex. If someone clicks, <li swatch="7BE0D0"></li>, the image should change to that color.

What do you mean by *modify the color of my image* ? – Titus Jan 26 '19 at 16:01 — Titus, Jan 26 '19 at 16:01

score 0 · Answer 1 · answered Jan 26 '19 at 16:19

I can't understand what you mean by color if image. Here is example of changing color div

<html>
<head>
</head>
<body>

<ul id="colors">
<li swatch="#3FB8AF"></li>
<li swatch="#7FC7AF"></li>
<li swatch="#DAD8A7"></li>
<li swatch="#FF9E9D"></li>
<li swatch="#FF3D7F"></li>
</ul>
<div style="height:500px;width:500px;font-size:50px" id="mainElm">Elment whose color will change</div>

<script>
var colors = document.querySelectorAll('ul#colors > li');
for(let color of colors){
    color.style.backgroundColor = color.getAttribute("swatch");
    color.style.height = "50px";
    color.style.width = "50px";
    color.onclick = function(){
        document.getElementById('mainElm').style.backgroundColor = color.getAttribute('swatch');
    }
}

</script>
</body>

</html>

score 0 · Answer 2 · answered Jan 26 '19 at 16:42

It's not clear what you mean by modifying the colour of an image. However here's an example that adds background colour to each swatch square, a click listener to their container, and a function that adds color to another element when a swatch square is clicked. It will give you some idea about the steps needed when you come to code this yourself.

1) You should use data attributes in your HTML. data-color="3FB8AF" instead of swatch="3FB8AF" to ensure your HTML is valid.

2) I'm using "event delegation". Instead of adding a listener to each color element you can add one listener to the containing element which captures the events as they bubble up the DOM from its children.

Hope this helps.

// Cache the swatch element (the `ul`), and add
// an event listener to it. This calls `handleClick`
// when it is clicked or any of its child elements are clicked
const swatch = document.querySelector('ul');
swatch.addEventListener('click', handleClick, false);

// Cache the color squares in the swatch, and the "image" element
const colorSquares = document.querySelectorAll('li');
const img = document.querySelector('.image');

// Destructures the dataset from the element that
// was clicked and calls `setColor`, passing in the
// element to which we need to apply the color
function handleClick(e) {
  const { dataset: { color } } = e.target;
  setColor(img, color);
}

// Accepts an element and a color - sets
// the background color of the element.
// Note: because the data-color attribute doesn't
// contain a preceding hash we have to add it here 
function setColor(el, color) {
  el.style.backgroundColor = `#${color}`;  
}

// Iterates over the color squares and set each
// of their background color to the hex color in the
// dataset
[...colorSquares].forEach(colorSquare => {
  const { dataset: { color } } = colorSquare;
  setColor(colorSquare, color);
});

ul { padding-left: 0; display: flex; flex-direction: row; list-style-type: none; }
li { height: 20px; width: 20px; }
li:hover { cursor: pointer; }
.image { text-align: center; border: 1px solid #676767; height: 50px; width: 100px; }

<ul>
  <li data-color="3FB8AF"></li>
  <li data-color="7FC7AF"></li>
  <li data-color="DAD8A7"></li>
  <li data-color="FF9E9D"></li>
  <li data-color="FF3D7F"></li>
</ul>

<div class="image">IMAGE</div>

I apologize for my unclear explanation. I’m still learning web development so this is a process for me. Basically, I have an image with 4 gray trapezoids on it. They aren’t connected, and the rest of the image is transparent, so if I used background-color, the trapezoids would remain gray, and the rest of the image would change colors. However, I want to be able to change the color of my trapezoids based on which color a user clicks, which will be preset under the image. — Bryson Greer, Jan 27 '19 at 17:14

How to change color of image based on choice of color palette

2 Answers2