jQuery core: display a floating image

I have a PHP-script listing up to 20 card game players per page:

I also have photo/avatar-URLs for the most of players and I'd like to display them - as a floating image when the mouse hovers over corresponding link/name. I do not have the dimensions of the photos though.

How could I do it with the means of jQuery core (without plugins) please?

I probably need to create an image holder and hide it first?

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

And then on mouse hover event replace th开发者_如何转开发e img's src attribute and make the #avatar visible? Please help me with the code

Should I store the URL of each photo as an attribute of the corresponding <a href="player_profile.php">player name</a> while generating them by my PHP-script?

And how to deal with situations when the mouse is hovering near the bottom of the web page (i.e. how do place the image best, so that it is visible)

Thank you! Alex

I'm still learning jQuery, but let me take a crack at this.

Let's suppose that there is a div for each player with their info and you want the image to appear when the user moves the mouse over it. Put a custom class and a custom html attribute on the div like so:

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

For each player, you can include something like this in your html code for each row.

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

Your script could look like this (inside your $(document).ready handler

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

That should get you started. You will need to add jQuery code to set the image div's to display in the exact position you want (Either where the mouse pointer is, or a set position in the row).

Hope this helps!

If you do as you said and create the #avatar DIV, hidden, then all you need to do is change the image source and bind the .load() event of the image^† to wait for the image to load, then open it at the desired coordinate (which would probably come from the mouse position in the event). If you need the image to stay with the cursor, a .mouseover() event handler can keep it updated.

** UNTESTED ** (may contain bugs!)

var avatarHolder = $('#avatar');
var avatar = avatarHolder.find('img');

$('.link-name').hover(function(evt) {
    var linkURL = getLinkURL(this);
    avatar.attr('src', linkURL).load(function() {
        avatarHolder.css('left', + evt.pageX + 'px')
                    .css('top', + evt.pageY + 'px')
                    .width(avatar.width())
                    .height(avatar.height())
                    .show();
    });
    if (avatar[0].complete) {
        avatar.load();
    }
}, function() {
    avatar.hide();
}).mouseover(function(evt) {
   avatarHolder.css('left', + evt.pageX + 'px')
               .css('top', + evt.pageY + 'px');
});

NB. If the width/height settings do not work like I have them above, use avatar.attr('width') and avatar.attr('height') instead. getLinkURL() is a placeholder for however you intend to get the avatar image URL from the hovered link.

^† .load() routine does not always fire in some browsers when an image is cached, best to check the images .complete property after binding the load event and call it manually if it is true.