Hi John,
Basically, all you need to do is change $('span') to $(this).next()
Also, if you have the spans set to position:absolute; bottom: 0; you
should be able to use a simple slideDown() and slideUp() (though the
meanings will be reversed)
So, something like this should work:
$(document).ready(function(){
$("img").wrap("<div class=\"images\"></div>").after("<span></
span>");
$(".images img").hover(
function(){
var imgName = $(this).attr("alt");
$(this).next().text(imgName).slideDown(400);
},
function(){
$(this).next().slideUp(400);
}
);
});
--Karl
____________
Karl Swedberg
www.englishrules.com
www.learningjquery.com
On Jun 12, 2008, at 10:12 AM, john wrote:
I'm sure there's something really simple I'm missing, but for the life
of me I can't figure it out.
here's a link to the page: http://smple.com/jquery/image_alt/
Basically, I just want the current .jpg to display the pop up box.
Here's the .js
---------------------------------------------------------------------------------------------
$(document).ready(function(){
$("img").wrap("<div class=\"images\"></div>");
$("img").after("<span></span>");
$(".images img").hover(
function(over){
var imgName = $(this).attr("alt");
$("span").text(imgName);
var altHeight = $("span").height();
$("span").animate({
bottom: altHeight
}, 400);
},
function(out){
var imgName = $(this).attr("alt");
$("span");
$("span").animate({
bottom: "0px"
}, 400);
}
);
});
Thanks for any help:)