Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Mouseover - Parpadeo - ¿Propagación de eventos?

Estas en el tema de Mouseover - Parpadeo - ¿Propagación de eventos? en el foro de Frameworks JS en Foros del Web. Hola a todos. Estoy montando una Web y tengo montado un sistema de Rollover para unas imágenes. Todo funciona perfectamente, el rollover también, pero estas ...
  #1 (permalink)  
Antiguo 24/09/2010, 06:19
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 8 meses
Puntos: 10
Mouseover - Parpadeo - ¿Propagación de eventos?

Hola a todos.

Estoy montando una Web y tengo montado un sistema de Rollover para unas imágenes.

Todo funciona perfectamente, el rollover también, pero estas imágenes que muestro están por encima de un texto, y al mover el ratón hacia dicha imagen, la imagen parpadea...

No se si tiene que ver con la propagación de Eventos o no... pero creo que si... ¿alguien puede echarme una mano?

Aquí el ejemplo: http://www.tucomuni.com/miimagen_javi/

(Si veis cosas mal o falla algo, es que estoy haciendo cambios y prosiguiendo con el desarrollo).

La función de rollover mediante JQUERY es esta:
Código:
jQuery(document).ready(function(){
     jQuery(".thumbs li").each (function () {
        jQuery(this).hover (
            // MOUSE OVER
            function () {
                var objImage = jQuery(this).find("img")
                // Define real position object
                var posicionReal = jQuery(objImage).offset();
                var objectTop = parseInt(posicionReal.top);
                var objectLeft = parseInt(posicionReal.left);
                
                // Get image thumb imensions
                var imageWidth = parseInt(jQuery(objImage).width());
                var imageHeight = parseInt(jQuery(objImage).height());
                
                // Ger zoomer with an height (is defined on LI class)
                if (jQuery(this).attr("class").match(/\zoomer/))
                {
                    var zoomerDimensions = jQuery(this).attr("class").split("[");
                    zoomerDimensions = zoomerDimensions[1];
                    zoomerDimensions = zoomerDimensions.split("]");
                    zoomerDimensions = zoomerDimensions[0];
                    zoomerOptions = zoomerDimensions.split(";")
                    var zoomerWidth = zoomerOptions[0].split("width:");
                    zoomerWidth = parseInt(zoomerWidth[1]);
                    
                    var zoomerHeight = zoomerOptions[1].split("height:");
                    zoomerHeight = parseInt(zoomerHeight[1]);
                    
                    var zoomerURL = zoomerOptions[2].split("url:");
                    zoomerURL = zoomerURL[1];
                    
                    var idObject = zoomerOptions[3].split("idObject:");
                    idObject = idObject[1];
                    
                    var zoomerTop = objectTop - parseInt(zoomerHeight / 2);
                    var zoomerLeft = objectLeft - parseInt(zoomerWidth / 2);
                    
                    // Set top an left
                    jQuery("#zoomer").css("top", zoomerTop + "px");
                    jQuery("#zoomer").css("left", zoomerLeft + "px");
                    
                    // If exists image, delete an renew
                    if (jQuery("#zoomerIMG").length)
                    {
                        jQuery("#zoomerIMG").remove();
                    }
                    
                    // Create image zoomer
                    jQuery("#zoomer").append('<img id="zoomerIMG" class="object_' + idObject + '" src="' + zoomerURL + '" width="' + zoomerWidth + '" height="' + zoomerHeight + '" />');
                
                    jQuery("#zoomerIMG").mouseover(function () {
                        var imageId = jQuery(this).attr("class").split("_");
                        imageId = imageId[1];
    //                    alert ("Objeto actual [" + actualObjectId + "]\nID OVER [" + imageId + "]");
                    });
                    // Show zoomer
                    jQuery("#zoomer").show();
    //                jQuery("#zoomer").dropShadow({left: 8, top: 10, opacity: 0.8, blur: 4});
                }
                else
                {
                    alert ("Es necesario definir la clase zoomer en el LI con las dimensiones de la imagen GRANDE para el rollover");
                }
            }, 
            // MOUSE OUT
            function ()
            {
                jQuery("#zoomer").hide();
//                jQuery(".dropShadow").hide();
            }
        );
    });
    
});
En cada elemento LI está definido en el atributo CLASS los valores de la imagen a cargar (son dinámicos, preparado para el futuro).
La función ubica la posición del objeto, extrae del atributo class ancho, alto y ruta de la imagen a cargar y la muestra

Lo dicho, espero que podáis echarme una mano a mejorar esto.

Un saludo.

Javier

Última edición por el_javi; 24/09/2010 a las 06:26
  #2 (permalink)  
Antiguo 25/09/2010, 05:40
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 8 meses
Puntos: 10
Respuesta: Mouseover - Parpadeo - ¿Propagación de eventos?

Hola a todos compañeros.

He seguido mirando este tema, pero soy incapaz de hacer que el parpadeo de la imagen no me haga este efecto tan feo... por eso, retomo a ver si alguno de vosotros, más experimentados en este panorama Javascript pueda ayudarme.

Sigo creyendo que es algo referido a la propagación de eventos... pero.... no esto del todo seguro.

Muchas gracias y un saludo.

Javier
  #3 (permalink)  
Antiguo 25/09/2010, 11:00
Avatar de zerokilled
Javascripter
 
Fecha de Ingreso: abril-2009
Ubicación: Isla del Encanto, La Borinqueña [+>==]
Mensajes: 8.050
Antigüedad: 15 años, 7 meses
Puntos: 1485
Respuesta: Mouseover - Parpadeo - ¿Propagación de eventos?

solicita a un moderador que mueva tu tema al foro de framework, de seguro ahi puedes recibir mas atencion que aqui. utilice el boton de reportar para solicitarlo.
__________________
la maldad es una virtud humana,
y la espiritualidad es la lucha del hombre contra su maldad.
  #4 (permalink)  
Antiguo 26/09/2010, 08:11
Avatar de JavierB
Colaborador
 
Fecha de Ingreso: febrero-2002
Ubicación: Madrid
Mensajes: 25.052
Antigüedad: 22 años, 10 meses
Puntos: 772
Hola el_javi

Muevo tu tema al foro de Frameworks y Plugins Javascript desde Javascript.

Saludos,
  #5 (permalink)  
Antiguo 26/09/2010, 09:33
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 8 meses
Puntos: 10
Respuesta: Mouseover - Parpadeo - ¿Propagación de eventos?

Muchas gracias JavierB

A ver si alguien me puede echar una mano con este tema.

Un saludo.


Javier
  #6 (permalink)  
Antiguo 01/10/2010, 14:01
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 8 meses
Puntos: 10
Respuesta: Mouseover - Parpadeo - ¿Propagación de eventos?

Hola compys!!!

¿Alguien que haya podido echar un ojo a esto que os comentaba?

Gracias y un saludo!!!

Javier
  #7 (permalink)  
Antiguo 01/10/2010, 17:35
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 16 años, 1 mes
Puntos: 66
Respuesta: Mouseover - Parpadeo - ¿Propagación de eventos?

bueno dando algo de logica creo que tu problema se debe a que la imagen agrandada no esta dentro del .thumb li, que pasa tu defines el evento hover es para el li no para el zoomer, la solucion mas facil sin que tengas que hacer muchas modificaciones es colocar la imagen agrandada dentro del li que la invoca, si no me explique bien preguntame de nuevo y trato de hacerlo de otra forma. saludos.
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #8 (permalink)  
Antiguo 02/10/2010, 02:26
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 8 meses
Puntos: 10
Respuesta: Mouseover - Parpadeo - ¿Propagación de eventos?

Hola tredio gracias por tu comentario.

Y alo pensé y lo probé, pero no puedo meter la imagen agrandada dentro del .thum li porque entonces me aumenta el tamaño del LI cada vez que se hace over, y produce crecidas y "menguadas" de la altura de este elemento, distorisonando el diseño.

A ver si podemos encontrar alguna solución.

Gracias de nuevo.

Javier
  #9 (permalink)  
Antiguo 02/10/2010, 10:08
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 16 años, 1 mes
Puntos: 66
Respuesta: Mouseover - Parpadeo - ¿Propagación de eventos?

coloca position:absolute a la imagen agrandada y no creo que tengas problemas de que se aumente el tamaño del li, prueba y me dices.
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #10 (permalink)  
Antiguo 02/10/2010, 11:35
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 8 meses
Puntos: 10
Respuesta: Mouseover - Parpadeo - ¿Propagación de eventos?

Hola tredio

He tenido que hacer algunas modificaciones, dado que la capa de la imagen agrandada era un elemento HTML puesto externamente y que simplemente movía y ponía encima de la imagen pequeña.

Ahora, lo he hecho dinámicamente, creando el DIV y su imagen agrandada dinámicamente con Jquery y en firefox, Opera, Safari y Chrome funciona correctamente SIN parpadeo.

Pero en todos los IE, no me funciona la creación del objeto y sus clases y estilo.

Lo estoy creando, usando una clase de jquery (jquery.create)

Código:
// Creato Object Zoomer
var o = jQuery.create('div', 
    {
        'id' : 'zoomer', 
        'class': 'zoomer', 
         'style' : 'top:-' + zoomerTop + 'px; ' + 'left:-' + zoomerLeft + 'px;', // Posiciones TOP y LEFT en negativo su ubicación sobre la imagen REAL
    }
);
// Append object o
jQuery(this).append(jQuery(o));
(this hace referencia al LI)

A ver si alguien me puede echar un amando con esta incompatibilidad de creación de objetos en Internet Explorer.

Un saludo y gracias!!

Javier
  #11 (permalink)  
Antiguo 02/10/2010, 12:56
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 16 años, 1 mes
Puntos: 66
Respuesta: Mouseover - Parpadeo - ¿Propagación de eventos?

oye no conocia ese metodo ya le echare un ojo cuando este programando jeje, trata insertando en html de forma directa a ver si funciona en explorer, no te podria dar una razon de por que no esta funcionando en explorer por que nisiquiera conocia esa funcion, trata haciendo asi:

Código Javascript:
Ver original
  1. jQuery(this).append('<div id="zoomer" class="zoomer" style="top:-"+zoomerTop+'px; left:-'+zoomerLeft+'px"'></div>');

otra cosa en vez de poner JQuery que me parece un poco largo puedes poner $, asi $.(this).append(....);
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #12 (permalink)  
Antiguo 02/10/2010, 13:31
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 8 meses
Puntos: 10
Respuesta: Mouseover - Parpadeo - ¿Propagación de eventos?

Hola de nuevo tredio

Gracias por tu ayuda!!

Ha funcionado a la perfección!!!!

lo de usar jQuery en vez de $ es porque leí en su momento que se inyecta mucho código malicioso a partir de la definición general que trae jquery, y que se recomienda que se renombre el objeto para que sea más complicado alterar los sistemas de una Web.

Bueno, pues tema solucionado.

Ahora tengo que revisar, que en Internet Explorer 6 además de que los anchos no cuadran y se desplaza el bloque de la derecha abajo (solo hay una columna no hay 2 en Internet explorer) además de eso, me hace un parpadeo las imágenes y las carga como por segunda vez todas.

Por cierto, tengo 79 imágenes en el documento... Si, se que es una pasada y que es demasiado.
¿sprite de imágenes verdad?

También uso 8 o 9 ficheros de javascript internos del dominio... ¿los uno todos en 1 y los serializo? (elimino espacios y tal)

Esto que comento es para aligerar tiempos de carga y peticiones HTTP.

Si tenéis alguna potra recomendación os estaré muy agradecido.

Gracias de nuevo.

un saludo.

Javier
  #13 (permalink)  
Antiguo 02/10/2010, 14:24
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 16 años, 1 mes
Puntos: 66
Respuesta: Mouseover - Parpadeo - ¿Propagación de eventos?

si necesitas mejorar los tiempos de carga las recomendaciones que dices te van muy bien, dices que tienes 79 imagenes pero eso incluye las imagenes a las que les haces el zoom?, y bueno al usar los sprites te tocara modificarl el css un poco, pero me parece que es lo mejor. saludos.
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D
  #14 (permalink)  
Antiguo 02/10/2010, 15:00
Avatar de el_javi  
Fecha de Ingreso: marzo-2005
Ubicación: MAdrid
Mensajes: 844
Antigüedad: 19 años, 8 meses
Puntos: 10
Respuesta: Mouseover - Parpadeo - ¿Propagación de eventos?

Hola tredio

Cuando digo que tnego 79 imágenes, me refiero estáticas (bordes redondeados, bordes normales, iconos, etc, etc).

Realmente no son tantas, pero se repiten peticiones (repetición de bordes en diferentes listados) y por ello, duplicamos la speticiones http

Haré eso que te comento: sprites y reducción de tamaño de css y js.

Una consulta más: ¿cuál es la mejor manera de montar de cargar un PNG en la página?

Me refiero:
Firefox, Ie7, opera, etc, lo admiten, pero NUEVAMENTE internet explorer 6 no deja cargarlos, así que estoy usando una librería llamada pngfix (de Jquery)

¿alguna mejor solución para ello?

Un saludo.

Javier
  #15 (permalink)  
Antiguo 02/10/2010, 19:44
Avatar de tredio  
Fecha de Ingreso: noviembre-2008
Ubicación: Carabobo
Mensajes: 466
Antigüedad: 16 años, 1 mes
Puntos: 66
Respuesta: Mouseover - Parpadeo - ¿Propagación de eventos?

ok bueno entonces te vienee muy bien el sprite ya que como dices disminuyes la cantidad de peticiones al servidor lo que tambien va a disminuir el tiempo de carga de la pagina, y lo del png tambien suelo hacer asi, usando librerias externas que me permitan visualizar las png bien en ie6, aunque ultimamente no le estoy prestando mucha atencion a explorer, ya va siendo hora de que los usuarios se cambien a un navegador que sirva y no algo que genere tantos conflictos y haga tan dificil las cosas U.u.

saludos.
__________________
Extension Google Chrome
dar las gracias no cuesta nada :D

Etiquetas: eventos, mouseover, parpadeo
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 04:03.