Ir para conteúdo

POWERED BY:

Arquivado

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

Daniel Cabral

[Resolvido] Mudar imagem com onmouseover

Por , em Javascript

Recommended Posts

Daniel Cabral    0

Daniel Cabral
Postado

Bom pessoal, eu estou desenvolvendo um site e estou com um probleminha.

eu tenho um conjunto de imagens e nesse conjunto de imagens quando encosta o mouse em determinada imagem ela muda para outra, quando tira o mouse a imagem anterior volta, até aí tudo bem, pois o comando em javascript está na mesma linha do img, mas infelismente isso não é intuitivo, ou seja o cara só vai saber q a imagem vira quando ele encostar o mouse na imagem, o q eu queria era o seguinte, colocar uma nova linha (li) com a outra imgem menor, quando o usuário encostar o mouse nela a imagem de cima (maior) muda, eu acho q assim ficaria mais ituitivo e o usuário vai querer ver a imagem maior e com certeza vai tentar clicar na imagem menor, mas não vai ser preciso clicar e só encostar o mouse.

galera eu agradeço a quem puder me ajudar.

 

abraço http://forum.imasters.com.br/public/style_emoticons/default/joia.gif ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

exemplo para estudo:




<html>



<head>



<script type="text/javascript">



function id( el ){



	return document.getElementById( el );



}



window.onload = function(){



	var imgs = id('miniaturas').getElementsByTagName('img');



	for( i in imgs ){



		imgs.onclick = function(){



			id('palco').innerHTML = '<img src="'+this.alt+'" alt="" />';



		}



	}



}



</script>



</head>



<body>


 



	<div id="palco">



		<img src="01.jpg" alt="" />



	</div><!-- /palco -->



	<ul id="miniaturas">



		<li><img src="01_p.jpg" alt="01.jpg" /></li>



		<li><img src="02_p.jpg" alt="02.jpg" /></li>



		<li><img src="03_p.jpg" alt="03.jpg" /></li>



	</ul><!-- /miniaturas -->



</body>



</html>



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Daniel Cabral
			  

	
		
	
			 0
	
		
	

		

		

			


	
		Daniel Cabral
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Valeu Wiliam, vou tentar adaptar ao meu código e se tiver alguma dúvida eu posto!


abraço!


 http://forum.imasters.com.br/public/style_emoticons/default/joia.gif  http://forum.imasters.com.br/public/style_emoticons/default/clap.gif


 


Wiliam, obrigado pela resposta, mas eu tive um poblema, deve ser pelo meu conhecimento iniciante de javascript.


 


eu coloquei as imagens como sugerido no código, mas quando eu clico nas miniaturas as imagens deviam aparecer na div palco, mas isso não acontece, onde q eu devo inserir as imagens maiores para aparecerem no palco?


as miniaturas aparecem normal embaixo do palco mas não aparecem depois que eu clico.


segue o código:




<html> 
<head> 
<script type="text/javascript"> 
function id( el ){ 
        return document.getElementById( el ); 
} 
window.onload = function(){ 
        var imgs = id('miniaturas').getElementsByTagName('img'); 
        for( i in imgs ){ 
                imgs[i].onclick = function(){ 
                        id('palco').innerHTML = '<img src="'+this.alt+'" alt="" />'; 
                } 
        } 
} 
</script> 
</head> 
<body> 
 
        <div id="palco"> 
                <img src="1405.jpg" alt="" />
                
        </div><!-- /palco --> 
        <ul id="miniaturas"> 
                <li><img src="1405.jpg" width="50" height="50" alt="01.jpg" /></li> 
                <li><img src="APC-BR1500I.jpg" width="50" height="50" alt="02.jpg" /></li> 
                <li><img src="canudo.jpg" width="50" height="50" alt="03.jpg" /></li> 
        </ul><!-- /miniaturas --> 
</body> 
</html>



abraço



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
William Bruno
			  

	
		
	
			 1501
	
		
	

		

		

			


	
		William Bruno
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

coloque as imagens grandes como o alt das menores:




<li><img src="1405.jpg" width="50" height="50" alt="1405_GRANDE.jpg" /></li>


entendeu ?



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Daniel Cabral
			  

	
		
	
			 0
	
		
	

		

		

			


	
		Daniel Cabral
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

entedi cara!


valeu!


 


Deculpe reabrir o post, mas eu tenho mais um probleminha para ser resolvido.


eu entendi a resposta e consegui colocar no meu código, mas eu consegui fazer com um produto só, eu tenho 5 produtos na minha página e esses 5 produtos precisam se virar, colocando uma imagem pequena embaixo.


segue a imagem da página para esclarecer melhor.


abraço!


 


Imagem Postada


 


Na verdade deveria ser duas imagens pequenas, para alternar entre elas.


E a tag <li> não seria util para colocar as imagens embaixo o melhor seria usar a tag <div>



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
William Bruno
			  

	
		
	
			 1501
	
		
	

		

		

			


	
		William Bruno
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

<li> é uma elemento nivel de bloco, assim como a <div> também é.


 



o código javascript que postei, não está amarrado aquela marcação HTML que fiz.. não entendo a dificuldade...



como você tentou fazer ?



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
Daniel Cabral
			  

	
		
	
			 0
	
		
	

		

		

			


	
		Daniel Cabral
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

a minha dificuldade não seria nem com a li nem com a div, a minha dificuldade é em fazer com que funcione com os outros produtos na mesma página.


 


segue o código q eu tentei fazer:


 




<html> 
<head> 
</head> 
<body> 
<div>
<script type="text/javascript"> 
function id( el ){ 
        return document.getElementById( el ); 
} 
window.onload = function(){ 
        var imgs = id('3044-p').getElementsByTagName('img'); 
        for( i in imgs ){ 
                imgs[i].onmouseover = function(){ 
                        id('3044').innerHTML = '<img src="'+this.alt+'" alt="" />'; 
                } 
        } 
} 
</script> 
<!-- imagem grande -->
<div id="3044"> 
<img src="3044f.jpg" alt="" /> 
</div>
<br>
<!-- /miniaturas -->
<div id="3044-p">
<img src="3044vp.jpg" width="50" height="36" alt="3044v.jpg" /> 
<img src="3044fp.jpg" width="50" height="36" alt="3044f.jpg" />
</div> 
</div>
<div>
<script type="text/javascript"> 
function id( el ){ 
        return document.getElementById( el ); 
} 
window.onload = function(){ 
        var imgs = id('1041-p').getElementsByTagName('img'); 
        for( i in imgs ){ 
                imgs[i].onmouseover = function(){ 
                        id('1041').innerHTML = '<img src="'+this.alt+'" alt="" />'; 
                } 
        } 
} 
</script> 
<!-- imagem grande -->
<div id="1041"> 
<img src="1041f.jpg" alt="" /> 
</div>
<br>
<!-- /miniaturas -->
<div id="1041-p">
<img src="1041vp.jpg" width="50" height="36" alt="1041v.jpg" /> 
<img src="1041fp.jpg" width="50" height="36" alt="1041f.jpg" />
</div> 
</div>
</body> 
</html>



Eu fiz um teste para tentar fazer o 3044 e o 1041 mudarem, mas quando eu faço isso muda apenas o de baixo e~o de cima perde a função javascript.



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
William Bruno
			  

	
		
	
			 1501
	
		
	

		

		

			


	
		William Bruno
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Existe um conceito muito importante em programação que é: Não repita você mesmo! (DRY)


 


veja:




<html> 
<head>
<script type="text/javascript"> 
function id( el ){ 
	return document.getElementById( el ); 
}
function z( id_container ){
	var imgs = id( id_container+'-p' ).getElementsByTagName('img'); 
	for( i in imgs ){ 
		imgs[i].onmouseover = function(){ 
			id( id_container ).innerHTML = '<img src="'+this.alt+'" alt="" />'; 
		}
	}	
}
window.onload = function(){
	z( '3044' );
	z( '1041' );
}
</script>
</head> 
<body> 
	<div>
		<!-- imagem grande -->
		<div id="3044"> 
			<img src="3044f.jpg" alt="" /> 
		</div>
		<br />
		<!-- /miniaturas -->
		<div id="3044-p">
			<img src="3044vp.jpg" width="50" height="36" alt="3044v.jpg" /> 
			<img src="3044fp.jpg" width="50" height="36" alt="3044f.jpg" />
		</div> 
	</div>
	
	<div>
		<!-- imagem grande -->
		<div id="1041"> 
			<img src="1041f.jpg" alt="" /> 
		</div>
		<br />
		<!-- /miniaturas -->
		<div id="1041-p">
			<img src="1041vp.jpg" width="50" height="36" alt="1041v.jpg" /> 
			<img src="1041fp.jpg" width="50" height="36" alt="1041f.jpg" />
		</div>
	</div>
</body> 
</html>
se a função id(), já existia, então não fazia o menor sentido você redeclarar ela.
E se o procedimento é o mesmo, também não faz sentido você escrever o mesmo código mais de uma vez.. então, encapsula numa function, e troca apenas oque varia.


Veja a nova funcao z() que criei.


E então, faço a chamada 2 vezes, dentro de um único window.onload (também é errado ter vários window.onload num mesmo documento, portanto, mantenha um único)




window.onload = function(){
	z( '3044' );
	z( '1041' );
}
 e a beleza está nisso.. se precisar de 5 desses:


window.onload = function(){
	z( '3044' );
	z( '1041' );
	z( '1042' );
	z( '1043' );
	z( '1044' );
}
e só.
O resto continua igual. Contando agora, que a nomenclatura definida para os IDs:


....-p (para miniaturas)


e


.... (para o palco das grandes), se mantenha.. a função funcionará.



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
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