)
appears below it and then when you mouseout, it fades again.
I've found the best way to do it is that start with all the popups to
the side of the icons (so you can still hover over the icons and the
popups don't just block your way) and the popups begin as hidden
(opacity: 0). When you mouseover the icons, it sets the "top" and
"left" attribute of the popup to just below the icon and then it
slowly fades the popup from 0 to .7 and then vice versa when mouseout.
So, here is my code. You can view the product at the site below. Any
suggestions?
http://dev.quickscriptz.ca/v4/index.php
<script type="text/javascript"> //<![CDATA[
    $(document).ready(function(){
        // PNG transparency fix
        $(document).pngFix();
        // Basic variables
        var outSpeed = "medium";
        var outOpacity = .7;
        var inSpeed = "fast";
        var inOpacity = 1;
        // Variables for icons & popups
        var nowIcon, nowPopup, topPx, leftPx, topPxH, leftPxH, topPxS,
leftPxS;
        // Loop it five times
        for(var i = 1; i <= 5; i++){
            // Variable for icon id
            nowIcon = "#icon" + i;
            nowPopup = "#popup" + i;
            // Height from top of icon
            topPx = $(nowIcon).css("top");
            leftPx = $(nowIcon).css("left");
            // Popup hidden position
            topPxH = topPx - 10;
            leftPxH = leftPx - 150;
            // Popup showing position
            topPxS = topPx + 100;
            leftPxS = leftPx - 50;
            // Start by hiding popups
            $(nowPopup).css({top: topPxH});
            $(nowPopup).css({left: leftPxH});
            // Set opacity to zero (invisible)
            //$(nowPopup).animate({opacity: 0});
            // Mouse over event
            $(nowIcon).mouseover(function(){
                $(this).fadeTo(outSpeed, outOpacity);
                $(nowPopup).css({top: topPxS});
                $(nowPopup).css({left: leftPxS});
                $(nowPopup).fadeTo(outSpeed, outOpacity);
            })
            // Mouse out event
            $(nowIcon).mouseout(function(){
                $(this).fadeTo(inSpeed, inOpacity);
                $(nowPopup).fadeTo(inSpeed, 0);
            })
        }
    })
//]]></script>