Grayscale Images Hover com HTML5 Cross Browser

A um tempo atrás o blog Web Designer Wall fez mais um de seus interessantes posts mostrando como é possível criar imagens em escala cinza com JavaScript, mas especificamente com a utilização de HTML5 (Canvas). Só que como todos sabem, o Internet Explorer não tem suporte a esse tipo de feature, mas você pode contornar isso facilmente com um código prorietário da Microsoft.

Basicamente, o código é o seguinte:

1.element.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)

Com isso basta você fazer uma verificação e se o user agent no momento for o IE, use esse código, caso contrário, use HTML5.

  1. Exemplos
  2. Downloads

Fonte: Pedro Rogério/PinceladasnaWeb

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *