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.
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;
}
Olá Edinei, obrigado pela contribuição.
Abraços.
Obrigado, mto bom!! Alterei algumas coisas para adaptar ao exercício da minha faculdade.
Parabéns!