Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

gui_adp

Comando Onclick com Divs ?

Por , em Javascript

Recommended Posts

gui_adp    0

gui_adp
Postado

Seguinte Galera ..

 

Eu quero 3 imagens alinhadas. Cada qual em sua div.
Quando eu clicar em uma imagem, eu quero que maximize uma outra div, com informações por exemplo.

 

Alguem me ajuda ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

gui_adp    0

gui_adp
Postado

posta o codigo

 

Fiz um exemplo cru rapidinho.

Agora eu quero que quando eu clicar na img1, abra uma nova div 'Descricao', que até então, está oculta, com o respectivo conteúdo.

 

 

<!DOCTYPE html>

<head>

<title> Exemplo </title>

 

<style type="text/css">

 

.img {float: left;}

 

#descricao {

width: 300px;

height: 300px;

color:red;}

 

</style>

 

</head>

<body>

<article>

 

<div>

<img src="imagem1.png" class="img"/>

<img src="imagem2.png" class="img"/>

<img src="imagem3.png" class="img"/>

</div>

 

<div id="descricao">

 

Conteúdo.

</div>

 

</article>

</body>

</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

FreitasMT    29

FreitasMT
Postado 




<!DOCTYPE html>



<head>



   <title> Exemplo </title>



   <style type="text/css">



      .img {float: left;}



      #descricao {



		  width: 300px;



		  height: 300px;



		  color:red;



		  display:none;



	  }


 


 



   </style>


 



   <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>



   <script>



	$(function(){



		$(".img-1").click(function(){



			$("#descricao").toggle(300);



		})



	})



   </script>



</head>



<body>



   <article>



      <div>



         <img src="imagem1.png" class="img img-1"/>



         <img src="imagem2.png" class="img"/>



         <img src="imagem3.png" class="img"/>



      </div>



      <div id="descricao">



         Conteúdo.



      </div>



   </article>



</body>



</html>



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
gui_adp
			  

	
		
	
			 0
	
		
	

		

		

			


	
		gui_adp
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			



 


<!DOCTYPE html>
<head>
   <title> Exemplo </title>
   <style type="text/css">
      .img {float: left;}
      #descricao {
		  width: 300px;
		  height: 300px;
		  color:red;
		  display:none;
	  }
	  
	  
   </style>
   
   <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
   <script>
	$(function(){
		$(".img-1").click(function(){
			$("#descricao").toggle(300);
		})
	})
   </script>
</head>
<body>
   <article>
      <div>
         <img src="imagem1.png" class="img img-1"/>
         <img src="imagem2.png" class="img"/>
         <img src="imagem3.png" class="img"/>
      </div>
      <div id="descricao">
         Conteúdo.
      </div>
   </article>
</body>
</html>




 


Opa, muito obrigado (:



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
FreitasMT
			  

	
		
	
			 29
	
		
	

		

		

			


	
		FreitasMT
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

<!DOCTYPE html>
<head>
   <title> Exemplo </title>
   <style type="text/css">
      .img {float: left;}
      .descricao {
		  width: 300px;
		  height: 300px;
		  color:red;
		  display:none;
	  }
	  
	  
   </style>
   
   <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
   <script>
	$(function(){
		$(".img").click(function(){
			var id = $(this).attr("id");
			$(".descricao").fadeOut();
			$("#descricao-"+id).toggle(300);
		})
	})
   </script>
</head>
<body>
   <article>
      <div>
         <img src="imagem1.png" alt="img 1" class="img" id="img-1" />
         <img src="imagem2.png" alt="img 2"  class="img" id="img-2" />
         <img src="imagem3.png" alt="img 3"  class="img" id="img-3" />
      </div>
      <div id="descricao-img-1" class="descricao">
         Conteúdo 1.
      </div>
      <div id="descricao-img-2" class="descricao">
         Conteúdo 2.
      </div>
      <div id="descricao-img-3" class="descricao">
         Conteúdo 3.
      </div>
   </article>
</body>
</html>


 


 


perceba que o segredo está nos números do id da imagem e do id da descrição.


 


dependo do numero do id da da imagem que mostra ou oculta a descrição equivalente



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Javascript
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

				
Ao usar o fórum, você concorda com nossos Termos e condições.

			

			

				  Aceito