JavaScript: Alterando Tamanho de uma Imagem

Aprenda neste post como aumentar e diminuir o tamanho de uma imagem.

Vamos utilizar os eventos onclick e ondblclick da imagem. Estes eventos farão a chamada de 2 funções que receberão como parâmetro o nome da imagem.

<html>
<head>
   <script type="text/javascript">
     function aumentaImagem(nome){
	nome.width = nome.width+50;
	nome.height = nome.height+50;			
     }
     function tamanhoNormal(nome){
	nome.width = 150;
	nome.height = 30;			
     }
   </script>
</head>
<body>
   <img src="http://www.linhadecomando.com/logo-linhadecomando.png" name="logo" 
       width="150" height="30" 
       onclick="aumentaImagem(logo);" 
       ondblclick="tamanhoNormal(logo);"
       style="cursor:pointer" />
</body>
</html>

Como funciona:

Quando ocorrer um clique sobre a imagem, a mesma aumentará. Será acrescido 50 a largura e a altura da imagem.

Quando for dado um clique duplo a imagem retorna ao seu tamanho original.

2 comentários em “JavaScript: Alterando Tamanho de uma Imagem

  • 19 de novembro de 2011 em 15:31
    Permalink

    Alterei algumas coisas !!

    function aumentaImagem(nome){
    if (nome.height = 180){
    return;
    }
    nome.width = nome.width+50;
    nome.height = nome.height+50;
    }

    function tamanhoNormal(nome){
    nome.width = 100;
    nome.height = 100;
    }

    Resposta
    • 20 de novembro de 2011 em 8:21
      Permalink

      Olá Edinei, obrigado pela contribuição.

      Abraços.

      Resposta

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *