Converting Color Image to Black and White after clicking a button Using CSS and JS

Question

I have the code below. It works only for one image/page.

Is it possible to make this function of converting an image work for multiple images (each one with it's own button), all of them o the same page, like a gallery?

HTML:

<!DOCTYPE html>  
<html>  
<head>  
  <meta charset="utf-8">  
  <title>CSS3-Converting Color Image to Black and White Image Using Pure CSS3 Techumber</title>  
  <meta name="description" content="CSS3-Converting Color Image to Black and White Image Using Pure CSS3">  
  <meta name="author" content="Aravind Buddha">  
  <link rel="stylesheet" type="text/css" href="style.css"></link>  
</head>  
<body>  
  <div class="container">  
    <header>  
      <h1 class="logo">  
        <a href="http://techumber.com">  
          <img src="../asserts/img/logostd.png" alt="techumber logo" title="techumber logo" />  
        </a>  
      </h1>  
    </header>  
    <section class="contant">  
      <button id="convert">Click here </button>  
      <img id="img" src="1.jpg" alt="techumber.com CSS3 black and white"/>  
    </section>  
  </div>  
  <script type="text/javascript" src="script.js"></script>  
</body>  
</html>

CSS:

* { 
  margin: 0;  
  padding: 0;  
  border:0;  
} 
body {  
  background: #000;  
  font-family: helvetica,"Comic Sans MS",arial,sans-serif;  
} 
.container{ 
  width: 700px;  
  margin: 0 auto;  
} 
.logo{ 
  text-align: center;  
} 
.contant{ 
  margin: 0 auto;  
  width: 300px;  
} 
button{  
  width: 215px;  
  height: 50px;  
  margin: 0 0 10px 35px;  
  font-size: 20px;  
  font-weight: bolder;  
  cursor: pointer;  
} 
.bwImg{ 
  -webkit-filter: grayscale(100%); 
  -moz-filter: grayscale(100%); 
  -ms-filter: grayscale(100%); 
  -o-filter: grayscale(100%); 
  filter: grayscale(100%);  
}

JS:

window.onload = function () {  
  //get elements 
  var f = 1,img = document.getElementById('img'),  
  cvrt = document.getElementById('convert');  
  //button click event 
  cvrt.onclick = function () {  
    if (f) {  
      img.className = "bwImg";  
      f = 0;  
      cvrt.innerHTML = "Convert to Color";  
    } else {  
      img.className = "";  
      f = 1;  
      cvrt.innerHTML = "Convert to B/W";  
    } 
  }; 
}

I don't know JavaScript very well, so be as explicit as possible.

Possible duplicate of [Convert an image to grayscale in HTML/CSS](https://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in-html-css) — Farhad Bagherlo, Sep 19 '17 at 17:35

score 1 · Accepted Answer · answered Sep 19 '17 at 17:42

1

Use filter:grayscale(100%) to get it.

$(document).ready(function() {
  $('#convert').click(function() {
    $('#img').css('filter', 'grayscale(100%)');
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="convert">Click here </button><br>
<img id="img" src="http://lorempixel.com/400/200/" alt="techumber.com CSS3 black and white" />

answered Sep 19 '17 at 17:42

LKG

4,152
1
11
21

thanks, it workes better than anything 've tried so far, bu it is incomplete. I have multiple images with multiple buttons on the same page; using the script u gave me means that i need to multiply it and change every single id for each image i have. I need an unique script (for easy handling purpose and faster page load) that affects all the images but not all at the same time after pressing one button, one after pressing the button that meets the image. I don t know if it is possible or not but thank u very much anyways:) – Bogdan TB Sep 19 '17 at 18:57

Converting Color Image to Black and White after clicking a button Using CSS and JS

1 Answers1