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 — Farhad Bagherlo
– Farhad Bagherlo, Commented Sep 19, 2017 at 17:35

LKG · Accepted Answer · 2017-09-19 17:42:47Z

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, 2017 at 17:42

LKG

4,2021 gold badge13 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Bogdan TB Over a year ago

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:)

Collectives™ on Stack Overflow

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

1 Answer 1

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Linked

Related