Moloco Moloco - 2 months ago 6
CSS Question

How can i apply a css modification with a button

I would like to apply a filter to an image (when im clicking a button)
and if i click another button it applyes another filter.

How can i do that?

Thanks for your help.

I've tryed using the :active function on css but that just applyes to the button
I've tryed using javascript but it didn't work

function FilterGrey() {
var FilterGrey = Document.getElementsById("FilterGrey");
document.body.video.filter = "grayscale(100%)"
}

Answer

Here is an example done by toggling classes with JavaScript.

http://codepen.io/anon/pen/mAAPrz

HTML

<img src="http://mikeruiz.org/files/bliss-caf-newest.jpg" id="image">
<button onclick="filter1();">Filter 1</button>
<button onclick=“filter2();">Filter 2</button>

CSS

.filter1 {
  filter: blur(10px);
}
.filter2 {
  filter: grayscale(50%);
}

JavaScript

function filter1() {
  document.getElementById('image').classList.toggle('filter1');
}
function filter2() {
  document.getElementById('image').classList.toggle('filter2');
}
Comments