Rollovers

Atualizado em 3.9.2009

■ Rollovers são botões que "reagem" quando o mouse passa sobre eles, mostrando outra imagem ou texto em outra cor. A mudança de layout sinaliza ao usuário que o botão realiza uma ação ao ser selecionado.

Veja no exemplo abaixo:

 

O tamanho da imagem acima, em formato Gif, é de 1Kb
Para avaliar o tamanho destes botões na página, é necessário multiplicar 1 Kb por 2 - duas imagens - e pelo número de botões utilizados

■ O efeito do rollover deve ser rápido e ter resposta imediata, para que o usuário entenda que é um elemento "ativo", que responde diretamente à sua ação

A reação sinaliza que o gráfico pode ser ativado, como botão

■ Para um efeito de superposição perfeito, as duas imagens devem ter exatamente o mesmo tamanho

■ O efeito pode ser criado com CSS (para textos), Javascript, Java, Shockwave ou Flash

Rollover em botão feito no Flash (2Kb)

■ A tecnologia varia de acordo com o layout ou a funcionalidade do botão (uso de pug-in? uso de script? uso de imagem?)