function aplicaFiltro(){ var img = document.getElementById("imgFiltro"); img.className = ""; if( document.getElementById("blur").checked ){ img.className += " blur"; } if( document.getElementById("brightness").checked ){ img.className += " brightness"; } if( document.getElementById("contrast").checked ){ img.className += " contrast"; } if( document.getElementById("drop-shadow").checked ){ img.className += " drop-shadow"; } if( document.getElementById("grayscale").checked ){ img.className += " grayscale"; } if( document.getElementById("sepia").checked ){ img.className += " sepia"; } if( document.getElementById("hue-rotate").checked ){ img.className += " hue-rotate"; } if( document.getElementById("invert").checked ){ img.className += " invert"; } if( document.getElementById("opacity").checked ){ img.className += " opacity"; } }
<center><p> <form> <table style="border: opx;"> <tr> <td> <input id="blur" name="pickFiltro" type="radio" onchange="aplicaFiltro()" value="blur"/>blur() </td> <td> <input id="brightness" name="pickFiltro" type="radio" onchange="aplicaFiltro()" value="brightness"/>brightness() </td> <td> <input id="contrast" name="pickFiltro" type="radio" onchange="aplicaFiltro()" value="contrast"/>contrast() </td> <td> <input id="drop-shadow" name="pickFiltro" type="radio" onchange="aplicaFiltro()" value="drop-shadow"/>drop-shadow() </td> <td> <input id="grayscale" name="pickFiltro" type="radio" onchange="aplicaFiltro()" value="grayscale"/>grayscale() </td> </tr> <tr> <td> <input id="sepia" name="pickFiltro" type="radio" onchange="aplicaFiltro()" value="sepia"/>sepia() </td> <td> <input id="hue-rotate" name="pickFiltro" type="radio" onchange="aplicaFiltro()" value="hue-rotate"/>hue-rotate() </td> <td> <input id="invert" name="pickFiltro" type="radio" onchange="aplicaFiltro()" value="invert"/>invert() </td> <td> <input id="opacity" name="pickFiltro" type="radio" onchange="aplicaFiltro()" value="opacity"/>opacity() </td> </tr> </table> </form> <img id="imgFiltro" src="//modacombiscoitos.files.wordpress.com/2012/09/cultura-pop-coreana_bairro-de-shin-okubo.jpg" alt="imagem para filtro" style=""/> </p></center>
.body{ margin: o; } .blur{ -webkit-filter: blur(5px); filter: blur(5px); } .brightness{ -webkit-filter: brightness(2); filter: brightness(2); } .contrast{ -webkit-filter: contrast(4); filter: contrast(4); } .drop-shadow{ -webkit-filter: drop-shadow(10px 10px 7px rgba(0, 0, 0, .7)); filter: drop-shadow(10px 10px 7px rgba(0, 0, 0, .7)); } .grayscale{ -webkit-filter: grayscale(1); filter: grayscale(1); } .sepia{ -webkit-filter: sepia(1); filter: sepia(1); } .hue-rotate{ -webkit-filter: hue-rotate(90deg); filter: hue-rotate(90deg); } .invert{ -webkit-filter: invert(.3); filter: invert(.3); } .opacity{ -webkit-filter: opacity(.5); filter: opacity(.5); }