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
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();
})
精彩评论