Como coloco imagem de fundo usando funções php?

[Daltonspider 0]

Olá professores!

 

Gostaria de colocar uma imagem que vem de um função php no fundo dos dados que vem de funções php. As Imagens ficam acima dos dados, como mostro no anexo.

 

Obrigado!

[iszwnc 2]

Eu tenho alguns pontos que gostaria de compartilhar, algumas delas são puramente opiniões minhas mas talvez te sirva também:

• Quando estiver trabalhando com PHP e HTML juntos, faça uso da sintaxe com dois pontos. Assim o código fica mais legível e organizado.

<?php while ( $something ) : if ( $something == 'SIM' ) : ?>
   <div class="minha-classe">
      <p>Olá Mundo</p>
   </div>
<?php endwhile; endif; ?>

• Verifique bem se os dados do Banco de Dados estão corretos, as vezes você acabou errando/esquecendo um caractere da Tabela e a URL da imagem não está vindo.
• Agora se por algum motivo você quer colocar uma imagem estática de Disponível e outra de Indisponível, verifique se a URL que você inseriu lá na condição, está relativo ao PATH do seu arquivo .php.

Espero ter ajudado de alguma forma, lembrando que eu só dei uma olhada rápida no código, se eu acabei deixando passar algo por favor me diga, beleza?

[Daltonspider 0]

Em 26/03/2017 at 09:05, iszwnc disse:

Eu tenho alguns pontos que gostaria de compartilhar, algumas delas são puramente opiniões minhas mas talvez te sirva também:

• Quando estiver trabalhando com PHP e HTML juntos, faça uso da sintaxe com dois pontos. Assim o código fica mais legível e organizado.

<?php while ( $something ) : if ( $something == 'SIM' ) : ?>
   <div class="minha-classe">
      <p>Olá Mundo</p>
   </div>
<?php endwhile; endif; ?>

• Verifique bem se os dados do Banco de Dados estão corretos, as vezes você acabou errando/esquecendo um caractere da Tabela e a URL da imagem não está vindo.
• Agora se por algum motivo você quer colocar uma imagem estática de Disponível e outra de Indisponível, verifique se a URL que você inseriu lá na condição, está relativo ao PATH do seu arquivo .php.

Espero ter ajudado de alguma forma, lembrando que eu só dei uma olhada rápida no código, se eu acabei deixando passar algo por favor me diga, beleza?

So quero agradecer sua disposição e ensinamento, sou muito inexperiente ainda! consegui fazer o que eu queria era so falta de conhecimento em css. Meus códigos são uma bagunça kkk ainda não sei identar como deveria..

[Eziquiel 96]

Uma dica, meu amigo. Crie um estilo para a classe sua div, por padrão utilizando a imagem "indisponivel.png" como fundo.

Depois crie um estilo para a classe div.disponivel, onde terá como fundo a imagem "disponível.png".

 

Funciona assim: quando estiver indisponível a class da sua div permanecerá a mesma (class="container-fullscreen heading-style-3"). Se for disponível, a classe da sua div ficará assim: (class="container-fullscreen heading-style-3 disponivel").

 

Quando a div receber esta classe "disponivel", automaticamente assumirá o estilo criado para esta classe.

 

Veja um exemplo onde eu uso cores, pra exemplificar.

http://codepen.io/Eziquiel/pen/VpVWmv

 

[Daltonspider 0]

Amigo Eziquiel! Obrigado! Ja resolvi nessa linha do seu raciocínio!

 

Obs: respondi esse post achando que era outro post errado ai editei kkkkk

 

Obrigado!!

 

[Eziquiel 96]

Que alert? Talvez posso ajudar.

 

[Eziquiel 96]

Agora eu vi o novo tópico que você criou.

[Daltonspider 0]

4 minutos atrás, Daltonspider disse:

Amigo Eziquiel! Obrigado! Ja resolvi nessa linha do seu raciocínio!

 

Obs: respondi esse post achando que era outro post errado ai editei kkkkk

 

Obrigado!!

 

Abaixo a solução para estudo:

 

 <div class="container-fullscreen heading-style-3" style="background-image:url(<?php echo $img ?>); background-size: cover;">

E essa é a IF que muda a imagem:

 

<?php

  
	
	
		$sqlp = mysql_query("SELECT * FROM produtos WHERE id_categoria='11'");
		while($verp = mysql_fetch_array($sqlp)){
			$disponivel = $verp['disponivel'];
			$id_pro = $verp['cod'];
			$nomepro = $verp['nome'];
			$descpro = $verp['descricao'];
			$precopro = $verp['preco'];
			
			
			
					
			
			if($disponivel == SIM){
				$img = "../imagens/disponivel.png";	
				
				
			}else{
			$img = "../imagens/indisponivel.png";
			
			}
	

	?>

 

2 minutos atrás, Eziquiel disse:

Agora eu vi o novo tópico que você criou.

Desculpe achava que essa outro topico meu! hahah neurônios queimando aqui kkkkk

[Daltonspider 0]

6 minutos atrás, Eziquiel disse:

Que alert? Talvez posso ajudar.

 

 Agradeceria imensamente!!! viu o topico?

[Eziquiel 96]

insira esta linha no seu php: pode ser acima do "if($disponivel == SIM){"

$classe = ($disponivel == "SIM")? "disponivel" : "indisponivel";

 

Depois, substitua sua linha da div, por esta abaixo. (irá incluir uma classe a mais na sua div)

<div class="container-fullscreen heading-style-3 <?php echo $classe ?>" style="background-image:url(<?php echo $img ?>); background-size: cover;">

 

Agora vamos ao javascript... já te passo.

 

 

[Eziquiel 96]

Vamos lá.

 

insira esta tag na sua <head> (caso ainda não tenha adicionado a biblioteca JQuery).

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>

 

Agora na seu javascript inclua esta função:

 

$('.indisponivel').click(function(){
  alert('Produto indisponível no momento');
});

 

[Eziquiel 96]

Veja aqui o alert  funcionando apenas ao clicar nos elementos que possuam a classe "indisponível".

 

http://codepen.io/Eziquiel/pen/VpVWmv

[Daltonspider 0]

No caso preciso desativar o onclick da mensagem que ja existe? nao deu certo...

[Eziquiel 96]

Coloque aqui o evento onclick que você já tem pronto.

[Daltonspider 0]

2 minutos atrás, Eziquiel disse:

Coloque aqui o evento onclick que você já tem pronto.

Vou colocar todos os codigos pertinentes a isso: 

 

<?php

  
	
	
		$sqlp = mysql_query("SELECT * FROM produtos WHERE id_categoria='11'");
		while($verp = mysql_fetch_array($sqlp)){
			$disponivel = $verp['disponivel'];
			$id_pro = $verp['cod'];
			$nomepro = $verp['nome'];
			$descpro = $verp['descricao'];
			$precopro = $verp['preco'];
			
			
			$classe = ($disponivel == "SIM")? "disponivel" : "indisponivel";
					
			
			if($disponivel == SIM){
				$img = "../imagens/disponivel.png";	
				
				
			}else{
			$img = "../imagens/indisponivel.png";
			
			}
	

	?>
	
	<script>
	$('.indisponivel').click(function(){
  alert('Produto indisponível no momento');
});
	</script>
	
	
	

	<div class="container-fullscreen heading-style-3 <?php echo $classe ?>" style="background-image:url(<?php echo $img ?>); background-size: cover;">
	
   
   
   <center> 
   <a href="cadastra.php?cod=<?php echo $id_pro ?>&nome=<?php echo $nomepro ?>&preco=<?php echo $precopro ?>&qtd=1&mesa=<?php echo $idmesa ?>&idGarcon=<?php echo $mostra['idGarcon']; ?>&destino=<?php echo $destino ?>" class="btn twitter" onclick="return confirm('<?php echo $nomepro ?> - CONFIRMA O PEDIDO?')">
		
	<h3 class="heading-title"><?php echo $nomepro ?>&nbsp R$<?php echo $precopro ?></h3>
	<em class="heading-subtitle"><?php echo $descpro ?></em>
    
	</a></center>
   
   </div>

Desculpe a bagunça.. rsrs Nesse modelo ele troca de cor certinho, quando troca no banco pra NAO fica de outra cor, mas ainda continua dando a mesma mensagem

[Eziquiel 96]

Faça o seguinte: com a página carregada, exiba o código fonte da página (ou abra o inspecionador) e veja se as divs estão recebendo a classe "disponível" ou "indisponível" corretamente.

[Daltonspider 0]

Agora, Eziquiel disse:

Faça o seguinte: com a página carregada, exiba o código fonte da página (ou abra o inspecionador) e veja se as divs estão recebendo a classe "disponível" ou "indisponível" corretamente.

Echo que é algo com meu js... quando coloco o seu link meus scripts param..

Vou fazer o que falou.. momento

[Eziquiel 96]

Você incluiu esta tag na sua <head>?

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>

 

[Daltonspider 0]

DEU CERTOOOO!!!!! nao sabe a felicidade que você me deu!!!! e conhecimento!!! achei muito show a ideia da condição

Cara, tu ganhou um fâ!!!! 

[Eziquiel 96]

Beleza. Onde estava o problema? Faltava a tag na <head>?