1

So I have an <img> tag with a .png source and I need to apply a color change to it. I tried the filter property in CSS but apparently it’s not supported in IE. Any idea if I can do that with JavaScript?

Sebastian Simon
  • 18,263
  • 7
  • 55
  • 75
TheBestAngularDeveloper
  • 189
  • 2
  • 13

1 Answers1

0

Maybe you can achieve this in two way:

  1. by using different png source files, changing them at the occurrence of an event:

    • with pure JavaScript:

      var image = document.getElementById("my_image");

      image.src = "image_1.jpg";

    • with jQuery:

      $("#my_image").attr("src","image1.jpg");

  2. by giving a transparency to your png to show a background-color applied below it:

    • with pure JavaScript:

      var image = document.getElementById("my_image");

      image.style.backgroundColor = "#0000ff"; // or "blue" or "rgba(0, 0, 255, 1.0)"

    • with jQuery:

      $("#my_image").css({ "background-color" : "#0000ff"});

Cheers

Riccardo Volpe
  • 1,471
  • 1
  • 16
  • 30
  • Thanks for the answer but the thing is my .png icon has transparent background so changing the background color will change the entire img background. Trying to find a way to manipulate pixels of certain color. – TheBestAngularDeveloper Sep 06 '18 at 06:45
  • After the other one option (by using different png source files), another that come in my mind is to use ImageMagick on a web server... take a look on this topic: https://stackoverflow.com/questions/23495371/imagemagick-on-web-server Cheers – Riccardo Volpe Sep 06 '18 at 06:55
  • Instead of a transparant background overlay the image with a colored semi transparant element. Even cleaner is to use the :after pseudo element of the image for this purpose – Geert-Jan Sep 06 '18 at 07:49