Alterar Imagem em tempo real com Javascript

Altere imagens em tempo de execução apenas com Javascript.

Esta matéria é muito simples, ela se resume em apenas trocar o SRC do objeto IMG, porém algumas pessoas não sabem como fazer isto.

Vamos criar uma simples página, quando o usuário clica em um botão a imagem é alterada, por padrão uma imagem já existe e apenas será alterada com uma ação do usuário.

Você pode ver um exemplo em funcionamento clicando aqui, este é o exemplo que criamos nesta matéria. (link: http://www.satellasoft.com/exemplos/alterarImagem.html)

Nosso HTML tem uma div para centralizar nosso conteúdo, um objeto IMG que é obrigatório, é a partir dele que vamos carregar uma outra imagem e um botão, que deverá disparar uma ação, no código abaixo você pode ver um exemplo do nosso HTML.

Código 01:

<!doctype html>
<html lang="pt-br">
	<head>
		<title>Alterar imagem - SatellaSoft</title>
		<meta charset="utf-8">
		<style type="text/css">
			*{margin: 0 auto; padding:0;}
			
			body{
				background-color:#111;
			}
			
			#dvCentro{
				width:500px;
				margin-top:50px;
				background-color: #FFF;
				border:5px solid #ccc;
				padding:6px;
				border-radius: 5px;
			}
		</style>
		<script type="text/javascript">
			//Aqui vem o código JS(abreviação de Javascript).
		</script>
	</head>
	<body>
		<div id="dvCentro">
			<button onclick="">Clique para trocar a imagem</button>
				<br />
					<div style="border-bottom:3px solid #000; padding:5px;"></div>
				<br />
				<img src="imagemLogo.png" alt="Imagem" title="Imagem" id="img" />
				<!-- por Default já tem uma imagem como padrão.-->
			<br />
			<a href="http://www.satellasoft.com" style="text-decoration:none;">Exemplo SatellaSoft</a>
		</div>
	</body>
</html>

Alterando imagem com Javascript.
Alterando imagem com Javascript.

 

Agora vamos criar uma função em Javascript que quando chamada altera a imagem, para isto é muito fácil.

Para alterar a imagem acessamos um objetos (tem que ter o atributo id) e no seu SRC alteramos o caminho da imagem, da seguinte forma: document.getElementById(img).src =”novaImagem.png”;

Vamos agora programar a função responsável por fazer esta ação, vamos complicar só um pouco, ao invés de definirmos na função qual objeto acessar e qual imagem será alterada, vamos passar este dois valores por parâmetros, assim você nota um exemplo de como reutilizar o mesmo código.

Nosso Javascript deve ficar da seguinte forma abaixo:

Código 02:

<script type="text/javascript">
//Aqui vem o código JS(abreviação de Javascript).
			
	function alterarImagem(objeto, caminhoNovaImagem){//Recebemos dois valores por parâmetro.
		document.getElementById(objeto).src = caminhoNovaImagem; 
		/*
		document.getElementById: acessa um objeto na página através do atributo ID, tudo que tiver um identificador é um 		objeto e é através dele que vamos acessar.
		(objeto): é dentro dos parenteses que informamos qual objeto acessar, neste exemplo o objeto será passado por 		parâmetro.
		src: é abreviação de source, é o caminho da nova imagem.
		= caminhoNovaImagem: Informa o diretório da nova imagem, como: c:/window/wallpaper.jpg
		*/
	}		
</script>

O botão de ação deve chamar a função que nós criamos e passar os dois valores por parâmetro, que é o objeto e o novo caminho da imagem, no código abaixo você vê um exemplo.

Código 03:

<button onclick="alterarImagem('img', 'imagemAlterar.png');">Clique para trocar a imagem</button>

Agora execute seu projeto e troque apenas o caminho das duas imagens a inicial e a nova que é passada por parâmetro, veja o resultado abaixo.

Alterando imagem em tempo de execução com JS
Alterando imagem em tempo de execução com JS

Você pode utilizar este exemplo quando uma imagem não for carregada, ao invés do onclick(), utilize o onerror().

Os códigos completos esta logo abaixo, espero que tenham aprendido e gostado, qualquer duvida deixe nos comentários.

Código 04:

<!doctype html>
<html lang="pt-br">
    <head>
        <title>Alterar imagem - SatellaSoft</title>
        <meta charset="utf-8">
        <style type="text/css">
            *{margin: 0 auto; padding:0;}

            body{
                background-color:#111;
            }

            #dvCentro{
                width:500px;
                margin-top:50px;
                background-color: #FFF;
                border:5px solid #ccc;
                padding:6px;
                border-radius: 5px;
            }
        </style>
        <script type="text/javascript">
            //Aqui vem o código JS(abreviação de Javascript).

            function alterarImagem(objeto, caminhoNovaImagem) {//Recebemos dois valores por parâmetro.
                document.getElementById(objeto).src = caminhoNovaImagem;
                /*
                 document.getElementById: acessa um objeto na página através do atributo ID, tudo que tiver um identificador é um objeto e é através dele que vamos acessar.
                 (objeto): é dentro dos parenteses que informamos qual objeto acessar, neste exemplo o objeto será passado por parâmetro.
                 src: é abreviação de source, é o caminho da nova imagem.
                 = caminhoNovaImagem: Informa o diretório da nova imagem, como: c:/window/wallpaper.jpg
                 */
            }
        </script>

 

Gunnar Correa
Gunnar Correa

Autodidata, Graduado em Desenvolvimento Web, Especialista em Tecnologias na Educação e Pós-graduando em Segurança da Informação. Começou seus estudos na área de programação quando era criança, e atualmente, está estudando desenvolvimento de jogos. Fundador da SatellaSoft, criado em 2009 com o intuito de compartilhar conhecimento de forma gratuita e inédita.

Deixe um comentário