Últimos Artigos
Inversor de Links Transforme seu computador em um ponto de acesso WIFI Deep web a internet que você não vê Como tirar a segunda via do CPF online Como fazer botões em HTML Como recuperar arquivos de um computador que não inicia Os anônimos dominaram o mundo e agora?

WINDOWS

BESTEIROL

HUMOR

SOFTWARES

VARIEDADES

CÓDIGO PARA APLICAR ZOOM EM IMAGENS



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:



Zoom

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.