Ir para conteúdo

POWERED BY:

Arquivado

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

Boggler

adicionar uma Bubble/Box/Caixa de dialogo a uma imagem...

Por , em Desenvolvimento frontend

Recommended Posts

Boggler    0

Boggler
Postado 

Bom galera to com  a seguinte dúvida, eu fiz uma "caixa de dialogo" e queria implementar ela em uma  "imagem/link" que eu tenho, só que não sei como implementarei ela... vou tentar deixar bem claro o que estou pretendendo fazer 
 


No site tem lista de tópicos que são representados com uma imagem onde a pessoa decide qual quer ir e clicka nela


como por exemplo isso daqui:


 


B3bI7An.png


 


eu queria fazer com que ao passar o mouse em cima da imagem acima, uma "box/bubble" apareça contendo titulo, descrição.... como  isso daqui:


5en9b8H.png


 


os códigos que estou usando para ambas as funções atualmente são esses:


 


Box/Bubble/Caixa de Dialogo:


 








 




<!DOCTYPE html>
<html>
<head>

<style type="text/css"> 
.bubble 
{
position: relative;
width: 300px;
height: 250px;
padding: 0px;
background: #000000;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
border: #7D7F7F solid 3px;
}

.bubble:after 
{
content: '';
position: absolute;
border-style: solid;
border-width: 15px 22px 15px 0;
border-color: transparent #000000;
display: block;
width: 0;
z-index: 1;
left: -22px;
top: 72px;
}

.bubble:before 
{
content: '';
position: absolute;
border-style: solid;
border-width: 17px 24px 17px 0;
border-color: transparent #7D7F7F;
display: block;
width: 0;
z-index: 0;
left: -27px;
top: 70px;
}

.Titulo{
color:#ffffff;
background-color:#ff0000;
font-family: Franklin Gothic Medium, sans-serif;
font-size:18px; 
font-weight:500;
margin-bottom: 0px;
margin-left: 11px;
margin-right: 0px;
margin-top: -269px;
padding-bottom: 1px;
padding-left: 1px;
padding-right: 1px;
padding-top: 1px;
position: absolute;
text-align: left;
text-decoration: none;
}
.Info{
color:#ffffff;
background-color:#ff0000;
font-family: Franklin Gothic Medium, sans-serif;
font-size:12px; 
font-weight:500;
margin-bottom: 0px;
margin-left: 12px;
margin-right: 0px;
margin-top: -248px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 1px;
padding-top: 1px;
position: absolute;
text-align: left;
text-decoration: none;
}
.FundoCima{
color:#ffffff;
background-color:#ff0000;
font-family: Franklin Gothic Medium, sans-serif;
font-size:18px; 
font-weight:500;
margin-bottom: 0px;
margin-left: 3px;
margin-right: 0px;
margin-top: -269px;
padding-bottom: 20px;
padding-left: 0px;
padding-right: 291px;
padding-top: 4px;
position: absolute;
text-align: left;
text-decoration: none;
}
.Desc{
color:#ffffff;
font-family: Franklin Gothic Medium, sans-serif;
font-size:12px; 
font-weight:500;
margin-bottom: 0px;
margin-left: 12px;
margin-right: 0px;
margin-top: -220px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 1px;
padding-top: 1px;
position: absolute;
text-align: left;
text-decoration: none;
</style>

</body>

<p class="bubble">
</p>
<p class="FundoCima">
 -
</p>
<p class="Titulo">
TEXTO
</p>
<p class="Info">
TEXTO
</p>
<p class="Desc">
DESCRIÇÃO
</p>
</html>








 


 


Topíco:


 








 




<html> 
<head> 
<li title="TITULO">

<a href="LINK DO TÓPICO">
<img src="IMAGEM SOURCE" 
width="147" 
height="200" 
style="border:5px solid red"
class="aimg">

<style type="text/css"> 
.Qualidade{ 
color:#ffffff; 
background-color:#ff0000;
font-family: Franklin Gothic Medium, sans-serif;
font-size:18px; 
font-weight:500;
margin-bottom: 0px;
margin-left: 141px;
margin-right: 0px;
margin-top: -30px;
padding-bottom: 0px;
padding-left: 4px;
padding-right: 2px;
padding-top: 2px;
position: absolute;
text-align: left;
text-decoration: none;
}
.Tipo{ 
color:#ffffff; 
background-color:#ff0000;
font-family: Franklin Gothic Medium, sans-serif;
font-size:18px; 
font-weight:500;
margin-bottom: 0px;
margin-left: 19px;
margin-right: 0px;
margin-top: -30px;
padding-bottom: 0px;
padding-left: 1px;
padding-right: 3px;
padding-top: 2px;
position: absolute;
text-align: left;
text-decoration: none;
}

</style> 
</head> 
<body> 
<div class="Qualidade">
TEXTO1
</div>
<div class="Tipo">
TEXTO2
</div>
</body> 







 


 


PS: Desculpem por algum erro ou alguma burrice minha em ambos os codes, tem exatamente 7h que comecei aprender sobre CSS e derivados hehe


 


 


Bom voltando ao  que estou querendo fazer.. um detalhe que eu gostaria também é alem do "box" aparecer contendo as informações gostaria de fazer com que ele apareça no lado que tiver mais espaço..


 


Exemplo:


Se a imagem estiver muito perto da barra da esquerda da tela o "Box/Bubble..." aparece na direita, e caso a imagem estiver perto da direita ele aparece na esquerda... idem para cima e baixo.


 


.. é acho que  é isso rs, não estou pedindo que alguém faça isso para mim e me entregue de bandeja  (se puder eu n acho ruim não em k) mas se puder me dar uma luz e orientações de como fazer já estará me ajudando e MUITO ;D



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					






					
				
					
					
					







	

	

		

			
Giihh
			  

	
		
	
			 6
	
		
	

		

		

			


	
		Giihh
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Tente colocar em uma div a imagem e com uma classe chamada "item" por exemplo


e em outra div coloque o conteudo bubble (titulo, descrição etc)


 


utilize as propriedade display none (ocultar) , display: block (exibir) e hover (ao passar o mouse)


 


exemplo simples:


 


http://jsfiddle.net/54Mrr/



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Boggler
			  

	
		
	
			 0
	
		
	

		

		

			


	
		Boggler
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			



Tente colocar em uma div a imagem e com uma classe chamada "item" por exemplo


e em outra div coloque o conteudo bubble (titulo, descrição etc)


 


utilize as propriedade display none (ocultar) , display: block (exibir) e hover (ao passar o mouse)


 


exemplo simples:


 


http://jsfiddle.net/54Mrr/




Bom as propriedades do display eu já sabia o meu problema é que não sei como executar, eu estou me perdendo na hora de colocar o Bubble pra quando o mouse passe em cima da imagem.. eu me perco na hora de unir os 2 códigos teria como me especificar um pouquinho mais? rs 



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Giihh
			  

	
		
	
			 6
	
		
	

		

		

			


	
		Giihh
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

<div class="item">
<img src="aqui vai o endereço da imagem">

<div class="bubble">
<p class="FundoCima">
 -
</p>
<p class="Titulo">
TEXTO
</p>
<p class="Info">
TEXTO
</p>
<p class="Desc">
DESCRIÇÃO
</p>
</div> <!-- fecha div da classe bubble -->
</div> <!--fecha div da classe item-->




Tenho que aprender muita coisa do css ainda, sei o basico também, mas seria algo mais ou menos assim


 


no css da class bubble voce coloca display: none pra esconder ele


 


e no css da class item você faria algo mais ou menos assim:


.item:hover .bubble{
    display: block;
}



que quer dizer ao passar o mouse na div que esta com a classe item ira exibir a div que tem a classe bubble



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
			
			



		

	


	
	

	

	







	

		
			
				Ir para a lista de tópicos
				Desenvolvimento frontend
			
		
	

	




	

	

	




						


	

		
	


					

					

	

		
        


	

		
    
			
				
					
					
  • 
				
					
					
  • 
				
					
					
  • 
				
			
		

	


		
            
			

	

		
		

			

				
			

		

	



		
	


					

				

			

			
		

		
		


	×
	

		

			

			

				
			


			
		

	



		

	































	
















		
			
		
		
		
		







	




	







	

		

			

				
Informação importante

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

			

			

				  Aceito