ボタンをクリックした後にカラー画像を白黒に変換する

私は以下のコードを持っています。これは1つのイメージ/ページに対してのみ機能します。ボタンをクリックした後にカラー画像を白黒に変換する

複数の画像（それぞれが独自のボタンで表示されます）の画像を、ギャラリーのように同じページに変換する機能を作成することはできますか？

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"; 
    } 
    }; 
}

私は非常によくJavaScriptを知っているので、可能な限り明確なことはありません。

出典

2017-09-19 Bogdan TB

[HTML/CSSにグレースケール画像を変換]（https://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-inの可能性のある重複-html-css） –

を使用してください。

$(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" />

出典

2017-09-19 17:42:47 LKG

ありがとうございます、これまでのところ何の試みよりもうまくいく、不完全です。同じページに複数のボタンがある複数の画像があります。私が与えたスクリプトを使って私は私がそれを増やし、私が持っているそれぞれのイメージのすべての単一のidを変える必要があることを意味します。私は、すべての画像に影響を与えるが、画像に合ったボタンを押した後に1つのボタンを押した後ではなく、すべて同時に行うことのできないユニークなスクリプト（取り扱いの容易さと速いページロード）が必要です。それが可能かどうかわからないけど、とにかく大変感謝しています:) –

ボタンをクリックした後にカラー画像を白黒に変換する

答えて

関連する問題