Como deixar dinâmica a troca de imagens em PHP

Criar uma interface dinâmica onde as imagens se troquem de acordo com as ações do usuário é uma funcionalidade bastante útil em sites e sistemas web. Um exemplo disso é um portfólio que muda as imagens ao clicar em miniaturas ou um banner rotativo. Neste post, vamos mostrar como deixar dinâmica a troca de imagens em PHP com HTML.

Conceito básico

O PHP é uma linguagem de backend, o que significa que a troca de imagens em tempo real diretamente com PHP não é possível sem recarregar a página. No entanto, podemos usar o PHP para gerar dinamicamente as URLs das imagens e controlar qual imagem será exibida com base em variáveis, ações do usuário ou outros parâmetros.

Para criar uma troca de imagens mais interativa e em tempo real, é comum combinar PHP com JavaScript ou jQuery, mas aqui vamos focar em um exemplo mais simples com PHP puro e recarga de página.

Passo 1: Organizar as imagens

Coloque todas as suas imagens em uma pasta no servidor. Vamos criar uma pasta chamada imagens e dentro dela colocaremos algumas imagens, por exemplo: imagem1.jpg, imagem2.jpg, etc.

Passo 2: Criação de uma lógica para troca de imagens

Podemos usar variáveis em PHP para controlar qual imagem será exibida. A ideia aqui é passar o nome da imagem via parâmetros na URL, e então o PHP atualizará dinamicamente a imagem exibida com base nesse valor.

Exemplo:

<?php
// Definir imagem padrão
$imagem = "imagem1.jpg";

// Verificar se há alguma imagem sendo passada pela URL
if (isset($_GET['img'])) {
    $imagem = $_GET['img'];
}

// Caminho completo para a imagem
$caminhoImagem = "imagens/" . $imagem;
?>

<!DOCTYPE html>
<html>
<head>
    <title>Troca Dinâmica de Imagens</title>
</head>
<body>

<h1>Exemplo de Troca de Imagens Dinâmica com PHP</h1>

<!-- Exibir a imagem -->
<img src="<?php echo $caminhoImagem; ?>" alt="Imagem Dinâmica" style="max-width: 500px;">

<!-- Links para trocar a imagem -->
<br>
<a href="index.php?img=imagem1.jpg">Imagem 1</a> |
<a href="index.php?img=imagem2.jpg">Imagem 2</a> |
<a href="index.php?img=imagem3.jpg">Imagem 3</a>

</body>
</html>

Passo 3: Explicando o código

Variável da imagem: Definimos uma imagem padrão (imagem1.jpg) que será exibida caso nenhuma outra seja selecionada.
Verificar o parâmetro da URL: Usamos $_GET['img'] para verificar se o usuário clicou em algum dos links de imagem e passar essa informação para o script. Se a variável existir, a imagem correspondente será carregada.
Montar o caminho da imagem: O caminho completo da imagem é montado combinando o diretório onde estão as imagens (imagens/) com o nome da imagem obtido via URL.
Exibir a imagem: No HTML, o src da tag <img> usa o valor gerado pelo PHP, exibindo a imagem correspondente.
Links para trocar imagens: Os links estão configurados para carregar diferentes imagens com base no parâmetro img na URL.

Passo 4: Testar o script

Salve o arquivo PHP com o nome index.php, crie a pasta imagens no mesmo diretório e coloque lá os arquivos imagem1.jpg, imagem2.jpg e imagem3.jpg. Quando acessar o script, você verá a imagem padrão. Ao clicar nos links, a imagem será trocada dinamicamente.

Passo 5: Melhorando a experiência com JavaScript

Se você quiser uma troca de imagens mais fluida, sem recarregar a página, pode adicionar JavaScript para alterar o src da imagem. Aqui vai um exemplo de como fazer isso:

<!DOCTYPE html>
<html>
<head>
    <title>Troca Dinâmica de Imagens com JavaScript</title>
</head>
<body>

<h1>Exemplo de Troca de Imagens com JavaScript</h1>

<!-- Imagem a ser trocada -->
<img id="imagem" src="imagens/imagem1.jpg" alt="Imagem Dinâmica" style="max-width: 500px;">

<!-- Links para trocar a imagem -->
<br>
<a href="#" onclick="trocarImagem('imagens/imagem1.jpg')">Imagem 1</a> |
<a href="#" onclick="trocarImagem('imagens/imagem2.jpg')">Imagem 2</a> |
<a href="#" onclick="trocarImagem('imagens/imagem3.jpg')">Imagem 3</a>

<script>
    function trocarImagem(caminho) {
        document.getElementById('imagem').src = caminho;
    }
</script>

</body>
</html>

Neste exemplo com JavaScript, a troca de imagens acontece sem recarregar a página. Ao clicar nos links, a função trocarImagem() altera o atributo src da imagem diretamente.

Outro exemplo prático

O código abaixo faz essa alteração com base na data atual:

  <?php
   date_default_timezone_set('America/Sao_Paulo');
   $data = date("Y-m-d H:i:s");
   
   $mes = substr($data,5,2);//Extrai mês da data
   $dia = substr($data,8,3);//Extrai dia da data
         
   //--- ALTERA TEMA DO LOGOTIPO DE ACORDO COM AS DATAS COMEMORATIVAS ---		 
   if($mes == 02 && $dia > 7 && $dia < 15) //Semana do Carnaval
	echo('<a href="index.php"><img src="logotipo-carnaval.png" alt="CriandoBits"></a>');	   
   elseif($mes == 03 && $dia > 20 && $dia < 30) //Semana da Páscoa
	echo('<a href="index.php"><img src="logotipo-pascoa.png" alt="CriandoBits"></a>');
   elseif($mes == 04 && $dia == 21) //Tiradentes
	echo('<a href="index.php"><img src="logotipo-tirad.png" alt="CriandoBits"></a>');
   elseif($mes == 09 && $dia == 7) //Independência
	echo('<a href="index.php"><img src="logotipo-indep.png" alt="CriandoBits"></a>');
   elseif($mes == 11 && $dia == 2) //Finados
	echo('<a href="index.php"><img src="logotipo-finados.png" alt="CriandoBits"></a>');
   elseif($mes == 11 && $dia == 15) //Proclam. República
	echo('<a href="index.php"><img src="logotipo-procrep.png" alt="CriandoBits"></a>');
   elseif($mes == 12 && $dia > 18 && $dia < 26) //Semana Natal
	echo('<a href="index.php"><img src="logotipo-snatal.png" alt="CriandoBits"></a>');
   elseif($mes == 12 && $dia > 25 && $dia < 32) //Semana fim de ano
	echo('<a href="index.php"><img src="logotipo-fimano.png" alt="CriandoBits"></a>');
   elseif($mes == 01 && $dia == 01) //Início de ano
	echo('<a href="index.php"><img src="logotipo-fimano.png" alt="CriandoBits"></a>');	    
   else
   {
   	Em datas e períodos não comemorativos, mantém-se o logotipo padrão 
	echo('<a href="index.php"><img src="logotipo-padrao.png" alt="CriandoBits"></a>');
   }      
   
  ?>

Veja que o arquivo do logotipo é alterado de acordo com os intervalos de datas.

Deixar a troca de imagens dinâmica com PHP é simples e pode ser feito de várias maneiras.

Se você precisar de uma troca sem recarregar a página, pode combinar PHP para a parte do backend com JavaScript ou jQuery no frontend. Já em sistemas onde o reload da página é aceitável, o exemplo com PHP puro funciona perfeitamente.

QUER APRENDER PHP ORIENTADO A OBJETOS OU APERFEIÇOAR O QUE JÁ SABE?
Então conheça o curso online que já ajudou milhares de pessoas a aprender a programar e desenvolver seus próprios projetos do ZERO e usando orientação a objetos de uma forma fácil de entender.
CLIQUE NA IMAGEM ABAIXO E SAIBA MAIS:

CLIQUE AQUI E SAIBA MAIS

Dúvidas ou sugestões? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Quer receber GRÁTIS o e-book "Como Formatar um Computador em 5 Minutos"?