Ir para conteúdo

POWERED BY:

Arquivado

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

Jhonei

[Resolvido] Atribuir mais uma ação ao onmouseover ou onmousemove.

Recommended Posts

Galera estou confuso!!

 

Eu quero que uma função seja chamada quando o mouse passar em sima de um elemento, mas eu não quero um efeito instantâneo!!

 

Gostaria que o onmouseover ou onmousemove só funcionasse se o mouse reamente parar-se em sima do elemento.

 

Mas é ai que eu fico confuso!!

 

ºTenho que utilizar um outro tipo de evento para este caso?

ºTenho que utilizar um alguma condição de duração do mouse sobre o link?

 

o que devo fazer???

 

Este é um exemplo para se basear de como quero usar esse recurso:

<html>
<head>
<script type="text/javascript">
window.onload = function() {
document.getElementById('teste').onmouseover = function(){this.style.display = 'none'};
};
</script>
</head>
<body>
<img id="teste" width="100px" height="100px" src="http://www.fotosimagens.net/wp-content/uploads/2011/08/Paisagem-sol.jpg" />
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara, naquele link possui todos os eventos onmouse possível, por isso indiquei, que pena nenhum deles te serviu :ermm:

Compartilhar este post


Link para o post
Compartilhar em outros sites

neste caso, você tem que definir "qnto tempo" com o mouse parado, é que você vai considerar como "válido"

 

suponhamos que seja 2 segundos. = 2000 milesimos.

Atrase a execução da rotina em 2000ms, usando um setTimeout, ah.. o evento vai ser o mouseover mesmo. Só que com esse "ajuste" para saber se o mouse parou.

 

Lembre-se de zerar o timeout, com um clearTimeout, no evento mouseout, para assim só disparar se o mouse não sair do elemento antes dos 2000ms.

Compartilhar este post


Link para o post
Compartilhar em outros sites

P@trique, agradeço peça força e William Bruno muito obrigado pela dica!!

 

William Bruno, fiz o que disse mas ainda não está funfando!!

Gostaria de saber onde está o erro..

 

<html>
<head>
<script type="text/javascript">
window.onload = function() {
var doc = document.getElementById('teste');
var teste = doc.onmouseover = window.setTimeout(function(){
	doc.style.display = 'none';
	alert('certo');
}, 2000);
doc.onmouseout = window.clearTimeout(teste);	
};
</script>
</head>
<body>
<img id="teste" width="100px" height="100px" src="http://www.fotosimagens.net/wp-content/uploads/2011/08/Paisagem-sol.jpg" />
</body>
</html>

 

Grato pela ajuda!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Deculpe pela grosseria "William Bruno" é porque eu ainda não tenho experiencia com javascript!!

 

Aqui esta o modo pelo que acho, Correto!!

<html>
<head>
<script type="text/javascript">
window.onload = function() {
var doc = document.getElementById('teste');
var teste;
doc.onmouseover = function(){
	teste = setTimeout(function(){doc.style.display = 'none';}, 2000);
}
doc.onmouseout = function(){clearTimeout(teste);};
};
</script>
</head>
<body>
<img id="teste" width="100px" height="100px" src="http://www.fotosimagens.net/wp-content/uploads/2011/08/Paisagem-sol.jpg" />
</body>
</html>

 

Grato pela ajuda!!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ficaria assim:

 

<html>
<head>
<script type="text/javascript">
window.onload = function() {
   var doc = document.getElementById('teste');
   doc.onmouseover = function(){
       var teste;
       teste = setTimeout(function(){
           alert("ficou por 2 segundos...")
       }, 2000);
       doc.onmouseout = function(){
           clearTimeout(teste);
       };
   }
};
</script>
</head>
<body>
<img id="teste" width="100px" height="100px" src="http://www.fotosimagens.net/wp-content/uploads/2011/08/Paisagem-sol.jpg" />
</body>
</html>

 

editado

 

ops... malzis .... tinha testado o anterior... não vi que estava resolvido, malzis.

 

tudo questão de lógica rsrsrsrs nem sequer tinha pensado nisso, anotado aqui.

 

:thumbsup:

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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