Alterar Imagem em tempo real com Javascript

CursoCriando uma aplicação com área administrativa utilizando o Laravel

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>

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.

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>