jQuery Popup/Popout.

Question

I have 11 images in a row and I want a popout to come out of them if the mouse hovers on one of them. So each 11 images has a different popout. I already have some code to do this, but it will only work on the first image.

Code: index.html

<span title="Milestones" class="tl-icon">
<span class="tl-msg">
<span class="tl-msg-inside">
<div class="slice1">
        <a id="slice1">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice2">
        <a id="slice2">Slice 2</a>
        <em style="top: -70px; display: none;">------</em>
</div>
<div class="slice3">
        <a id="slice3">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice4">
        <a id="slice4">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice5">
        <a id="slice5">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice6">
        <a id="slice6">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice7">
        <a id="slice7">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice8">
        <a id="slice8">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice9">
        <a id="slice9">RSS Feed</a>
        <em style="top: -70px; display: none;">---</em>
</div>
<div class="slice10">
        <a id="slice10">RSS Feed</a>
        <em style="top: -70px; display: none;">----</em>
</div>
<div class="slice11">
        <a id="slice11">RSS Feed</a>
        <em style="top: -70px; display: none;">-----</em>
</div>
</span>

style.css (Here the same code has been copied 11 times, one for each of the popouts/images)

* { margin: 0; padding: 0; border: 0; }

.slice1 {
    float: left;
    margin-left: 0px;
    margin-bottom: 0px;
    margin-right: 0px;
    margin-top: 0px;
    padding: 0;
    width: 700px;
    position: relative;
}

div.slice1 em {
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 700px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-indent: -9999px;
    z-index: 2;
    display: none;
}.

slice2 {
    float: left;
    margin: 0px auto;
    padding: 0;
    width: 130px;
    position: relative;
}

div.slice2 em {
    font-size: 47px;
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 100px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-align: center;
    z-index: 0;
    display: none;
}.

slice3 {
    margin: 0px auto;
    padding: 0;
    width: 220px;
    position: relative;
}

div.slice3 em {
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 220px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-align: center;
    text-indent: -9999px;
    z-index: 2;
    display: none;
}.

slice4 {
    margin: 0px auto;
    padding: 0;
    width: 70px;
    position: relative;
}

div.slice4 em {
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 70px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-align: center;
    text-indent: -9999px;
    z-index: 2;
    display: none;
}.

slice5 {
    margin: 0px auto;
    padding: 0;
    width: 250px;
    position: relative;
}

div.slice5 em {
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 250px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-align: center;
    text-indent: -9999px;
    z-index: 2;
    display: none;
}.

slice6 {
    margin: 0px auto;
    padding: 0;
    width: 380px;
    position: relative;
}

div.slice6 em {
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 380px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-align: center;
    text-indent: -9999px;
    z-index: 2;
    display: none;
}.

slice7 {
    margin: 0px auto;
    padding: 0;
    width: 170px;
    position: relative;
}

div.slice7 em {
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 170px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-align: center;
    text-indent: -9999px;
    z-index: 2;
    display: none;
}.

slice8 {
    margin: 0px auto;
    padding: 0;
    width: 30px;
    position: relative;
}

div.slice8 em {
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 30px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-align: center;
    text-indent: -9999px;
    z-index: 2;
    display: none;
}.

slice9 {
    margin: 0px auto;
    padding: 0;
    width: 110px;
    position: relative;
}

div.slice9 em {
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 110px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-align: center;
    text-indent: -9999px;
    z-index: 2;
    display: none;
}.

slice10 {
    margin: 0px auto;
    padding: 0;
    width: 330px;
    position: relative;
}

div.slice10 em {
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 330px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-align: center;
    text-indent: -9999px;
    z-index: 2;
    display: none;
}

slice11 {
    margin: 0px auto;
    padding: 0;
    width: 110px;
    position: relative;
}

div.slice11 em {
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/bubble.png) no-repeat;
    width: 110px;
    height: 48px;
    position: absolute;
    top: -70px;
    left: -0px;
    text-align: center;
    text-indent: -9999px;
    z-index: 2;
    display: none;
}.

#rss-icon {
    width: 42px;
    height: 42px;
    background: url(http://www.dvq.co.nz/wp-content/uploads/2008/07/jquery-popup-bubble/images/icon.png) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice1 {
    width: 700px;
    height: 42px;
    background: url(http://www.kttns.org/yta2) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice2 {
    width: 130px;
    height: 42px;
    background: url(http://www.kttns.org/wexm) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice3 {
    width: 220px;
    height: 42px;
    background: url(http://www.kttns.org/imthi) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice4 {
    width: 70px;
    height: 42px;
    background: url(http://www.kttns.org/wqxnj) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice5 {
    width: 250px;
    height: 42px;
    background: url(http://www.kttns.org/njqxz) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice6 {
    width: 380px;
    height: 42px;
    background: url(http://www.kttns.org/mwi2y) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice7 {
    width: 170px;
    height: 42px;
    background: url(http://www.kttns.org/zlzgm) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice8 {
    width: 30px;
    height: 42px;
    background: url(http://www.kttns.org/djjn) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice9 {
    width: 210px;
    height: 42px;
    background: url(http://www.kttns.org/mmdq) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice10 {
    width: 330px;
    height: 42px;
    background: url(http://www.kttns.org/kodc4) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

#slice11 {
    width: 110px;
    height: 42px;
    background: url(http://www.kttns.org/hyz) no-repeat 0 0;
    text-indent: -9999px;
    margin: 0 auto;
    display: block;
}

tooltop.js (The code that makes the popout popout, again one for each of the popouts/images)

$(document).ready(function(){

    $(".slice1 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

$(document).ready(function(){

    $(".slice2 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

$(document).ready(function(){

    $(".slice3 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

$(document).ready(function(){

    $(".slice4 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

$(document).ready(function(){

    $(".slice5 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

$(document).ready(function(){

    $(".slice6 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

$(document).ready(function(){

    $(".slice7 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

$(document).ready(function(){

    $(".slice8 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

$(document).ready(function(){

    $(".slice9 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

$(document).ready(function(){

    $(".slice10 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

$(document).ready(function(){

    $(".slice11 a").hover(function() {
    $(this).next("em").stop(true, true).animate({opacity: "show", top: "-60"}, "slow");
    }, function() {
    $(this).next("em").animate({opacity: "hide", top: "-70"}, "fast");
    });

});

Why does the popout only appear for the first image?

Answer 1

i don't understand your exact image structure/animation but probably you are looking for something like this:

http://www.dynamicdrive.com/dynamicindex4/imagemagnify.htm

Answer 2

I've been doing a couple of test with these. While I didn't get the timeline structure right (probably because I'm missing the CSS for the context in which the timeline is displayed), I got the popups to show adding this CSS declaration:

div {position: relative;}

otherwise, the position: absolute declaration of the ems takes the whole page (or the closest enclosing relatively positioned element) as reference, and thus rendering the popups offscreen (because of the -60 vertical position).