CODEWITHSUNDEEP
javascripthtmlcsscolorsgrayscale
Stronger FX
Stronger FX

Reputation: 3

Grayscale in CSS + Javascript

Can someone help me, I was creating my site in html and wanted to make the images initially be in the "grayscale" color scheme and when clicking were colored, I used (filter: grayscale(1);) in css and I would like to know how do I click the image back to color.

Upvotes: 0

Views: 1709

Answers (2)

Allart
Allart

Reputation: 928

Based on @Sina Kadkhodaei its answer, I would do the onclick this way. More readable imo.

function removeClass(element) {
    element.classList.remove("filter");
}

.filter {
    filter: grayscale(1);
}

<img class="filter" onclick="removeClass(this)" src="https://downloadly.ir/wp-content/uploads/2019/08/Acronis-True-Image.png">

Upvotes: 3

Sina Kadkhodaei
Sina Kadkhodaei

Reputation: 510

If you want colorize when mouse pressed, use :active in css:

#sample{
  filter: grayscale(1);
}

#sample:active{
  filter: grayscale(0);
}
<img id="sample" src="https://downloadly.ir/wp-content/uploads/2019/08/Acronis-True-Image.png">

Or

If you want colorize when mouse clicked use onclick and style.filter in JS:

let imgs=document.getElementsByTagName('img');
for(let i=0;i<imgs.length;i++)
imgs[i].onclick=function(){this.style.filter="grayscale(0)";};
#sample{
filter: grayscale(1);
}
<img id="sample" src="https://downloadly.ir/wp-content/uploads/2019/08/Acronis-True-Image.png">

Upvotes: 0

Related Questions