Javascript 如何指定悬停时图像的位置

我有一些代码可以直接在任何超链接上显示图像。不幸的是，如果图像直接填充到光标上，则似乎存在冲突：

您可以看到，该代码可以很好地处理小图像。但大型图像会闪烁。如何使图像停止闪烁。我认为显示图像的位置需要远离超链接

jQuery（文档）.ready（函数（）{
jQuery（“”）.appendTo（“body”）.css（“position”，“absolute”）.css（“z-index”，“1000”）.css（“padding”，“2px”）.css（“backgroundColor”，“#666”）；
jQuery（“a[href^=”http://thepoolscene.com/player-profile“]”。每个（函数（）{
var title=jQuery（this）.attr（“title”）；
title=title.toLowerCase（）；
title=ucwords（title）；
var url=“http://“+window.location.host+”/wp content/gallery/playerphotos/”+escape（title）+“.jpg”；
//var o=jQuery（this.offset（）；
var=这个；
jQuery.ajax({
url:url，
类型：'头'，
错误：函数（）{
log（'不存在：'+url）；
},
成功：函数（）{
//var image_preload=新图像（100,25）；
//image_preload.src=url；
if（jQuery（“#播放器图像悬停”）.find（“img[src='”+url+']”）。length==0）{
jQuery（“#播放器图像悬停”）.append（”；
}
jQuery（that.hover）(
函数（）{
var o=jQuery（this.offset（）；
jQuery（“#播放器图像悬停”）.css（“左”，o.left）.css（“顶”，o.top-222）.css（“显示”，“块”）.find（“img[src=”+url+“]”）.css（“显示”，“块”）；
},
函数（）{
jQuery（“#播放器图像悬停”）.css（“显示”、“无”）.find（“img”）.css（“显示”、“无”）；
}
);
}
});
});
});
功能词（str）{
// http://kevin.vanzonneveld.net
//+原创者：乔纳斯·拉奥尼·索雷斯·席尔瓦(http://www.jsfromhell.com)
//+改进者：瓦尔多·马尔基·席尔瓦
//+错误修复者：Onno Marsman
//+改进者：罗宾
//+输入者：詹姆斯(http://www.james-bell.co.uk/)
//+改进者：凯文·范·佐内维尔德(http://kevin.vanzonneveld.net)
//*示例1:ucwords（“kevin van zonneveld”）；
//*返回1:“凯文·范·佐内维尔德”
//*示例2:ucwords（“HELLO WORLD”）；
//*返回2:“你好，世界”
返回（str+''）.replace（/^（[a-z\u00E0-\u00FC]）|\s+（[a-z\u00E0-\u00FC]）/g，函数（$1）{
返回$1.toUpperCase（）；
});
}

另一种方法是在链接下方显示图像，或者如果仍要在链接上方显示图像：

---

您应该使用javascript检查图像的高度并在正确的位置显示图像（即，您使用

o.top-imageHeight

，而不是top:

o.top-222

）

---

为此，您需要等待图像的

onload

事件，当它完成加载时，您需要获取图像的高度，设置位置并显示它。

我认为这不会发生，因为图像正在加载。在这种情况下，它只会短暂闪烁（图像不会完全显示）。这种闪烁是一致的

我认为，因为较大的图像加载在链接前面，这会干扰浏览器对链接的mousover/mouseout/hover状态的解释，并导致脚本反复触发，隐藏和显示图像

如果你有Photoshop，你可以很容易地测试这个理论。使用颜色模式（CMYK占用的空间比RGB占用的空间比灰度更大）和JPEG压缩，您可以生成文件大小相对较大的物理小图像和文件大小相对较小的物理大图像

---

现在，对于这个问题的解决方案（除了粘贴不阻塞链接的较小图像），我确信有一种方法，但它必须来自比我更熟练的人。我怀疑答案涉及到使用计时器限制脚本触发的频率（尽管这会产生副作用）。

我认为这是因为当您将鼠标悬停在包含图像的链接上时，onmouseout事件会触发该链接并隐藏图像。然后再次触发onmouseover，循环继续

以下插件可能有助于解决此问题。

这会在触发handlerOut之前添加超时。

---

另外，如果您决定添加两种类型的悬停，它还支持事件委派。

谢谢大家的建议。。。其他人为我提供了解决方案：

jQuery(document).ready(function() {

jQuery("<div id='player-image-hover'></div>").appendTo("body").css("position", "absolute").css("z-index", "1000").css("padding", "2px").css("backgroundColor", "#666");
jQuery("#player-image-hover").mouseleave(function() {
    jQuery("#player-image-hover").css("display", "none").find("img").css("display", "none");
});

jQuery("a[href^='http://thepoolscene.com/player-profile']").each(function() {
    var title = jQuery(this).attr("title");
    title = title.toLowerCase();
    title = ucwords(title);
    var url = "http://" + window.location.host + "/wp-content/gallery/playerphotos/" + escape(title) + ".jpg";
    // var o = jQuery(this).offset();
    var that = this;
    jQuery.ajax({
        url: url,
        type: 'HEAD',
        error: function() { 
            console.log('doesnt exist: ' + url);
        },
        success: function() {
            //var image_preload = new Image(100,25); 
            //image_preload.src = url;
            if (jQuery("#player-image-hover").find("img[src='" + url + "']").length == 0) {
                jQuery("#player-image-hover").append("<img src='" + url + "' height='220' style='display:none'>");
            }
            jQuery(that).mouseenter(function() {
                var o = jQuery(this).offset();
                jQuery("#player-image-hover").css("left", o.left).css("top", o.top-222).css("display", "block").find("img[src='" + url + "']").css("display", "block");
            });
        }
    });
});

});

function ucwords (str) {
// http://kevin.vanzonneveld.net
// +   original by: Jonas Raoni Soares Silva (http://www.jsfromhell.com)
// +   improved by: Waldo Malqui Silva
// +   bugfixed by: Onno Marsman
// +   improved by: Robin
// +      input by: James (http://www.james-bell.co.uk/)
// +   improved by: Kevin van Zonneveld (http://kevin.vanzonneveld.net)
// *     example 1: ucwords('kevin van  zonneveld');
// *     returns 1: 'Kevin Van  Zonneveld'
// *     example 2: ucwords('HELLO WORLD');
// *     returns 2: 'HELLO WORLD'
return (str + '').replace(/^([a-z\u00E0-\u00FC])|\s+([a-z\u00E0-\u00FC])/g,           function ($1) {
return $1.toUpperCase();
});
}

jQuery（文档）.ready（函数（）{
jQuery（“”）.appendTo（“body”）.css（“position”，“absolute”）.css（“z-index”，“1000”）.css（“padding”，“2px”）.css（“backgroundColor”，“#666”）；
jQuery（“玩家图像悬停”）.mouseleave（函数（）{
jQuery（“#播放器图像悬停”）.css（“显示”、“无”）.find（“img”）.css（“显示”、“无”）；
});
jQuery（“a[href^=”http://thepoolscene.com/player-profile“]”。每个（函数（）{
var title=jQuery（this）.attr（“title”）；
title=title.toLowerCase（）；
title=ucwords（title）；
var url=“http://“+window.location.host+”/wp content/gallery/playerphotos/”+escape（title）+“.jpg”；
//var o=jQuery（this.offset（）；
var=这个；
jQuery.ajax({
url:url，
类型：'头'，
错误：函数（）{
log（'不存在：'+url）；
},
成功：函数（）{
//var image_preload=新图像（100,25）；
//image_preload.src=url；
if（jQuery（“#播放器图像悬停”）.find（“img[src='”+url+']”）。length==0）{
jQuery（“#播放器图像悬停”）.append（”；
}
jQuery（that.mouseenter）