18 Replies Latest reply on Apr 23, 2010 8:33 PM by Zabeth69

    How do I keep my Spry tool tip from moving????

    airwolfhelicopter Level 1

      I know how to put the spry tool tips on but noticed that the position of it changes depending on where my mouse hits the picture.  I don't have "follow mouse" checked so that's not the problem.  I want the tool tip to appear exactly in the middle top part of my page.  Am I missing a setting here?

        • 1. Re: How do I keep my Spry tool tip from moving????
          John Waller Adobe Community Professional & MVP

          Got a link to a page showing the problem?

          • 2. Re: How do I keep my Spry tool tip from moving????
            airwolfhelicopter Level 1

            No, the site isn't purchased yet.  Picture 1.pngPicture 2.png Here is what I mean, do you see how it chances position relative to the blue screen next to it depending on where I hit the picture with my mouse.  I need it to appear in the same place each time no matter where I place the mouse on the picture. 

            • 3. Re: How do I keep my Spry tool tip from moving????
              John Waller Adobe Community Professional & MVP

              The answer's somewhere in the code.

               

              If you can't post a link (which makes things quicker and easier to diagnose and solve), can you post the full code so someone may be able to plough through it and spot a tweak.

              • 4. Re: How do I keep my Spry tool tip from moving????
                airwolfhelicopter Level 1

                <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

                <html xmlns="http://www.w3.org/1999/xhtml">

                <head>

                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                <title>Untitled Document</title>

                <style type="text/css">

                <!--

                body {

                background-color: #000;

                background-image: url(Background-Far.jpg);

                background-repeat: no-repeat;

                }

                a:link {

                text-decoration: none;

                }

                a:visited {

                text-decoration: none;

                }

                a:hover {

                text-decoration: none;

                }

                a:active {

                text-decoration: none;

                }

                body,td,th {

                color: #CCC;

                text-align: center;

                }

                -->

                </style>

                <script src="SpryAssets/SpryTooltip.js" type="text/javascript"></script>

                <script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>

                <link href="SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />

                <script type="text/javascript">

                <!--

                function MM_preloadImages() { //v3.0

                  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

                    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

                    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

                }

                function MM_effectAppearFade(targetElement, duration, from, to, toggle)

                {

                Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});

                }

                //-->

                </script>

                </head>

                 

                <body onload="MM_preloadImages('test-white.jpg')">

                <table width="1394" height="1203" border="1" align="center" cellspacing="0">

                  <tr>

                    <td height="481" colspan="12"><table width="1364" height="448" border="1" align="center" cellspacing="0">

                      <tr>

                        <td width="450"> </td>

                        <td width="331"><img src="Pictures/Weston-Jodi-Front-page-picture.png" alt="" width="375" height="477" /></td>

                        <td width="569"> </td>

                      </tr>

                    </table></td>

                  </tr>

                  <tr>

                    <td height="73" colspan="12"><table height="62" border="0" align="center" cellspacing="0">

                      <tr>

                        <td height="60" background="Buttons/test-white.png"><img src="Buttons/test-green.png" width="111" height="63" onmouseover="MM_effectAppearFade(this, 700, 0, 100, true)" onmouseout="MM_effectAppearFade(this, 700, 100, 0, false)" /></td>

                        <td background="Buttons/test-white.png"><img src="Buttons/test-green.png" alt="" width="111" height="63" onmouseover="MM_effectAppearFade(this, 700, 0, 100, false)" onmouseout="MM_effectAppearFade(this, 700, 100, 0, false)" /></td>

                        <td align="center" background="Buttons/test-white.png"><img src="Buttons/test-green.png" alt="" width="111" height="63" onmouseover="MM_effectAppearFade(this, 700, 0, 100, false)" onmouseout="MM_effectAppearFade(this, 700, 100, 0, false)" /></td>

                        <td background="Buttons/test-white.png"><img src="Buttons/test-green.png" alt="" width="111" height="63" onmouseover="MM_effectAppearFade(this, 700, 0, 100, false)" onmouseout="MM_effectAppearFade(this, 700, 100, 0, false)" /></td>

                        <td background="Buttons/test-white.png"><img src="Buttons/test-green.png" alt="" width="111" height="63" onmouseover="MM_effectAppearFade(this, 700, 0, 100, false)" onmouseout="MM_effectAppearFade(this, 700, 100, 0, false)" /></td>

                        <td background="Buttons/test-white.png"><img src="Buttons/test-green.png" alt="" width="111" height="63" onmouseover="MM_effectAppearFade(this, 700, 0, 100, false)" onmouseout="MM_effectAppearFade(this, 700, 100, 0, false)" /></td>

                        <td background="Buttons/test-white.png"><img src="Buttons/test-green.png" alt="" width="111" height="63" onmouseover="MM_effectAppearFade(this, 700, 0, 100, false)" onmouseout="MM_effectAppearFade(this, 700, 100, 0, false)" /></td>

                        <td background="Buttons/test-white.png"><img src="Buttons/test-green.png" alt="" width="111" height="63" onmouseover="MM_effectAppearFade(this, 700, 0, 100, false)" onmouseout="MM_effectAppearFade(this, 700, 100, 0, false)" /></td>

                      </tr>

                    </table></td>

                  </tr>

                  <tr>

                    <td colspan="12"> </td>

                  </tr>

                  <tr>

                    <td height="28" colspan="5"> </td>

                    <td colspan="6"><img src="Bluescreen.jpg" width="750" height="346" alt="Bluescreen" /></td>

                    <td width="257"> </td>

                  </tr>

                  <tr>

                    <td width="2" height="28"> </td>

                    <td width="220" height="28"><a href="Bogus Link Test.html"><img src="Pop Up Spry Pictures/Mossback-Logo-thumb.jpg" width="200" height="113" /></a></td>

                    <td width="2"> </td>

                    <td width="2"> </td>

                    <td width="3"> </td>

                    <td width="144"><p><img src="Flash Stuff/1.jpg" width="141" height="100" id="sprytrigger2" /></p></td>

                    <td width="144"><img src="Flash Stuff/2.jpg" width="141" height="100" /></td>

                    <td><img src="Flash Stuff/3.jpg" width="141" height="100" /></td>

                    <td><img src="Flash Stuff/4.jpg" width="141" height="100" /></td>

                    <td width="148"><img src="Flash Stuff/5.jpg" width="141" height="100" /></td>

                    <td width="134"><img src="Flash Stuff/6.jpg" width="141" height="100" /></td>

                    <td>&lt;&lt;&lt;&lt;Genie Effect</td>

                  </tr>

                  <tr>

                    <td height="30" colspan="2"><img src="Pictures/Larger-View-Text2.png" width="102" height="20" /><span id="sprytrigger1">[+]</span></td>

                    <td> </td>

                    <td> </td>

                    <td> </td>

                    <td colspan="4">Meet the Hosts</td>

                    <td colspan="2"> </td>

                    <td> </td>

                  </tr>

                  <tr>

                    <td colspan="2"> </td>

                    <td> </td>

                    <td> </td>

                    <td> </td>

                    <td colspan="2"> </td>

                    <td width="144"> </td>

                    <td width="144"> </td>

                    <td colspan="2"> </td>

                    <td> </td>

                  </tr>

                  <tr>

                    <td colspan="2"> </td>

                    <td> </td>

                    <td> </td>

                    <td> </td>

                    <td colspan="2"> </td>

                    <td> </td>

                    <td> </td>

                    <td colspan="2"> </td>

                    <td> </td>

                  </tr>

                  <tr>

                    <td colspan="2"> </td>

                    <td> </td>

                    <td> </td>

                    <td> </td>

                    <td colspan="2"> </td>

                    <td> </td>

                    <td> </td>

                    <td colspan="2"> </td>

                    <td> </td>

                  </tr>

                  <tr>

                    <td colspan="2"> </td>

                    <td> </td>

                    <td> </td>

                    <td> </td>

                    <td colspan="2"> </td>

                    <td> </td>

                    <td> </td>

                    <td colspan="2"> </td>

                    <td> </td>

                  </tr>

                </table>

                <div class="tooltipContent" id="sprytooltip2"><img src="pop-up-text.png" width="220" height="142" /></div>

                <div class="tooltipContent" id="sprytooltip1"><a href="Bogus Link Test.html"><img src="Pop Up Spry Pictures/Mossback-JPEG-large-popup.jpg" width="622" height="383" /></a></div>

                <script type="text/javascript">

                <!--

                var sprytooltip1 = new Spry.Widget.Tooltip("sprytooltip1", "#sprytrigger1", {closeOnTooltipLeave:true, offsetX:-15, offsetY:-435, hideDelay:150, useEffect:"fade"});

                var sprytooltip2 = new Spry.Widget.Tooltip("sprytooltip2", "#sprytrigger2", {offsetX:-200, offsetY:-250, useEffect:"fade", hideDelay:0, closeOnTooltipLeave:true});

                //-->

                </script>

                </body>

                </html>

                • 6. Re: How do I keep my Spry tool tip from moving????
                  hans-g. Adobe Community Professional & MVP

                  Hi,

                   

                  did you got your knowledge from this page?

                   

                  http://labs.adobe.com/technologies/spry/samples/tooltip/SpryTooltipSample.html


                  and this chapter?

                   

                  Tooltip positioning:
                  By default, the tooltip is positioned 20px lower and to the right of the cursor. Setting the offsetX and offsetY allows you to set a new position for the tooltip. Pixels are measured from the cursor, not the original tooltip origin. The position indicates the top, left position of the tooltip element.

                   

                  Hans-G.

                  • 7. Re: How do I keep my Spry tool tip from moving????
                    airwolfhelicopter Level 1

                    no but it does have allot of good information.  I just want the tooltip to stay in the exact position I placed it in.  Not vary depending on my mouse position over the picture. 

                    • 8. Re: How do I keep my Spry tool tip from moving????
                      Zabeth69 Level 5

                      Seems to me that the very name Tooltip implies that it will pop up relative to the position of the "tool," or your cursor. So perhaps what you want is a different rollover effect, of which there are several.

                       

                      Beth

                      • 9. Re: How do I keep my Spry tool tip from moving????
                        airwolfhelicopter Level 1

                        Hey Beth.  What do you suggest?  My only goal is to have my picture and no matter where my mouse hits the picture, the tool tip is directly over the picture centered.  Would that be a java script function or an adjusted rollover image?

                        • 10. Re: How do I keep my Spry tool tip from moving????
                          Zabeth69 Level 5

                          The simplest to do would be a show/hide behavior. Your large image would need to be a surface image. Clicking on it would bring up the other image, in my example moving the mouse OFF the large image would hide the smaller one:

                           

                           

                           

                          <style type="text/css">

                          <!--

                          #apDiv1 {

                               position:absolute;

                               width:75px;

                               height:73px;

                               z-index:1;

                               left: 247px;

                               top: 149px;

                               visibility: hidden;

                          }

                          -->

                          </style>

                          <script type="text/javascript">

                          <!--

                          function MM_showHideLayers() { //v9.0

                            var i,p,v,obj,args=MM_showHideLayers.arguments;

                            for (i=0; i<(args.length-2); i+=3)

                            with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];

                              if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }

                              obj.visibility=v; }

                          }

                          //-->

                          </script>

                          </head>

                           

                          <body>

                          <img src="images/apples.jpg" width="600" height="447" onclick="MM_showHideLayers('blooms','','show')" onmouseout="MM_showHideLayers('blooms','','hide')" />

                          <div id="apDiv1"><img src="images/blooms.jpg" name="blooms" width="72" height="72" id="blooms" /></div>

                           

                           

                          I've used an APdiv for the smaller image. You can set it up 'showing' and then make it invisible (after you've given it an ID, of course). Adjust the position of the APdiv in the style rule for it (see head of document).

                           

                          Basically:

                          1. Insert main image; give it an ID
                          2. Make APdiv
                          3. Insert image in APdiv; give it an ID
                          4. Resize APdiv and reposition, if necessary
                          5. Make the APdiv invisible (click the 'eye' column [until the APdiv disappears] next to the div name in the AP elements panel)
                          6. Select the main image
                          7. Apply Show/Hide behavior to main image.
                            1. Easiest is to apply a Hide behavior
                              From list on dialog box, choose the smaller image and click Hide button
                            2. Change 'event' to Mouse Out
                          8. Select main image again
                          9. Apply Show/Hide behavior to main image
                            1. From list on dialog box, choose the smaller image and click Show button
                            2. Confirm that the 'event' is On Click

                           

                          Although I'm showing you the javascript code, too, the javascript in the head and in the image tags in the body are all applied by the Behavior. The Behaviors Panel may be opened by doing Window > Behaviors.

                           

                          I'm sure there are other methods, but this is the most direct.

                           

                          Beth

                          • 11. Re: How do I keep my Spry tool tip from moving????
                            airwolfhelicopter Level 1

                            How do I link the AP and the pop up inside picture to trigger "show" when the mouse hits the picture below?Picture 5.png

                            • 12. Re: How do I keep my Spry tool tip from moving????
                              airwolfhelicopter Level 1

                              I have it working up top but I want the picture below to trigger the show/hide of the pop up up top

                              • 13. Re: How do I keep my Spry tool tip from moving????
                                Zabeth69 Level 5

                                Well, if you want the lower image to trigger the upper image in the AP, you must reduce the size of the AP so it does not overlap the lower image...so it lets you get to it with your cursor.

                                 

                                If you want to be able to click the lower picture to make the upper image pop up, then to disappear when you move your mouse off the lower picture, follow the instructions as I gave them.

                                 

                                • Select the lower picture and apply a SHOW upper picture when the LOWER picture is clicked
                                • Again select the lower picture and apply a HIDE upper picture when the mouse rolls off the LOWER picture.

                                 

                                This provides a fairly 'passive' control of when the picture shows.

                                 

                                You could have the SHOW upper picture happen when the mouse merely rolls over the lower picture, and HIDE when it rolls off the LOWER picture

                                 

                                Alternatively, you could

                                • Select the lower picture and apply a SHOW upper picture when the LOWER picture is clicked
                                • Select the UPPER picture and apply a HIDE upper picture when the UPPER picture is clicked
                                  In this case, you might want to add an "x" or "close" to indicate that the viewer must click the picture to close it.

                                 

                                The 'trigger' picture...the one whose event causes the show or hide to happen...is the one you select when you apply the behavior in the first place.

                                 

                                The other thing I might not have mentioned...the 'trigger' image must be a surface image, not a background image.

                                 

                                Beth

                                • 14. Re: How do I keep my Spry tool tip from moving????
                                  airwolfhelicopter Level 1

                                  is the show upper option in the CSS styles?

                                  • 15. Re: How do I keep my Spry tool tip from moving????
                                    Zabeth69 Level 5

                                    No, these have nothing to do with CSS styles. The APdiv is the only style here. You can change the size of the APdiv either by dragging on its handles in Design View or by changing the width and height in the APdiv definition.

                                     

                                    These are javascript behaviors.

                                     

                                    What you're calling the 'show upper' option is just applying the behaviors with different choices.

                                     

                                    I recommend that you try working with the show/hide javascript behavior and see what it does. When you get comfortable with it, you'll be fine.

                                     

                                    Beth

                                    • 16. Re: How do I keep my Spry tool tip from moving????
                                      airwolfhelicopter Level 1

                                      is there another way to do it?  Here's an example of what I want to do.  Hover the mouse over the the video selections.  http://www.outdoorchannel.com/shows/thecrush.aspx     The popups overlap.  How did they do this?

                                      • 17. Re: How do I keep my Spry tool tip from moving????
                                        airwolfhelicopter Level 1

                                        There has got to be a pretty easy way to link these two pictures up.  I need to basically have the bottom picture turn the APDiv on or the picture within the APDiv.  I have ID names for both so there has to be a way to parent one of them together. 

                                        • 18. Re: How do I keep my Spry tool tip from moving????
                                          Zabeth69 Level 5

                                          The easiest way I know is the way I described several posts ago.

                                           

                                          Beth