Este é um código bem simples, ele aplica zoom automaticamente a uma imagem usando o atributo onmouseover, exelente para usar em tutoriais. A imagem é aumentada automaticamente ao se passar o mouse. Veja o exemplo abaixo:
Note que ao passar o mouse na imagem, é aplicado zoom automaticamente, um efeito bem interessante.
Existem outros códigos para este efeito, mais este é o mais leve, e pode ser aplicado em blogs e sites. Veja o código abaixo:
<script language="javascript">
<!--
function expand(obj){
obj.height=obj.height*2.4;
obj.width=obj.width*2.4;
}function shorten(obj){
obj.height=obj.height/2.4;
obj.width=obj.width/2.4;
}
//-->
</script><center>
<img src="Url da imagem aqui" width='100' height='100' alt="Nome da imagem" onMouseOver="expand(this)" onMouseOut="shorten(this)">
</center>
A parte do código em azul, determina quantas vezes a imagem será ampliada, no exemplo acima o valor é 2.4 troque este valor de acordo com o zoom que você quer aplicar.
A parte do código em roxo, se refere ao posicionamento da imagem, no exemplo acima está para alinhar no centro. Você pode trocar para left ou right esquerda, direita.
A parte do código em vermelho, é onde você deve colocar o url da imagem que irá usar, e as dimensões da imagem sem o zoom.
No exemplo acima está 100 de altura, e 100 de largura, você também pode alterar este valor.
A última parte, é o nome da imagem ao se parar o mouse sobre ela, coloque o nome que desejar.
0 Comentários