jQuery 核心 : display a floating image

Question

我有a PHP-script每页最多列出 20 名纸牌游戏玩家:

我还为大多数玩家提供了照片/头像 URL，我想将它们显示为当鼠标悬停在相应链接/名称上时作为 float 图像。不过我没有照片的尺寸。

请问我如何使用 jQuery 核心(无需插件)来做到这一点？

我可能需要创建一个图像支架并先隐藏它？

$('body').append('<div id="avatar"><img src="no_avatar.gif"</div>').hide();

然后在鼠标悬停事件中替换 img 的 src 属性并使#avatar 可见？请帮我编写代码

我是否应该将每张照片的 URL 存储为相应照片的属性 <a href="player_profile.php">player name</a>通过我的 PHP 脚本生成它们？

以及如何处理鼠标悬停在网页底部附近的情况(即如何最好地放置图像，使其可见)

谢谢!亚历克斯

Answer 1

我仍在学习 jQuery，但让我尝试一下。

假设每个玩家都有一个包含其信息的 div，并且您希望当用户将鼠标移到其上方时显示图像。将自定义类和自定义 html 属性放在 div 上，如下所示:

<div class='.playerDiv' data-PlayerId='PLAYERID' > ... </div>

对于每个玩家，您可以在每行的 html 代码中包含类似的内容。

<div id='image_[PLAYERID]' style='display:none; position:absolute' >
    <img src='[PATH TO YOUR IMAGE]' />
</div>

您的脚本可能如下所示(在您的 $(document).ready 处理程序中

$('.playerDiv').each( function() {
    var id = this.attr('data-PlayerId');
     .hover( function() {
        $('#image_' + id).show(); },
             function() {
        $('#image_' + id).hide(); });
    });

这应该可以帮助你开始。您需要添加 jQuery 代码来将图像 div 设置为显示在您想要的确切位置(鼠标指针所在的位置，或者行中的设定位置)。

希望这有帮助!