jQuery core : afficher une image flottante

Question

J'ai un script PHP-script répertoriant jusqu'à 20 joueurs de jeux de cartes par page :

J'ai également des URL de photos/avatars pour la plupart des joueurs et j'aimerais les afficher - comme une image flottante lorsque la souris survole le lien/nom correspondant. Je n'ai cependant pas les dimensions des photos.

Comment pourrais-je le faire avec les moyens de jQuery core (sans plugins) s'il vous plaît ?

Je dois probablement créer un support d'image et le cacher d'abord ?

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

Puis, au passage de la souris, remplacer l'attribut src de l'image et rendre le #avatar visible ? Merci de m'aider avec le code

Devrais-je stocker l'URL de chaque photo en tant qu'attribut de l'image correspondante ? <a href="player_profile.php">player name</a> tout en les générant par mon script PHPscript ?

Et comment gérer les situations où la souris se trouve près du bas de la page Web (c'est-à-dire comment placer au mieux l'image, de manière à ce qu'elle soit visible).

Merci ! Alex

Answer 1

Si vous faites comme vous l'avez dit et créez le #avatar caché, alors tout ce que vous avez à faire est de changer la source de l'image et de lier l'image à l'image. .load() événement de l'image † pour attendre le chargement de l'image, puis l'ouvrir à la coordonnée souhaitée (qui proviendrait probablement de la position de la souris dans l'événement). Si vous avez besoin que l'image reste avec le curseur, un événement .mouseover() le gestionnaire d'événement peut le maintenir à jour.

** UNTESTED ** (peut contenir des 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. Si les paramètres de largeur/hauteur ne fonctionnent pas comme je l'ai fait ci-dessus, utilisez avatar.attr('width') y avatar.attr('height') à la place. getLinkURL() est un espace réservé à la manière dont vous souhaitez obtenir l'URL de l'image de l'avatar à partir du lien survolé.

† .load() n'est pas toujours dans certains navigateurs lorsqu'une image est en cache, il est préférable de vérifier les images .complete après avoir lié la propriété l'événement load et l'appeler manuellement s'il est vrai.

Answer 2

Je suis toujours en train d'apprendre jQuery, mais laissez-moi essayer.

Supposons qu'il y ait un div pour chaque joueur avec ses informations et que vous vouliez que l'image apparaisse lorsque l'utilisateur passe la souris dessus. Mettez une classe personnalisée et un attribut html personnalisé sur le div comme suit :

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

Pour chaque joueur, vous pouvez inclure quelque chose comme ceci dans votre code html pour chaque ligne.

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

Votre script pourrait ressembler à ceci (à l'intérieur de votre gestionnaire $(document).ready

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

Cela devrait vous permettre de commencer. Vous devrez ajouter du code jQuery pour que les divisions image s'affichent à la position exacte que vous souhaitez (soit à l'endroit où se trouve le pointeur de la souris, soit à une position définie dans la rangée).

J'espère que cela vous aidera !