Grayscale Images Hover com HTML5 Cross Browser
Postado por: Pedro Rogério em
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.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o Pinceladas da Web também escreve para o CSS no Lanche, blog voltado ao desenvolvimento front-end.
Muito legal!
gosteii do post, era o que eu tava procurando :)
[...] Fonte: Pedro Rogério/PinceladasnaWeb [...]
Mobile phone information…
O exemplo do download nao funcionou na minha máquina.
Estou usando o Firefox 8.0.
Valeu !
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 !