ядро jQuery: отображение плавающего изображения

Question

У меня есть PHP-скрипт , перечисляющий до 20 игроков в карточные игры на странице:

У меня также есть фото / аватары для большинства игроков, и я хотел бы отобразить их - как плавающее изображение, когда мышь наводит курсор на соответствующую ссылку / имя. У меня нет размеров фотографий.

Как я могу сделать это с помощью ядра 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-скриптом?

И как справляться с ситуациями, когда мышь находится в нижней части веб-страницы (т.е. как лучше разместить изображение, чтобы оно было видимым)

Спасибо! Alex

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 для отображения изображений в точном положении.Вы хотите (либо там, где находится указатель мыши, либо в заданной позиции в строке).

Надеюсь, это поможет!

Answer 2

Если вы делаете, как вы сказали, и создаете #avatar DIV, скрытый, то все, что вам нужно сделать, это изменить источник изображения и связать событие .load() изображения ^† , чтобы дождатьсяизображение для загрузки, затем откройте его по желаемой координате (которая, вероятно, будет исходить из положения мыши в событии).Если вам нужно, чтобы изображение оставалось с курсором, обработчик событий .mouseover() может обновлять его.

** UNTESTED ** (может содержать ошибки!)

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. Если настройки ширины / высоты не работают так, как у меня выше, используйте вместо них avatar.attr('width') и avatar.attr('height').getLinkURL() является заполнителем, однако вы намереваетесь получить URL изображения аватара по указанной ссылке.

^† .load() Процедура не всегда срабатывает в некоторых браузерах, когдаизображение кэшируется, лучше всего проверить свойство images .complete после привязки события загрузки и вызвать его вручную, если оно истинно.