quarta-feira, 16 de janeiro de 2002

Mudando imagens sem recarregar a página

Simples e objetivo: quer mudar uma imagem sem recarregar a página? Use a função abaixo:


function MudaImagem(novosrc){
  document.images['img1'].src = novosrc;
}



img1 é o valor do atributo name da imagem a ser mudada:



<img src="adriano.jpg" width="434" height="271" name="img1">



Você pode chamar a função através de links:



<a href="javascript: MudaImagem('site.gif')">Mudar para a imagem do site</a>
<a href="javascript: MudaImagem('adriano.jpg')">Mudar para  minha imagem</a>



Pode-se também utilizar o evento OnClick da própria imagem:



<img src="adriano.jpg" width="434" height="271" name="img1" OnClick="MudaImagem('teste.jpg')">



Outra opção interessante seria mudar o tamanho da imagem utilizando as propriedades height e width da imagem, que podem ser passadas como parâmetros de uma nova função:



function MudaImagem2(novosrc, novoheight, novowidth){
  document.images['img1'].src = novosrc;
  document.images['img1'].height = novoheight;
  document.images['img1'].width = novowidth;
}



A chamada da função teria que ser, neste caso, algo do tipo:



<a href="javascript: MudaImagem2('site.gif', 50, 150)">Mudar para a imagem do site</a>
<a href="javascript: MudaImagem2('adriano.jpg', 200, 50)">Mudar para  minha imagem</a>



Esta matéria foi postada originalmente no ASP4Developers por Adriano Nântua, que na época era "Engenheiro de software e analista de sistemas; Desenvolvedor ASP, Delphi, C/C++ e Java/JSP/Servlets; InterBase fan; Linux fan; Alvirrubro inveterado.". Hoje, vai saber...

0 comentários: