Foros del Web » Programando para Internet » Javascript »

Problemas con eventos onMouseOver y onMouseOut

Estas en el tema de Problemas con eventos onMouseOver y onMouseOut en el foro de Javascript en Foros del Web. Bueno el problema que tengo con estos dos eventos pues . que me e dado cuenta que estos eventos se ejecutan cuando pasan por cualquier ...
  #1 (permalink)  
Antiguo 24/02/2007, 01:48
 
Fecha de Ingreso: febrero-2007
Mensajes: 2
Antigüedad: 17 años, 2 meses
Puntos: 0
Problemas con eventos onMouseOver y onMouseOut

Bueno el problema que tengo con estos dos eventos pues . que me e dado cuenta que estos eventos se ejecutan cuando pasan por cualquier elemento que estee dentro de ellos ejemplo.


si yo tengo una tabla por ejemplo.


<table border="1" cellspacing="0" cellpadding="0"
onMouseOver="alert('estoy adentro ')" onMouseOut="alert('estoy afuera')" >

<tr>
<td ><a href="menu1.html" >Menu 1</a></td>
</tr>
<tr>
<td><a href="link1.html">Link 1</a></td>
</tr>
<tr>
<td><a href="link1.html">Link 2</a></td>
</tr>
<tr>
<td><a href="link1.html">Link 3</a></td>
</tr>
</table>

Estos dos eventos estan ejecutandoce dentro de la tabla no respetan si salen de ella o entran.
ya que no les importa eso solo se ejecutan una y otra vez adentro de la tabla .
esto lo pueden ver cuando le mandan un mensaje con el alert porque de otra manera no se podria apresiar este comportamiento. no se como se podria evitar esto que solo se ejecute una vez el evento onMouseOver y el evento onMouseOut. mandando el mensaje del alert..


pues esto lo nesecito para algo muy especial. y pues no quiero que pase esto que explique.

no habria problemas si quiero hacer algo simple como cuando pasa por ensima cambie el color de fondo de la tabla o cuando sale pues vuelva el mismo color.

porque esto es estatico si efectos y estos compartamientos de arriba no le afectan en nada porque los cambios son inmediatos.


pero que pasa si es que quiero por ejemplo que cuando entre el mouse a la tabla pues apareca otra tabla con un efecto de se le ahumento el ancho poco a poco , usando un setTimeout por ejemplo. ahi es cuando se tiene el problema. como los dos eventos se ejecutan varias vecen dentro de la tabla pues los efectos de la nueva tabla con setTimeout pues se vuelven locos.

Pido ayuda , en este caso no se si alguien le habra pasado esto cosa que haci me pueden echar la mano en esto. porque la verdad ya agote todas mis posibilidades de seguir avanzando con lo que tengo que hacer.
  #2 (permalink)  
Antiguo 24/02/2007, 11:16
Avatar de locojars  
Fecha de Ingreso: mayo-2002
Mensajes: 265
Antigüedad: 22 años
Puntos: 4
Re: Problemas con eventos onMouseOver y onMouseOut

Los eventos si estan funcionando bien, lo que pasa es que cuando tu te pones sobre la tabla te da un alert, en el momento en que tu te sales para presionar el aceptar sobre el alert, ahi se ejecuta el MouseOut, por eso da la impresion que se ejecutan los 2 seguidos, pero en realidad si se estan ejecutando separadamente, supongo que esa es tu duda.

Ahora bien, lo ideal seria que hicieras funciones para hacer pruebas por ejemplo, crear un capa que este visible al ponerse sobre la tabla e invisible al salirse, de esta forma vas a verificar bien si los eventos estan trabajando como tu quieres.

Espero te sirva mi comentario.
Salu2,
Jars.
__________________
No le digas a Jehová que tan grande es tu problema, dile a tu problema cuan grande es Jehová.
  #3 (permalink)  
Antiguo 24/02/2007, 13:23
Avatar de juanca2626  
Fecha de Ingreso: junio-2004
Ubicación: Lima-Peru
Mensajes: 67
Antigüedad: 19 años, 10 meses
Puntos: 0
Re: Problemas con eventos onMouseOver y onMouseOut

Gracias por responder locojars.
Si tu dices que los eventos estan funcionando bien. entonces me podrias explicar porque este codigo que pondre no funciona como debe de ser
__________________________________________________ _______________
<html>
<HEAD>
<script language="JavaScript">
var ancho3=0;

function efecto2() {

document.all.tabla.style.width=ancho3 + "px";
if(document.all.tabla.style.width == "160px"){
ancho3=0;
}else{
ancho3 = ancho3 + 10 ;
setTimeout("efecto2()",1);
}
}

function salir() {
document.all.tabla.style.width = 0
sw=0;
}

</script>
</HEAD>
<BODY >

<table id="tabla" width="0" align="center" border="1" cellspacing="0" cellpadding="0" onMouseOver="efecto2()" onMouseOut="salir()" >
<tr>
<td ><a href="menu1.html" >Menu 1</a></td>
</tr>
<tr>
<td><a href="link1.html">Link 1</a></td>
</tr>
<tr>
<td><a href="link1.html">Link 2</a></td>
</tr>
<tr>
<td><a href="link1.html">Link 3</a></td>
</tr>
<tr>
<td><a href="link1.html">Link 4</a></td>
</tr>
<tr>
<td><a href="link1.html">Link 5</a></td>
</tr>
</table>

</body>
</html>

--------------------------------------------------------------------------

Esto debe de funcionar de esta manera :
1 - Cuando paso el mouse por ensima de la tabla se debe de ejecuta el evento onMouseOver una solo vez . osea debe de llamar a la funcion efecto2() este hace que el ancho de la tabla cresca poco a poco con setTimeout que se ejecutara hasta que su ancho sea 160px . y despues cuando salga de la tabla pues se debe de ejecuta el evento onMouseOut que llamara a la funcion salir() que lo que ara es pues poner el ancho de la tabla en 0 y nada eso seria todo .

Si tu dices que los eventos se estan ejecutando bien entonces no deberia ejecutarce los dos eventos a la vez cuando paseo con el mouse por los links de la tabla. este comportamniento no lo vees hasta que usas un alert ahi te das cuenta que los dos eventos estan que se ejecutan a la vez cuando pasas por cada fila . te das cuenta de esto si el alert usando pues el codigo que e escrito arriba.
pues veras que se agranda el ancho y achica el ancho a cada rato . causando un efecto feo que no quiero que pase..

No se como podria solucionar esto.
Si alguien me da la mano se lo agradeceria bastante. se que aqui hay gente capas de ayudarme . gracias
  #4 (permalink)  
Antiguo 24/02/2007, 13:38
 
Fecha de Ingreso: agosto-2004
Mensajes: 157
Antigüedad: 19 años, 8 meses
Puntos: 5
Re: Problemas con eventos onMouseOver y onMouseOut

Hola JuanManuel2006 y locojars.

El problema está en que el eventos onmouseout se dispara cuando sale del elemento table, es decir, sí colocamos el cursor sobre un elemento td se dispara ya que no está sobre table sino sobre td aunque este dentro de la jerarquía de table.

En este enlace te explica muy bien como trabajar con eventos y hay un ejemplo, en particular de los eventos onmouseover y onmouseout que responde a tu pregunta.

Salu2
  #5 (permalink)  
Antiguo 24/02/2007, 23:17
 
Fecha de Ingreso: febrero-2007
Mensajes: 2
Antigüedad: 17 años, 2 meses
Puntos: 0
Re: Problemas con eventos onMouseOver y onMouseOut

Gracias amigo kepawe lei todo lo que estaba en ese link y resolvi todos mis problemas . con esto del los eventos , no esta equivocado cuando decia que estos eventos se disparaban acada rato ya que se propagan por todo el documento que los incluye.

Bien no sabes cuanto me has ayuda con este aporte tuyo te lo agradesco deberas . muchas gracias
  #6 (permalink)  
Antiguo 25/02/2007, 08:35
 
Fecha de Ingreso: agosto-2004
Mensajes: 157
Antigüedad: 19 años, 8 meses
Puntos: 5
Re: Problemas con eventos onMouseOver y onMouseOut

De nada.
Me alegro de haberte servido de ayuda.
Hasta otra nueva.
Salu2.
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:10.