Question

im working on jquery script to show rollover , now i need to show every image alt text in a div box

this is my jquery code :

$(document).ready(function(){


$("ul.thumb li").hover(function() {
    $(this).css({'z-index' : '10'});
    $(this).

    find('img').addClass("hover").stop()
        .animate({
            width: '174px', 
            height: '174px',
        }, 200);

    } , function() {
    $(this).css({'z-index' : '0'});
    $(this).find('img').removeClass("hover").stop()
        .animate({
            width: '100px', 
            height: '100px', 
        }, 400);
});

    $("ul.thumb li a").click(function() {

        var mainImage = $(this).attr("href"); //Find Image Name
        $("#main_view img").attr({ src: mainImage });
        return false;       
    });

});

and html :

<ul class='thumb'>
<li><a href='#'><img src='path' alt='this-text'></a></li>
<li><a href='#'><img src='path' alt='this-text'></a></li>
<li><a href='#'><img src='path' alt='this-text'></a></li>
</ul>
<div id='imglabel'></div>

now how can i show every image alt value in

div id=’imglabel’

on mouseover effect as it is hovered

Answer 1

You could loop through each image and append their alt attributes to imglabel:

  $("#imglabel").mouseover(function() {

      $("img").each(function() {

          $("#imglabel").append($(this).attr('alt'));
      })
  }).mouseout(function() {

      $(this).empty();
  })