Modify the color of a designated section of an image with a click of the mouse

Question

Modify the color of a designated section of an image with a click of the mouse

As a novice following a tutorial, I am learning how to modify the color of a specific area within an image using various color options.

I can successfully change one area, but I am struggling with implementing changes for other areas.

My goal is to click on the desired region, have its border highlighted via CSS, and then alter the color using the available options.

What would be the most effective approach to achieve this? Would it be appropriate to utilize a switch statement along with onclick to select the particular image area?

const overlay = document.getElementById("product-a");
var el = document.getElementsByClassName("color");
for (var i = 0; i < el.length; i++) {
  el[i].onclick = changeColor;
}

function changeColor(e) {
  let hex = e.target.getAttribute("data-hex");
  overlay.style.fill = hex;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}
#container {
  height: 200px;
  width: 200px;

}

#product-svg {
  position: relative;
  z-index: 2;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  mix-blend-mode: multiply;
}

path {
  fill: #CCCCCC;
}


#background-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 200px;
  height: auto;
  z-index: 1;
}

.colors {
  display: flex;
  position: fixed;
  bottom: 2em;
  right: 2em;
  z-index: 3;
}

.color {
  height: 36px;
  width: 36px;
  margin-left: 0.5em;
  border-radius: 18px;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
  border: 2px solid #aaa;
  cursor: pointer;
}

<div id="container">

    <svg id="product-svg" viewBox="0 0 744 1074">
      <path id="product-a" d="M51 207.5L51 348L686 348L686 67L51 67L51 207.5Z" />
      <path id="product-b" d="M51 544.5L51 685L686 685L686 404L51 404L51 544.5Z" />
      <path id="product-c" d="M51 883.5L51 1024L686 1024L686 743L51 743L51 883.5Z" />
    </svg>
    <img id="background-image" src="boxes.jpg" alt="">
  </div>

  <div class="colors">
    <div class="color" style="background-color: #ff0000" data-hex="#ff0000"></div>
    <div class="color" style="background-color: #ffff33" data-hex="#ffff33"></div>
    <div class="color" style="background-color: #3399ff" data-hex="#3399ff"></div>
  </div>

javascript html css

Answer 1

Answer №1

Consider updating the overlay variable to be triggered by the onclick event of the product box instead of directly assigning it to #product-a.

let overlay;
document.querySelectorAll('#product-a, #product-b, #product-c').forEach(function(item) {
  item.onclick = selectProduct;
})

function selectProduct(e) {
  if (overlay) overlay.classList.remove('highlight')
  overlay = e.target
  overlay.classList.add('highlight')
}

var colors = document.getElementsByClassName("color");
for (var i = 0; i < colors.length; i++) {
  colors[i].onclick = changeColor;
}

function changeColor(e) {
  let hexValue = e.target.getAttribute("data-hex");
  if (overlay) overlay.style.fill = hexValue;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#container {
  height: 200px;
  width: 200px;
}

#product-svg {
  position: relative;
  z-index: 2;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  mix-blend-mode: multiply;
}

path {
  fill: #CCCCCC;
}

#background-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 200px;
  height: auto;
  z-index: 1;
}

.colors {
  display: flex;
  position: fixed;
  bottom: 2em;
  right: 2em;
  z-index: 3;
}

.color {
  height: 36px;
  width: 36px;
  margin-left: 0.5em;
  border-radius: 18px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  border: 2px solid #aaa;
  cursor: pointer;
}

.highlight {
  stroke-width: 10px;
  stroke: #000;
}

<div id="container">

  <svg id="product-svg" viewBox="0 0 744 1074">
      <path id="product-a" d="M51 207.5L51 348L686 348L686 67L51 67L51 207.5Z" />
      <path id="product-b" d="M51 544.5L51 685L686 685L686 404L51 404L51 544.5Z" />
      <path id="product-c" d="M51 883.5L51 1024L686 1024L686 743L51 743L51 883.5Z" />
    </svg>
  <img id="background-image" src="boxes.jpg" alt="">
</div>

<div class="colors">
  <div class="color" style="background-color: #ff0000" data-hex="#ff0000"></div>
  <div class="color" style="background-color: #ffff33" data-hex="#ffff33"></div>
  <div class="color" style="background-color: #3399ff" data-hex="#3399ff"></div>
</div>

Answer 2

Consider updating the overlay variable to be triggered by the onclick event of the product box instead of directly assigning it to #product-a.

let overlay;
document.querySelectorAll('#product-a, #product-b, #product-c').forEach(function(item) {
  item.onclick = selectProduct;
})

function selectProduct(e) {
  if (overlay) overlay.classList.remove('highlight')
  overlay = e.target
  overlay.classList.add('highlight')
}

var colors = document.getElementsByClassName("color");
for (var i = 0; i < colors.length; i++) {
  colors[i].onclick = changeColor;
}

function changeColor(e) {
  let hexValue = e.target.getAttribute("data-hex");
  if (overlay) overlay.style.fill = hexValue;
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#container {
  height: 200px;
  width: 200px;
}

#product-svg {
  position: relative;
  z-index: 2;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  mix-blend-mode: multiply;
}

path {
  fill: #CCCCCC;
}

#background-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 200px;
  height: auto;
  z-index: 1;
}

.colors {
  display: flex;
  position: fixed;
  bottom: 2em;
  right: 2em;
  z-index: 3;
}

.color {
  height: 36px;
  width: 36px;
  margin-left: 0.5em;
  border-radius: 18px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  border: 2px solid #aaa;
  cursor: pointer;
}

.highlight {
  stroke-width: 10px;
  stroke: #000;
}

<div id="container">

  <svg id="product-svg" viewBox="0 0 744 1074">
      <path id="product-a" d="M51 207.5L51 348L686 348L686 67L51 67L51 207.5Z" />
      <path id="product-b" d="M51 544.5L51 685L686 685L686 404L51 404L51 544.5Z" />
      <path id="product-c" d="M51 883.5L51 1024L686 1024L686 743L51 743L51 883.5Z" />
    </svg>
  <img id="background-image" src="boxes.jpg" alt="">
</div>

<div class="colors">
  <div class="color" style="background-color: #ff0000" data-hex="#ff0000"></div>
  <div class="color" style="background-color: #ffff33" data-hex="#ffff33"></div>
  <div class="color" style="background-color: #3399ff" data-hex="#3399ff"></div>
</div>

Answer 3

Answer №2

One approach to consider is implementing a "select" feature that triggers upon clicking on specific sections. The feature could then visually distinguish the selected area by changing its border color, while also storing the area's identification in a variable.

Subsequently, another function can be set up to execute upon selecting a color swatch. This function would retrieve the stored area ID and target the corresponding HTML element accordingly.

Answer 4

One approach to consider is implementing a "select" feature that triggers upon clicking on specific sections. The feature could then visually distinguish the selected area by changing its border color, while also storing the area's identification in a variable.

Subsequently, another function can be set up to execute upon selecting a color swatch. This function would retrieve the stored area ID and target the corresponding HTML element accordingly.

Answer 5

Answer №3

It's a good idea to use a specific class to designate the selected item and then update that class upon clicking.

const elements = document.querySelectorAll(".color");
elements.forEach((el) => {
  el.addEventListener("click", changeColor);
});

function changeColor(e) {
  let hex = e.target.getAttribute("data-hex");
  document.querySelector('.product.selected').style.fill = hex;
}

document.querySelectorAll('.product').forEach((el) => {
  el.addEventListener('click', (e) => {
    document.querySelectorAll('.product').forEach((el) => {
      el.classList.remove('selected')
    });
    e.currentTarget.classList.add('selected');
  });
});

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#container {
  height: 200px;
  width: 200px;
}

#product-svg {
  position: relative;
  z-index: 2;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  mix-blend-mode: multiply;
}

path {
  fill: #CCCCCC;
}

#background-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 200px;
  height: auto;
  z-index: 1;
}

.colors {
  display: flex;
  position: fixed;
  bottom: 2em;
  right: 2em;
  z-index: 3;
}

.color {
  height: 36px;
  width: 36px;
  margin-left: 0.5em;
  border-radius: 18px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  border: 2px solid #aaa;
  cursor: pointer;
}

<div id="container">

  <svg id="product-svg" viewBox="0 0 744 1074">
      <path class="product selected" id="product-a" d="M51 207.5L51 348L686 348L686 67L51 67L51 207.5Z" />
      <path class="product" id="product-b" d="M51 544.5L51 685L686 685L686 404L51 404L51 544.5Z" />
      <path class="product" id="product-c" d="M51 883.5L51 1024L686 1024L686 743L51 743L51 883.5Z" />
    </svg>
  <img id="background-image" src="boxes.jpg" alt="">
</div>

<div class="colors">
  <div class="color" style="background-color: #ff0000" data-hex="#ff0000"></div>
  <div class="color" style="background-color: #ffff33" data-hex="#ffff33"></div>
  <div class="color" style="background-color: #3399ff" data-hex="#3399ff"></div>
</div>

Answer 6

It's a good idea to use a specific class to designate the selected item and then update that class upon clicking.

const elements = document.querySelectorAll(".color");
elements.forEach((el) => {
  el.addEventListener("click", changeColor);
});

function changeColor(e) {
  let hex = e.target.getAttribute("data-hex");
  document.querySelector('.product.selected').style.fill = hex;
}

document.querySelectorAll('.product').forEach((el) => {
  el.addEventListener('click', (e) => {
    document.querySelectorAll('.product').forEach((el) => {
      el.classList.remove('selected')
    });
    e.currentTarget.classList.add('selected');
  });
});

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#container {
  height: 200px;
  width: 200px;
}

#product-svg {
  position: relative;
  z-index: 2;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  mix-blend-mode: multiply;
}

path {
  fill: #CCCCCC;
}

#background-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 200px;
  height: auto;
  z-index: 1;
}

.colors {
  display: flex;
  position: fixed;
  bottom: 2em;
  right: 2em;
  z-index: 3;
}

.color {
  height: 36px;
  width: 36px;
  margin-left: 0.5em;
  border-radius: 18px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  border: 2px solid #aaa;
  cursor: pointer;
}

<div id="container">

  <svg id="product-svg" viewBox="0 0 744 1074">
      <path class="product selected" id="product-a" d="M51 207.5L51 348L686 348L686 67L51 67L51 207.5Z" />
      <path class="product" id="product-b" d="M51 544.5L51 685L686 685L686 404L51 404L51 544.5Z" />
      <path class="product" id="product-c" d="M51 883.5L51 1024L686 1024L686 743L51 743L51 883.5Z" />
    </svg>
  <img id="background-image" src="boxes.jpg" alt="">
</div>

<div class="colors">
  <div class="color" style="background-color: #ff0000" data-hex="#ff0000"></div>
  <div class="color" style="background-color: #ffff33" data-hex="#ffff33"></div>
  <div class="color" style="background-color: #3399ff" data-hex="#3399ff"></div>
</div>

Answer 7

Answer №4

Utilizing the querySelectorAll function allows you to target all instances of <path> elements. You can then loop through these elements to attach an onclick event that adds a temporary class to the clicked overlay and changes its fill color.

const overlays = document.querySelectorAll("#product-svg path"); //Select all paths
var el = document.getElementsByClassName("color");
for (var i = 0; i < el.length; i++) {
  el[i].onclick = changeColor;
}

overlays.forEach(overlay => { //Iterate over all overlays
  overlay.onclick = () => {
    let id = this.id; // Get the id of clicked overlay
    overlays.forEach(overlay => {
      if (overlay.id != id) {
        overlay.classList.remove("active") //Remove the active class from other overlays
      }
    });
    overlay.classList.add("active") //Add active class to clicked overlay
  };
})

function changeColor(e) {
  let hex = e.target.getAttribute("data-hex");
  document.querySelector(".active").style.fill = hex; //Change the fill color for element with active class
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#container {
  height: 200px;
  width: 200px;
}

#product-svg {
  position: relative;
  z-index: 2;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  mix-blend-mode: multiply;
}

path {
  fill: #CCCCCC;
}

#background-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 200px;
  height: auto;
  z-index: 1;
}

.colors {
  display: flex;
  position: fixed;
  bottom: 2em;
  right: 2em;
  z-index: 3;
}

.color {
  height: 36px;
  width: 36px;
  margin-left: 0.5em;
  border-radius: 18px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  border: 2px solid #aaa;
  cursor: pointer;
}

<div id="container">

  <svg id="product-svg" viewBox="0 0 744 1074">
      <path class="active" id="product-a" d="M51 207.5L51 348L686 348L686 67L51 67L51 207.5Z" />
      <path id="product-b" d="M51 544.5L51 685L686 685L686 404L51 404L51 544.5Z" />
      <path id="product-c" d="M51 883.5L51 1024L686 1024L686 743L51 743L51 883.5Z" />
    </svg>
  <img id="background-image" src="boxes.jpg" alt="">
</div>

<div class="colors">
  <div class="color" style="background-color: #ff0000" data-hex="#ff0000"></div>
  <div class="color" style="background-color: #ffff33" data-hex="#ffff33"></div>
  <div class="color" style="background-color: #3399ff" data-hex="#3399ff"></div>
</div>

Answer 8

Utilizing the querySelectorAll function allows you to target all instances of <path> elements. You can then loop through these elements to attach an onclick event that adds a temporary class to the clicked overlay and changes its fill color.

const overlays = document.querySelectorAll("#product-svg path"); //Select all paths
var el = document.getElementsByClassName("color");
for (var i = 0; i < el.length; i++) {
  el[i].onclick = changeColor;
}

overlays.forEach(overlay => { //Iterate over all overlays
  overlay.onclick = () => {
    let id = this.id; // Get the id of clicked overlay
    overlays.forEach(overlay => {
      if (overlay.id != id) {
        overlay.classList.remove("active") //Remove the active class from other overlays
      }
    });
    overlay.classList.add("active") //Add active class to clicked overlay
  };
})

function changeColor(e) {
  let hex = e.target.getAttribute("data-hex");
  document.querySelector(".active").style.fill = hex; //Change the fill color for element with active class
}

body,
html {
  margin: 0;
  padding: 0;
  height: 100%;
  width: 100%;
}

#container {
  height: 200px;
  width: 200px;
}

#product-svg {
  position: relative;
  z-index: 2;
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: 50%;
  mix-blend-mode: multiply;
}

path {
  fill: #CCCCCC;
}

#background-image {
  position: absolute;
  top: 0;
  left: 0;
  height: 200px;
  width: 200px;
  height: auto;
  z-index: 1;
}

.colors {
  display: flex;
  position: fixed;
  bottom: 2em;
  right: 2em;
  z-index: 3;
}

.color {
  height: 36px;
  width: 36px;
  margin-left: 0.5em;
  border-radius: 18px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
  border: 2px solid #aaa;
  cursor: pointer;
}

<div id="container">

  <svg id="product-svg" viewBox="0 0 744 1074">
      <path class="active" id="product-a" d="M51 207.5L51 348L686 348L686 67L51 67L51 207.5Z" />
      <path id="product-b" d="M51 544.5L51 685L686 685L686 404L51 404L51 544.5Z" />
      <path id="product-c" d="M51 883.5L51 1024L686 1024L686 743L51 743L51 883.5Z" />
    </svg>
  <img id="background-image" src="boxes.jpg" alt="">
</div>

<div class="colors">
  <div class="color" style="background-color: #ff0000" data-hex="#ff0000"></div>
  <div class="color" style="background-color: #ffff33" data-hex="#ffff33"></div>
  <div class="color" style="background-color: #3399ff" data-hex="#3399ff"></div>
</div>

Modify the color of a designated section of an image with a click of the mouse

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Unveiling the search bar as it expands horizontally from the center, causing the submit button to slide to adjust

A new module is unable to load Angular Material

What is the best method to extract and manipulate data from a JSON file in an AngularJS application?

Should data be sent via ajax to the server before reloading the page to view the results, or is it more efficient to update the DOM using JavaScript?

Eliminate styling that is specific to certain browsers

What is the process for creating a server-side API call?

What is the best way to trigger the onclick event before onblur event?

Utilizing Ajax to redirect users

Map checkboxes aren't updating after an array update following a refactor to react hooks

Is it possible for Express in Node.js to handle multiple static folders at once?

Creating Styles in Material-UI using makeStyles: Tips for Styling by Element Name

Guide to appending the chosen item from a search bar to a fresh array using vue3 js

How to perfectly align responsive email on iPhone 6

When the ENTER button is pressed in the BUTTON, the keyup event is triggered in the

The D3js visualization is failing to display properly for the user, with the D3 source code residing on the server

Are Stacked DIVs with Variable Height Top DIV Compatible with CSS?

Stopping a setInterval countdown timer in a React component

What is the process for binding attributes using v-bind with a one-time binding?

The best way to dynamically render HTML based on screen size using server-side rendering in Vue/Nuxt

A dialog box resembling a tooltip