Display content around an image's onhover event?

I was trying to do something similar to movies.com, like they do with their movie posters here, http://www.movies.com/new-releases

When you hover a poster, a tooltip/popup appears with all the necessary information around the poster images.

For me it will includes 开发者_JS百科the artist/band, description, iTunes, genre, Rating, and PosterImage.

I've been working in Javascript, but I literally don't have a clue. I've noticed all their script tags or tooltip html is inside the textarea.

If anyone was able to do something like or know, I would appreciated all the help.

---

i think this is what you are looking for.. its better to use a library instead of building one on your own...

---

You need to understand mouse event handling for the same. This jQuery tutorial link should help. Look into the mouseover event. You can also use the jQuery tooltip feature....

---

Here is how I would do it. It's not perfect but it will hopefully put you in a right path. When you hover on a div, I'll capture the postion of that div. Then fade in a div below that object with lower z-index. then I will append it's information to that div and use the postion coordinates that I found earlier to postion the #infodiv relative to the div you've just hovered. Then when you mouse off the infodiv we will hide it. You can find a working example here: 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');
    });




});