0

Preciso de uma ajuda, eu tenho uma pagina web com duas tabelas, uma tabela tem 5 divs com imagens dentro dela, imagens já pré-definidas, ao clicar sobre alguma dessas imagens mude o background da outra tabela. Como posso fazer isso usando PHP, HTML e JS.

Alguém tem um tutorial, código experimental, qualquer coisa que possa me ajudar a realizar essa operação, agradeço desde já.

CÓDIGO:

<td height="351" valign="top" align="center">
   <div class="fundo"> </div>
   <div class="fundo"> </div>
   <div class="fundo"> </div>
   <div class="fundo"> </div>
   <div class="fundo"> </div> 
</td> 

CSS:

.fundo {
   font-size: 1em; 
   text-align: center; 
   line-height: 40px; 
   height: 52px; 
   width: 52px; 
   margin: 4px; 
   margin-left:32px; 
   border: 2px solid black; 
   float: left; 
   padding: 2px;
 }

inserir a descrição da imagem aqui

3
  • Podes colocar o código HTML que tens?
    – Sergio
    8/08/2017 às 13:36
  • Jessica: clica em editar e coloca isso na pergunta, de preferência a(s) <table> completa(s)
    – Sergio
    8/08/2017 às 13:43
  • É só uma tabela com 5 divs igual a imagem, com uma classe com o estilo das divs, e uma tabela vazia, só para receber a cor. 8/08/2017 às 13:46

4 Respostas 4

4

Fiz aqui um exemplo simples para você modificar e usar para resolver seu problema.

Explicação :

As cores de cada div estão setadas no 'BACKGROUND' no seu caso como vai ser imagem provavelmente vai usar 'background-image', independente de como for fazer precisa modificar no evento do click qual atributo você quer pegar da div que recebeu o click para passar para div geral, ou tabela , ou qualquer elemento. Observe que adicionei o evento click em [cor] um atributo que setei em todas as divs que vão ter essa ação.

$(function(){
  $('[cor]').click(function(){
    var bg = $(this).css('background');
    $('.cor-escolhida').css('background',bg);
  });
});
.div{
  width: 30px;
  height: 30px;
  float:left;
  margin-left: 5px;
  cursor: pointer;
}
.azul{
  background: blue;
}
.amarelo{
  background: yellow;
}
.vermelho{
  background: red;
}
.preto{
  background: black;
}
.verde{
  background: green;
}
.cor-escolhida{
  background: #ededed;
  width: 100%;
  height: 200px;
  float:left;
  margin-top: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div cor="true" class="div azul"></div>
<div cor="true" class="div amarelo"></div>
<div cor="true" class="div vermelho"></div>
<div cor="true" class="div preto"></div>
<div cor="true" class="div verde"></div>
<div class="cor-escolhida"></div>

2

Não sei se entendi direito, mas acho que você está montando o layout de seus site através de tabelas? Se for isso mesmo aconselho a não continuar dessa forma, usamos o conceito de que tabelas são para fazer tabelas :) que tal?

Criei aqui 10 divs 5 com background coloridos e 5 com background de imagens. Estou utilizando o Jquery que troca o background da div class='resultado' pelo mesmo background da div que foi clicada.` Perceba que apenas 1 linha de código já resolve a troca.

$('.pad').on('click', function(){

  $('.resultado').css('background', $(this).css('background'));
  
});
.pad{

  width: 100px;
  height: 100px;
  display: inline-block;
}


.resultado{
  width: 500px;
  height: 500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='pad' style='background-color: red'>

</div>
<div class='pad' style='background-color: pink'>

</div>
<div class='pad' style='background-color: orange'>

</div>
<div class='pad' style='background-color: blue'>

</div>
<div class='pad' style='background-color: gray'>

</div>
<br>
<div class='pad' style='background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSjDTixrnTBJkS5W8sVP8nUbqAI0Q0A1EivmZ6ebjBoxqliLVnc")'>

</div>

<div class='pad' style='background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTiFIvETpnGCxMpLfIClByX3CoNj1CLUXZECUNkDX6ktHpqhSq1")'>

</div>

<div class='pad' style='background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcScprXKYMyyAiep-_dpYdu6lcVNMn6v_IFoQJCCIfeZf-sJMjrIXQ")'>

</div>

<div class='pad' style='background: url("http://www.meapaixonei.com.br/wp-content/uploads/2016/07/conheca-10-curiosidades-sobre-o-sorriso.jpg")'>

</div>

<div class='pad' style='background: url("https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ6gBy5fsABIPzfEOZpVYBrMICap1JdADWxDGjPMF40Gn6j4ZEJ")'>

</div>

<div class='resultado'>

</div>

Observações

  • O estilo apresentado não está dentro de tabela ou coisa do tipo, mas repare que ao aplicar a lógica, onde quer que for este método deverá funcionar.

  • As imagens se repetem na div class='resultado', caso a imagem seja pequena demais. Isso é espaço para uma outra pergunta. Mas deixo aqui de ante mão um link para que você possa lidar com esse problema caso seja necessário.

Sobre background
Perfect Full Page Background Image (A famosa mão na roda)

1

Ola, fiz um exemplo básico usando jquery.

https://jsfiddle.net/telizpablo/5rfn0kbp/3/

no atributo data-color você define a cor que aquela div transformará a table2 (pode ser HEX também ) ;)

Espero ter ajudado.

0
<script>
    $(function () {
        $('#suaTabela td div.fundo').click(function () {
            $('#tabelaAlvo').css('background', $(this).css('background'));
            //ou
            salvaBanco();
            //ou            
            window.location.href = 'www.meusite.com/index.php?cor=' + $(this).css('background');
        });
    });
</script>
<table id="suaTabela">
    <tr>
        <td height="351" valign="top" align="center">
            <div class="fundo"></div>
            <div class="fundo"></div>
            <div class="fundo"></div>
            <div class="fundo"></div>
            <div class="fundo"></div>
        </td>
    </tr>
</table>

Na função "salvaBanco();" você deve utilizar AJAX (https://www.w3schools.com/xml/ajax_intro.asp) para gravar no banco sem precisar recarregar a página;

Caso não possa utilizar AJAX, terá que submeter algum formulário usando método POST e pegando o valor via PHP $_POST["cor"].

Caso também não consiga utilizar o método POST, podes usar o JavaScript para redirecionar a página para ela mesma utilizando parâmetro (QueryString) e usando $_GET["cor"] para salvar no banco;

/*código PHP localizado na parte superior da index.php citado no exemplo */
<?php
    if(isset($_GET["cor"])){
        GravaNoBanco($_GET["cor"]);
    }
?>

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 .