Problema con iconos al pasar el ratón en mi página

Borjasol · 29 Jul 2013

Llevo un buen rato dándole vueltas a una tontería.

El caso es el siguiente, en mi página www.borjasol.com, que estoy reconstruyendo desde 0, acabo de crear a la derecha unos iconos que, al pasar encima de los mismos, se abren con algún que otro efecto y se deberían cerrar al salir. El caso es que, como podeis comprobar, a veces, no se por qué razón, no se cierran.

¿Alguien me puede ayudar a resolver este acertijo?. 4 ojos ven más que 2 :witless:.

¡Gracias de antemano!

aconrado · 29 Jul 2013

Pues mira, yo lo que noto es que a veces el "onmouseover" se ejecuta mas de la cuenta, una vez cuando haces 'over' al div colapsado, y otra cuando, al ampliarse el div, se hace 'over' a la parte descolapsada del div.

No sé si efectivamente sea esto lo que está causando el problema, pero una solución sería mover el "onmouseover" a la etiqueta de imagen. Y luego, en el metodo del onmouseover, checar si el elemento actual es igual al anterior, entonces no hacer nada.

Borjasol · 31 Jul 2013

aconrado dijo:
Pues mira, yo lo que noto es que a veces el "onmouseover" se ejecuta mas de la cuenta, una vez cuando haces 'over' al div colapsado, y otra cuando, al ampliarse el div, se hace 'over' a la parte descolapsada del div.

No sé si efectivamente sea esto lo que está causando el problema, pero una solución sería mover el "onmouseover" a la etiqueta de imagen. Y luego, en el metodo del onmouseover, checar si el elemento actual es igual al anterior, entonces no hacer nada.

Sigue sin ir.

Pensé que ya iba perfecto tras hacer un cambio (hice que, a la hora de seleccionar otro menú, cerrase el abierto, ya que donde daba más problemas era al pasar de un menú a otro) pero, viéndolo en el queridísimo explorer no va en absoluto. ¡Un caos!.

aconrado · 2013-08-01T13:50:24-0500

A ver, primero que nada, ¿probaste lo que te recomendé?

Tal vez no me entendiste. Para ser mas claros, lo que propongo es que en la función opop, en lugar de llamar incondicionalmente a clop, cheques si el elemento actual "elem" es diferente al elemento anterior "elmant". Si son diferentes, pues ya llamas a clop. De hecho, lo ideal sería que si son iguales (o sea, el evento se disparó dos veces seguidas en el mismo elemento) entonces regrese la función, de preferencia false, pero con un return sería suficiente, así no se ejecuta código innecesario.

Ahora bien, otro refinamiento, que también comenté en mi post anterior, es que cambies el onmouseover a la imagen en sí. Entonces... en la funcion opop, para conseguir el div, tendrías que llamar al metodo getParent() del elemento original (que es la etiqueta img). Entonces, al sustituir el innerHTML con el span conteniendo una imagen (la cual ya no tendría el onmouseover), sólo se podría volver a invocar opop en caso de que el usuario pasara el mouse sobre alguna de las otras tres imágenes de las otras opciones.

Espero te sirva la explicación. No te rindas, eso de la compatibilidad entre navegadores es complicado. Por eso muchos usan frameworks ya mas probados. Pero me parece muy bien que hagas todo desde abajo, así se aprende muy bien, y es muy gratificante cuando se obtiene lo que uno quiere.

Borjasol · 2013-08-02T09:04:56-0500

aconrado dijo:
A ver, primero que nada, ¿probaste lo que te recomendé?

Tal vez no me entendiste. Para ser mas claros, lo que propongo es que en la función opop, en lugar de llamar incondicionalmente a clop, cheques si el elemento actual "elem" es diferente al elemento anterior "elmant". Si son diferentes, pues ya llamas a clop. De hecho, lo ideal sería que si son iguales (o sea, el evento se disparó dos veces seguidas en el mismo elemento) entonces regrese la función, de preferencia false, pero con un return sería suficiente, así no se ejecuta código innecesario.

Ahora bien, otro refinamiento, que también comenté en mi post anterior, es que cambies el onmouseover a la imagen en sí. Entonces... en la funcion opop, para conseguir el div, tendrías que llamar al metodo getParent() del elemento original (que es la etiqueta img). Entonces, al sustituir el innerHTML con el span conteniendo una imagen (la cual ya no tendría el onmouseover), sólo se podría volver a invocar opop en caso de que el usuario pasara el mouse sobre alguna de las otras tres imágenes de las otras opciones.

Espero te sirva la explicación. No te rindas, eso de la compatibilidad entre navegadores es complicado. Por eso muchos usan frameworks ya mas probados. Pero me parece muy bien que hagas todo desde abajo, así se aprende muy bien, y es muy gratificante cuando se obtiene lo que uno quiere.

Gracias por la ayuda aunque, a pesar de todo, al final opté por cambiar de sistema.

Al final decidí ocultar el texto en vez de crearlo con innerHTML y, a partir de ahí, arreglar el código para cambiar de imagen y desvelar el texto al tener el ratón encima. También cambié los onmouseover a las imágenes, como bien decías, y los onmouseout al span que agrupa ahora los elementos.

Te agradezco la ayuda porque me valió, principalmente, para ver los errores que había cometido. El único problema que me quedaba era el tener que pasar antes por otra imagen para volver a poder abrir el elemento cerrado, por eso decidí cambiar el código.

¡Un saludo!

aconrado · 2013-08-03T20:26:47-0500

:O Sí, también muy buena solución lo de ocultar el texto. La propiedad innerHTML es muy útil, pero a veces la sobre usamos. Creo que eso de ocultar el texto es mejor.

Me alegro que ya quedó el asunto. Saludos.

Problema con iconos al pasar el ratón en mi página

Borjasol

aconrado

Borjasol

aconrado

Borjasol

aconrado

Temas similares