Como rodar imagens com javascript

28 Julho 2010 Escrito por Gonçalo Martins

Neste artigo vou-lhe demonstrar como rodar imagens e qualquer elemento desde div a span com javascript. Embora esta abordagem não seja estritamente rígida na forma como pode ser aplicada, sendo que é possível a sua aplicação unicamente com CSS em todos os browsers modernos (IE6+, Firefox, Opera, Webkit).

Vou utilizar Javascript devido ao IE que ainda não suporta CSS3, e devido ainda ao facto de pretender um exemplo global sem muitas complicações. O leitor pode depois alterar o código ao seu bom gosto.

Embora o IE não suporte rotação de imagens ou elementos de uma pagina web via CSS3 este possui um filtro que pode ser utilizado para praticamente a mesma função (Matrix). O problema de utilizar este filtro [filter:progid:DXImageTransform.Microsoft.Matrix(variaveis a introduzir)] reside na complexidade do calculo das variáveis que se devem introduzir.

Atenção caso pretenda rodar as suas imagens em incrementos de 90º aconselho o uso do seguinte filtro ao invés do anterior:

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
onde rotation pode abrangir os valores 0, 1, 2, 3 respectivamente 0º, 90º, 180º, 270º

Para nos auxiliar com estes cálculos via javascript iremos recorrer ao javascript Sylvester, do qual terá que realizar download. E incluir na sua pagina web:

E ao auxilio do seguinte código:

Agora é só chamar o seguinte código javascript, para rodar a imagem -20 graus:

Se pretende algo mais elaborado poderá utilizar algo do género como código de exemplo (Utiliza Mootools e Assets, presente no Mootools More):

//Executa este código quando toda a página estiver carregada (incluindo imagens). Substituir 'load' por 'domready'
//para executar código antes de as imagens começarem a ser carregadas
window.addEvent('load', function() {

//Realiza o load assincrono do javascript Sylvester (remover a chamada que fiz anteriormente neste artigo do seu código)
var myScript = Asset.javascript('/templates/shtema/js/sylvester.js', {
id: 'rotate',
onload: function(){
//Assim que acaba o load do javascript, percorre todas as classes com o nome 'useravatar' e aplica-lhes a rotação da div
$$('.useravatar').each(function(el){
rodarElemento(el, -20);
});
}
});

Como melhorar a implementação?

Se leu o artigo desde inicio derá ter-se questionado quando eu disse que era possível obter o mesmo efeito unicamente com CSS. A verdade é que as expressões filter: são para ser utilizadas em CSS e o que o javascript anterior faz é simplesmente coloca-las no CSS da página para o elemento que se pretende rodar.

A dificuldade residia no calculo dos valores para a expressão filter: do IE. No entanto este calculo é gerado pelo javascript Sylvester, e com um simples alert ou innerHTML ao valor de 'matrix_str' vai obter algo do género: M11=0.70710678, M12=0.70710678, M21=-0.70710678, M22=0.70710678

que se deverá traduzir na seguinte regra:

Neste momento pode descartar o Javascript.

Para os restantes browsers possui as seguintes expressões CSS que poderá utilizar:

-webkit-transform: rotate(-20deg);
-moz-transform: rotate(-20deg);
-o-transform: rotate(-20deg);

E agora o "piece of resistance" da rotação de imagens e elementos para todos os browsers:

O blog boodesign.com escreve sobre um artigo de rotação de imagens utilizando uma técnica similar (no entanto talvez mais simples) e oferece ainda uma ferramenta para calcular o css necessário de forma a não necessite de utilizar javascript de forma a obter rotação cross-browser.

O problema do CSS e desta nova técnica é que em certos casos peculiares isto lhe provocará uma desformatação da página no IE6 e 7, dai ter introduzido a técnica anterior como ponto fulcral do artigo. Até porque permite alcançar outros efeitos e funcionalidades para a mente imaginativa.... No entanto caso o CSS funcione a 100% para você ou problemas no IE6/7 não forem uma chatice deve optar por utilizar esta ultima técnica que lhe indiquei.



Joao Julho 29, 2010	Gonçalo, muito obrigado pela postagem! Você tem algum tutorial sobre a criação de sidebars com tabs (separadores) ? Obrigado!!


GonçaloM Agosto 07, 2010	Infelizmente ainda não tenho nada do genero criado. Continue a aparecer ;)

Como rodar imagens com javascript

Como melhorar a implementação?

E agora o "piece of resistance" da rotação de imagens e elementos para todos os browsers:

Artigos Relacionados

Nuvem de Tags