1

Preciso fazer uma "galeria" de imagem e passar algum valor de identificação, em PHP, mostrando qual imagem eu selecionei. A ideia é mostrar varias imagem, como se fossem ícones, e o usuário escolher a preferida. Acho que da para fazer usando checkbox, más não sei como faz.

Abaixo um exemplo: Vários ícones, selecionáveis, devidamente identificados...

inserir a descrição da imagem aqui

1 Resposta 1

0

Neste caso você deveria usar radio em vez de checkbox, porque ao contrário do checkbox, o radio só lhe permite escolher uma opção.

Crie um label para cada imagem e adicione antes da tag img um input do tipo radio:

<label>
   <input type="radio" name="icones" value="valor 1">
   <img src="caminho_da_imagem_1">
</label>
<label>
   <input type="radio" name="icones" value="valor 2">
   <img src="caminho_da_imagem_2">
</label>

Note que os radios devem possuir o mesmo name, o que muda é só o value de cada um. É esse value que irá identificar qual imagem o usuário escolheu.

CSS

No CSS você irá ocultar o radio com opacity, mas ao clicar na imagem, seu respectivo radio será checado mudando a cor da borda da imagem adjacente:

/* oculta o radio */
input[name=icones]{
   position: absolute;
   opacity: 0;
}

/* propriedades da imagem */
input[name=icones] + img{
  cursor: pointer;
  border: 4px solid #000;
}

/* altera a cor da borda */    
input[name=icones]:checked + img{
   border-color: #30F519;
}

Você pode enviar o valor do radio checado via formulário com POST para o PHP e pegar com $_POST['icones'] (onde icones é o name dos radios).

Exemplo: clique em uma imagem e depois clique no botão para exibir o valor de qual radio está checado:

function demo(){
   var icones = document.querySelector("input[name=icones]:checked");
   console.log("A imagem selecionada é a: " + icones.value);
}
input[name=icones]{
   position: absolute;
   opacity: 0;
}

input[name=icones] + img{
  cursor: pointer;
  border: 4px solid #000;
}

input[name=icones]:checked + img{
   border-color: #30F519;
}
Selecione uma imagem:
<form method="post" action="pagina.php">
   <div style="display: flex;">
      <div>
         <label>
            <input type="radio" name="icones" value="1">
            <img src="https://img.icons8.com/ultraviolet/2x/avatar.png">
         </label>
      </div>
      <div>
         <label>
            <input type="radio" name="icones" value="2">
            <img src="https://img.icons8.com/ultraviolet/2x/avatar.png">
         </label>
      </div>
      <div>
         <label>
            <input type="radio" name="icones" value="3">
            <img src="https://img.icons8.com/ultraviolet/2x/avatar.png">
         </label>
      </div>
   </div>
</form>
<button onclick="demo()">Value da imagem selecionada</button>

1
  • Perfeito! Era isso mesmo, muito obrigado!!! 24/11/2018 às 20:46

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .