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...