Отобразить контент вокруг события изображения?

Question

Я пытался сделать что-то похожее на movies.com, как они делают здесь со своими плакатами, http://www.movies.com/new-releases

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

Для меня это будет артист / группа, описание, iTunes, жанр, рейтинг и PosterImage.

Я работал в Javascript, но у меня буквально нет подсказки. Я заметил, что все их теги сценария или html всплывающей подсказки находятся внутри текстовой области.

Если бы кто-нибудь смог сделать что-то вроде или узнать, я был бы признателен за любую помощь.

Answer 1

Вы должны понимать обработку событий мыши для того же самого.Это руководство по jQuery ссылка должно помочь.Посмотрите на событие при наведении курсора.Вы также можете использовать функцию всплывающей подсказки jQuery ....

Answer 2

Вот как бы я это сделал. Она не идеальна, но, надеюсь, поможет вам выбрать правильный путь. Когда ты наведешься на div, я поймаю положение этого div. Затем исчезните в div ниже этого объекта с более низким z-индексом. затем я добавлю эту информацию к этому div и использую координаты позиции, которые я нашел ранее, для позиционирования #infodiv относительно div, который вы только что установили. Затем, когда вы отключите указатель мыши, мы его спрячем Вы можете найти рабочий пример здесь: http://jsfiddle.net/QWNmP/1/

$(document).ready(function() {

   $(".box").hover(function(event){
        var $el = $(this);
        var info = $el.find('.info').html();

        var BoxPostion = $(this).position();
          if ($('#infodiv').css('display') == 'none') {   
              $("#infodiv").css('left',BoxPostion.left+"px").hide().delay(100).fadeIn(500);
              $el.css('zIndex','10000');
              $('#infodiv').append(info);
           };

   });

    $('#infodiv').mouseleave(function() {
      $('#infodiv').empty().hide();
        $(".box").css('zIndex','1');
        $('.info').css('display','none');
    });




});

Answer 3

я думаю это - это то, что вы ищете ... лучше использовать библиотеку, а не создавать ее самостоятельно ...