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