em
grayscale

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:

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.

Comentários

  1. Muito legal!

    por Trambulhao — Responder
  2. gosteii do post, era o que eu tava procurando :)

    por RianDeodato — Responder
  3. Pingback: Grayscale Images Hover com HTML5 Cross Browser | SWX Softwares - Desenvolvimento e Design Web

  4. Mobile phone information…

    por Kandice Lagos Responder
  5. O exemplo do download nao funcionou na minha máquina.
    Estou usando o Firefox 8.0.

    Valeu !

    por Joao — Responder
    1. Opa … Pedro .Desculpe. Nada de errado com seu código; achei isso sobre o assunto :
      “Eu encontrei uma solução – o problema era que eu estava tentando ler arquivos locais (isto é, no meu computador), que não têm um nome de domínio associado com eles (aparentemente ip local não conta neste caso). Para proteger a segurança dos interesses das pessoas com conteúdo on-line, o W3C + navegadores fizeram isso para que getImageData () não trabalha com arquivos armazenados fora do servidor que está em casa para o javascript.

      Infelizmente, trata arquivos locais como domainless, e assim as restrições de segurança aplicam-se, aparentemente. Estou procurando por maneiras de superar este problema (olhando para AppCache e websql em HTML5 no momento, pode ou não pode dar fruto). Eu preferiria para o usuário do meu aplicativo web para não ter que carregar o material que está trabalhando com (para que eles possam trabalhar offline, e por razões de segurança). Todas as sugestões bem-vindos! ”

      Valeu !

      por Joao — Responder

Deixe uma resposta

O seu endereço de email não será publicado Campos obrigatórios são marcados *

Você pode usar estas tags e atributos de HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>