6 Replies Latest reply on Sep 30, 2008 1:28 PM by Newsgroup_User

    Tooltip-like Effect

    MichaelS
      I'm trying to find a tutorial that will show me how to do something similar to a tooltip. I found a tooltip Javascript that is working but I want to do something more than simply show some text. This will be for a teacher when they are looking at results of a Quiz that their students have taken. The output is simply a list of all students with their answers like:

      Joe Student
      A B A A D

      Cindy Student
      B B A A C

      If the students' answer is incorrect I want the teacher to be able to hover over the letter and have an image show up in relation to the cursor position. The image might be Flash, GIF, or PNG. When the teacher moves the cursor away from the letter I need the image to go away - just like a tooltip would function. Actually it might be nice if they could move their cursor away from the letter and the pic remain. The would obviously have to then close/hide the image when they want it to go away but this would be ok as it would give them the ability to use the cursor to point at parts of the image in the case that they are explaining something to the student. I guess the layer that appears will have to be able to contain HTML/CSS and can't just be a graphic.

      I've seen stuff like this on some eCommerce sites where you hover over a thumbnail and a larger image appears. I just can't seem to find any tutorial on how to accomplish this. I'm a Javascript Novice and need a little guidance. Thanks in advance for any information you can provide.

      Peace
      MichaelS
        • 1. Re: Tooltip-like Effect
          MichaelS Level 1
          I had another thought...It doesn't have to work like a tooltip. I've also seen some image galleries that when you click on a thumbnail image the page dims and a larger image is displayed in the center of the screen. This would also work if anyone knows of tutorials about such a feature. Thanks again.
          • 2. Re: Tooltip-like Effect
            Level 7
            .oO(MichaelS)

            >I had another thought...It doesn't have to work like a tooltip. I've also seen
            >some image galleries that when you click on a thumbnail image the page dims and
            >a larger image is displayed in the center of the screen. This would also work
            >if anyone knows of tutorials about such a feature. Thanks again.

            This is called Lightbox (or Litebox, which uses more efficient code).

            Micha
            • 3. Re: Tooltip-like Effect
              Level 7
              Google "Lightbox2" or "Litebox" or go to http://www.projectseven.com/ and
              look at their new LightShowMagic.

              --
              Murray --- ICQ 71997575
              Adobe Community Expert
              (If you *MUST* email me, don't LAUGH when you do so!)
              ==================
              http://www.projectseven.com/go - DW FAQs, Tutorials & Resources
              http://www.dwfaq.com - DW FAQs, Tutorials & Resources
              ==================


              "MichaelS" <webforumsuser@macromedia.com> wrote in message
              news:gbtj16$8sd$1@forums.macromedia.com...
              >I had another thought...It doesn't have to work like a tooltip. I've also
              >seen
              > some image galleries that when you click on a thumbnail image the page
              > dims and
              > a larger image is displayed in the center of the screen. This would also
              > work
              > if anyone knows of tutorials about such a feature. Thanks again.
              >

              • 4. Re: Tooltip-like Effect
                Level 1
                Try a Spry Tooltip:

                http://labs.adobe.com/technologies/spry/articles/tooltip_overview/index.html

                Or, if you are using DW CS 4, then simply use Insert->Spry->Spry Tooltip and you will be good to go. This may not be the most efficient code, but it is insanely easy and requires no coding for those who are not trained.
                • 5. Re: Tooltip-like Effect
                  MichaelS Level 1
                  Thanks Michael. Litebox is working like a charm! I appreciate the input. This allows a 'title' to be placed below the image where I can put info about the correct and incorrect answers - also has a close button.

                  Gracias!
                  • 6. Re: Tooltip-like Effect
                    Level 7
                    .oO(MichaelS)

                    >Thanks Michael. Litebox is working like a charm! I appreciate the input. This
                    >allows a 'title' to be placed below the image where I can put info about the
                    >correct and incorrect answers - also has a close button.
                    >
                    > Gracias!

                    You're welcome.

                    Micha