jQuery core: display a floating image -

i have a php-script listing 20 card game players per page:

i have photo/avatar-urls of players , i'd display them - floating image when mouse hovers on corresponding link/name. not have dimensions of photos though.

how means of jquery core (without plugins) please?

i need create image holder , hide first?

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

and on mouse hover event replace img's src attribute , make #avatar visible? please me code

should store url of each photo attribute of corresponding <a href="player_profile.php">player name</a> while generating them php-script?

and how deal situations when mouse hovering near bottom of web page (i.e. how place image best, visible)

thank you! alex

i'm still learning jquery, let me take crack @ this.

let's suppose there div each player info , want image appear when user moves mouse on it. put custom class , custom html attribute on div so:

<div class='.playerdiv' data-playerid='playerid' > ... </div> 

for each player, can include in html code each row.

<div id='image_[playerid]' style='display:none; position:absolute' >     <img src='[path image]' /> </div> 

your script (inside $(document).ready handler

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

that should started. need add jquery code set image div's display in exact position want (either mouse pointer is, or set position in row).

hope helps!