Ir para conteúdo

POWERED BY:

Arquivado

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

Mostarda

[Resolvido] lowsrc e src ao passar o mouse amplia a imagem

Por , em Javascript

Recommended Posts

Holt    1

Holt
Postado

Primeiramente a parte das imagens você pode carregar elas uma vez só, na miniatura é só você redimensiona-la...

Ainda na miniatura defina o evento onmouseover...

Esse evento vai chamar uma função...

Esta função irá pegar a posição do mouse,

e mudar a posição da div que contem a imagem maior conforme a posição do mouse...

depois muda o display da div para block...

e voltando a miniatura defina onmouseout para definir o display da div pra none...

 

Depende do visual que fores definir não precise de uma div...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mostarda    0

Mostarda
Postado

cara eu fiz assim

<html>
<head>
<script type="text/javascript">
function block(event, pegaValor){

var box=document.all?document.all.dom:document.getElementById('dom');
var pegaImagem = "<img src='" + pegaValor + "' />";

box.innerHTML=pegaImagem;

box.style.visibility="visible";

box.style.top=event.clientY+15;
box.style.left=event.clientX+15;
}

function none(){
box=document.all?document.all.dom:document.getElementById('dom');
box.style.visibility="hidden";
box.style.innerHTML="";
}
</script>
</head>
<body>
<div id="dom" style="visibility:hidden;height:auto;position:absolute;border:1px solid #666;background:#333;color:#fff;text-align:center;"></div>

<img src="http://lacomunidad.elpais.com/blogfiles/tudo/google.jpg"'>http://t3.gstatic.com/images?q=tbn:NVUHZdbsTCep-M:http://lacomunidad.elpais.com/blogfiles/tudo/google.jpg" onmouseout="none();" lowsrc="http://lacomunidad.elpais.com/blogfiles/tudo/google.jpg" onmousemove="block(event, this.lowsrc);">
</body>
</html>
soh que fica bugado no IE tipo cada mechida no mouse ele fica reabrindo a imagem

tem como arruma isso?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Holt    1

Holt
Postado 

<html>
<head>
<script type="text/javascript">
function block(event, pegaValor){

var box=document.all?document.all.dom:document.getElementById('dom');
var pegaImagem = "<img src='" + pegaValor + "' />";

box.innerHTML=pegaImagem;

box.style.visibility="visible";

box.style.top=event.clientY+15;
box.style.left=event.clientX+15;
}

function none(){
box=document.all?document.all.dom:document.getElementById('dom');
box.style.visibility="hidden";
box.style.innerHTML="";
}
</script>
</head>
<body>
<div id="dom" style="visibility:hidden;height:auto;position:absolute;border:1px solid #666;background:#333;color:#fff;text-align:center;"></div>

<img src="http://lacomunidad.elpais.com/blogfiles/tudo/google.jpg"'>http://t3.gstatic.com/images?q=tbn:NVUHZdbsTCep-M:http://lacomunidad.elpais.com/blogfiles/tudo/google.jpg" onmouseout="none();" lowsrc="http://lacomunidad.elpais.com/blogfiles/tudo/google.jpg" onmouseover="block(event, this.lowsrc);"
onmousemove="box.style.top=event.clientY+15;box.style.left=event.clientX+15;
">
</body>
</html>

Mudei o onmousemove pra onmouseover...

e mudei pra no onmousemove redefinir apenas a posição e não o visibility

espero que seja assim que queres...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mostarda    0

Mostarda
Postado

cara quase deu certo tipo quando abre a pagina na primeira passada de mouse no Firefox a imagem trava se repassa ela acompanha, ja no IE a primeira passada de mouse ele da erro no script soh q a segunda fica perfeita tipo nao querendo abusa mais tu tem alguma ideia pra corrigi o bug?

vlw mesmo pela ajuda abrs

Compartilhar este post

Link para o post
Compartilhar em outros sites

Holt    1

Holt
Postado

Tou pensando quando testei percebi isso...

Vou tentar achar o "pobrema" ainda hoje dai posto...

No GC acontece a mesma coisa que no IE deve ser algum errinho mesmo...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Holt    1

Holt
Postado 

<html>

<head>

<script type="text/javascript">

function block(event, pegaValor){

 

var box=document.all?document.all.dom:document.getElementById('dom');

var pegaImagem = "<img src='" + pegaValor + "' />";

 

box.innerHTML=pegaImagem;

 

box.style.visibility="visible";

 

}

 

function none(){

box=document.all?document.all.dom:document.getElementById('dom');

box.style.visibility="hidden";

box.style.innerHTML="";

}

</script>

</head>

<body>

<div id="dom" style="visibility:hidden;height:auto;position:absolute;border:1px solid #666;background:#333;color:#fff;text-align:center;"></div>

 

<img src="http://lacomunidad.elpais.com/blogfiles/tudo/google.jpg"'>http://t3.gstatic.com/images?q=tbn:NVUHZdbsTCep-M:http://lacomunidad.elpais.com/blogfiles/tudo/google.jpg" onmouseout="none();" lowsrc="http://lacomunidad.elpais.com/blogfiles/tudo/google.jpg" onmouseover="block(event, this.lowsrc);"

onmousemove="box.style.top=event.clientY+15;box.style.left=event.clientX+15;

">

</body>

</html>

Parece ter funcionado... Testa no FF no GC e no IE funcionou...

Compartilhar este post

Link para o post
Compartilhar em outros sites

Mostarda    0

Mostarda
Postado

cara fico mt bom vlw mesmo mais me esplica uma coisa to textando o script no IETester pq quando eu executo o script por la ele diz assim "linha 26 Error 'box' nao esta definido", dai aparece a opção de escolha se queh continua ou nao se coloca em sim ele executa perfeitamente, mais pq ocorre esse erro e se eh possivel retiralo.

e outra vez vlwwwwwwwwww mesmoo, nem sei como agradece vlw

Compartilhar este post

Link para o post
Compartilhar em outros sites

Holt    1

Holt
Postado

a variavel box esta setada dentro da function block e none então ela é local para estas...

Tem que tornar a variavel box como global e não como local...

Javascript - Âmbito das variaveis

Compartilhar este post

Link para o post
Compartilhar em outros sites

Holt    1

Holt
Postado 




<html>



<head>



<script type="text/javascript">



function block(event, pegaValor){


 



var box=document.all?document.all.dom:document.getElementById('dom');



var pegaImagem = "<img src='" + pegaValor + "' />";


 



box.innerHTML=pegaImagem;


 



box.style.visibility="visible";


 



}


 



function none(){



var box=document.all?document.all.dom:document.getElementById('dom');



box.style.visibility="hidden";



box.style.innerHTML="";



}


 



function move(){



var box=document.all?document.all.dom:document.getElementById('dom');



box.style.top=event.clientY+15;box.style.left=event.clientX+15;



}



</script>



</head>



<body>



<div id="dom" style="visibility:hidden;height:auto;position:absolute;border:1px solid #666;background:#333;color:#fff;text-align:center;"></div>


 



<img src="http://lacomunidad.elpais.com/blogfiles/tudo/google.jpg"'>http://t3.gstatic.com/images?q=tbn:NVUHZdbsTCep-M:http://lacomunidad.elpais.com/blogfiles/tudo/google.jpg" onmouseout="none();" lowsrc="http://lacomunidad.elpais.com/blogfiles/tudo/google.jpg" onmouseover="block(event, this.lowsrc);"



onmousemove="move()">



</body>



</html>







Não defini como global, mas criei uma box dentro da function move também...



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					






					
				
					
					
					






					
				
					
					
					







	

	

		

			
Mostarda
			  

	
		
	
			 0
	
		
	

		

		

			


	
		Mostarda
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

galera desculpa reabri o topico mais infelizmente to tetando arruma esse codigo q o Holt fez no firefox porem ele esta bugando


alguem sabe a solução para este codigo




<html>
<head>
<script type="text/javascript">
function block(event, pegaValor){

var box=document.all?document.all.dom:document.getElementById('dom');
var pegaImagem = "<img src='" + pegaValor + "' />";

box.innerHTML=pegaImagem;

box.style.visibility="visible";

}

function none(){
var box=document.all?document.all.dom:document.getElementById('dom');
box.style.visibility="hidden";
box.style.innerHTML="";
}

function move(){
var box=document.all?document.all.dom:document.getElementById('dom');
box.style.top=event.clientY+15;box.style.left=event.clientX+15;
}
</script>
</head>
<body>
<div id="dom" style="visibility:hidden;height:auto;position:absolute;border:1px solid #666;background:#333;color:#fff;text-align:center;"></div>

<img src="http://lacomunidad.elpais.com/blogfiles/tudo/google.jpg"'>http://t3.gstatic.com/images?q=tbn:NVUHZdbsTCep-M:http://lacomunidad.elpais.com/blogfiles/tudo/google.jpg" onmouseout="none();" lowsrc="http://lacomunidad.elpais.com/blogfiles/tudo/google.jpg" onmouseover="block(event, this.lowsrc);"
onmousemove="move()">
</body>
</html>


vlw abrs



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					







	

	

		

			
William Bruno
			  

	
		
	
			 1501
	
		
	

		

		

			


	
		William Bruno
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			

Simplificando:




<html>
<head>
<script type="text/javascript">
function block( pegaValor )
{
	var box = document.getElementById('dom');
	var pegaImagem = "<img src='" + pegaValor + "' />";

	box.innerHTML=pegaImagem;

	box.style.visibility="visible";
}

function none()
{
	var box = document.getElementById('dom');
	box.style.visibility="hidden";
	box.style.innerHTML="";
}

function move( event )
{
	var box = document.getElementById('dom');
	box.style.top = event.clientY+15+'px';
	box.style.left = event.clientX+15+'px';
}
</script>
</head>
<body>
	<div id="dom" style="visibility:hidden;height:auto;position:absolute;border:1px solid #666;background:#333;color:#fff;text-align:center;"></div>

	<img src="http://lacomunidad.elpais.com/blogfiles/tudo/google.jpg"'>http://t3.gstatic.com/images?q=tbn:NVUHZdbsTCep-M:http://lacomunidad.elpais.com/blogfiles/tudo/google.jpg" onmouseout="none();" lowsrc="http://lacomunidad.elpais.com/blogfiles/tudo/google.jpg" onmouseover="block( this.lowsrc );" onmousemove="move( event )" />
</body>
</html>



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
Compartilhar este post

			

			
Link para o post

			
			
			

			
				
Compartilhar em outros sites

				

	

			
		

	



	



					
				
					
					
					






					
				
					
					
					







	

	

		

			
William Bruno
			  

	
		
	
			 1501
	
		
	

		

		

			


	
		William Bruno
	

		

	

	
	

		



	

	

		

			
		


		

			Postado 
			
				
				
			
		

	


	


	

		
		

			



<html>



<head>



<script type="text/javascript">



function block( pegaValor )



{



	var box = document.getElementById('dom');



	var pegaImagem = "<img src='" + pegaValor + "' />";


 



	box.innerHTML=pegaImagem;


 



	box.style.visibility="visible";



}


 



function none()



{



	var box = document.getElementById('dom');



	box.style.visibility="hidden";



	box.style.innerHTML="";



}


 



function move( event )



{



	var box = document.getElementById('dom');



	box.style.top = event.clientY+15+'px';



	box.style.left = event.clientX+15+'px';



}



</script>



</head>



<body>



	<div id="dom" style="visibility:hidden;height:auto;position:absolute;border:1px solid #666;background:#333;color:#fff;text-align:center;"></div>


 



	<a href="http://lacomunidad.elpais.com/blogfiles/tudo/google.jpg" onmouseout="none();" onmouseover="block( this.href );" onmousemove="move( event )">Link</a>



</body>



</html>



			
		


		

			
				
					

	
	
		

			
				
				

					
				

			
			
			
		

	


				
			
			
    
				
					
					
					
				
				
  • 
					
				
    • 
			

		


		
			

		
	


	

		

			
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