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:)

Reply via email to