버튼을 클릭 한 후 컬러 이미지를 흑백으로 변환합니다. CSS와 JS를 사용합니다.

다음 코드가 있습니다. 하나의 이미지/페이지에서만 작동합니다.버튼을 클릭 한 후 컬러 이미지를 흑백으로 변환합니다. CSS와 JS를 사용합니다.

이 이미지를 여러 이미지 (각 이미지는 자체 버튼이있는 이미지)로 변환하는 기능을 만들 수 있습니까?이 모든 기능은 갤러리처럼 같은 페이지에 있습니까?

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

그래서 가능한 한 명시, 아주 잘 자바 스크립트를 알지 못한다.

출처

2017-09-19 Bogdan TB

가능한 복제 [이미지를 변환 HTML로 그레이 스케일/CSS] (https://stackoverflow.com/questions/609273/convert-an-image-to-grayscale-in -html-css) –

filter:grayscale(100%)을 사용하십시오. 의

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

감사합니다. 지금까지 시도한 것보다 더 잘 작동합니다. 불완전합니다. 같은 페이지에 여러 개의 버튼이있는 이미지가 여러 개 있습니다. 스크립트를 사용하여 u는 내가 그걸 곱셈하고 각 이미지마다 하나의 ID를 바꿀 필요가 있다는 것을 의미합니다. 모든 이미지에 영향을 미치는 하나의 버튼 (이미지를 만나는 버튼을 누른 후 하나의 버튼을 누른 후 동시에) 모두에 영향을 미치지 않는 고유 한 스크립트 (처리하기 쉽고 빠른 페이지로드 용)가 필요합니다. 나는 그것이 가능하거나 아니지만 어쨌든 감사드립니다. –

버튼을 클릭 한 후 컬러 이미지를 흑백으로 변환합니다. CSS와 JS를 사용합니다.

답변

관련 문제