1

i have this code and it does not work Chrome 22.0.1229.94 m.

<div id='botonera'>
    <button id='restaurar'>Restaurar</button>
    <button id='blur'>Blur</button>
    <button id='greyscale'>Greyscale</button>
    <button id='sepia'>Sepia</button>
</div>

<script type="text/javascript">
    var imagen = document.getElementById('imagen');

    document.getElementById('restaurar').onclick = function() {
        imagen.className = 'restaurar';
    }
    document.getElementById('blur').onclick = function() {
        imagen.className = 'blur';
    }
    document.getElementById('greyscale').onclick = function() {
        imagen.className = 'greyscale';
    }
    document.getElementById('sepia').onclick = function() {
        imagen.className = 'sepia';
    }
</script>

Only greyscale doesn't work, blur, sepia an "restore" work just fine. Thanks!

Matias Elorriaga
  • 8,880
  • 5
  • 40
  • 58

1 Answers1

2

You might be spelling grayscale as greyscale in your CSS. Both spellings are correct, but only the first one will work.

.greyscale {  
   -webkit-filter: grayscale(100%);
}
Blender
  • 289,723
  • 53
  • 439
  • 496