Quantcast
Channel: Últimos conteúdos
Viewing all articles
Browse latest Browse all 14190

Problema ao mudar background de div dinamica com javascript

$
0
0

Boa tarde pessoal!

 

Estou retomando projetos e estudos antigos após muito tempo sem mexer neles... E como sempre precisando de ajuda  ;) ...

Iniciei um projeto onde o mesmo se destina a vender produtos alimenticios... Quero dar bastante interatividade ao visitante quando clicar ou passar o mouse sobre certas áreas do site...

 

Consegui criar um evento onde ao passar o mouse sobre uma determinada área (div) o background de outra área (entenda div) muda... e ao retirar o mouse o background anterior volta... e fiz da seguinte maneira:

<script type="text/javascript">
$(document).ready(function(){
	
	/* ao passar o mouse na div com id="content_tip_menu" executa a função */
	$("#content_tip_menu").mouseover(function(){
		
		/* a função muda o background da div com id="mascot" */	
		$("#mascot").css("background","url(images/pizzaiolo-posicao-b.png)");
		
		     /* ao tirar o mouse da div com id="content_tip_menu" executa a função */
	         $("#content_tip_menu").mouseout(function(){
	     
		            /* a função muda o background da div com id="mascot" */	
		            $("#mascot").css("background","url(images/pizzaiolo-posicao-a.png)");
		 		 
		 });
	
	});
	
});
</script>

O segundo evento "mouseout" não sei se esta correto, pois quero apenas que quando tirar o mouse a área volte ao seu estado anterior... (Não sei se existe uma forma de otimizar isso...).

 

Isso funciona lindamente!!! Com um único problema...  :huh:, só funciona em uma única área com o id estipulado...

 

Ainda estou trabalhando neste layout sem mexer com "BD" e essas áreas (divs) serão carregadas no site de acordo com a quantidade de produtos inseridos...

Exemplo...  digamos que seu tiver 3 produtos inseridos no site, os 3 produtos serão carregados dinamicamente em uma determinada área... e seriam 3 divs com o mesmo id "#content_tip_menu"...

 

Eu copiei esta div e colei algumas vezes para gerar conteúdo enquanto não começo o PHP para testar, e ao passar o mouse sobre a primeira div "#content_tip_menu" o background da outra "#mascot" muda, quando tiro o mouse o background volta, mas só na primeira div e nas outras não acontece nada! :(! . 

 

Vocês sabem o que pode estar errado?


Viewing all articles
Browse latest Browse all 14190