Question

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 the 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

Answer 1

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!