5 Replies Latest reply: Nov 29, 2008 1:22 AM by Lena P RSS

    Image Map Tooltip?

    Lena P Community Member
      I´m trying to find a good way to create image map tooltips that look a bit more fancy than "alt", or "title" for that matter.

      But I have not been able to find a good way. I understand that there in DW is Spry tooltip but that does not do it for me. Have found some javascripts/DHTML, but nothing that works on an image map the way I want. Or maybe it´s just me that is not able to get it right....

      Maybe someone out there has had the same problem as me and might have a good "tool"tip that they would like to share? :-)

      / Lena
        • 1. Image Map Tooltip?
          martcol Community Member
          This looks neat enough and is quite customisable
          • 2. Re: Image Map Tooltip?
            Newsgroup_User Community Member
            The alt attribute is NOT a tooltip, just so you'll know. It's intended to
            be shown ONLY when the visitor has disabled graphics in their browser. IE
            is the only browser in the world that ignores this restriction.

            --
            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
            ==================


            "Lena P" <webforumsuser@macromedia.com> wrote in message
            news:ggf3s0$pp3$1@forums.macromedia.com...
            > I?m trying to find a good way to create image map tooltips that look a bit
            > more
            > fancy than "alt", or "title" for that matter.
            >
            > But I have not been able to find a good way. I understand that there in DW
            > is
            > Spry tooltip but that does not do it for me. Have found some
            > javascripts/DHTML,
            > but nothing that works on an image map the way I want. Or maybe it?s just
            > me
            > that is not able to get it right....
            >
            > Maybe someone out there has had the same problem as me and might have a
            > good
            > "tool"tip that they would like to share? :-)
            >
            > / Lena
            >

            • 3. Re: Image Map Tooltip?
              Lena P Community Member
              Thank you for the tip.

              It seems really nice and configurable. But....I still have this problem.

              If you take a look at this link: http://web2d2.com/test/vad.htm and hover over the word "glädje" in the image it looks a bit strange! I am not "man" to find out where the problem is. I have looked in and tried to reconfigure the wz_tooltip.js with no luck.

              Any ideas?
              • 4. Re: Image Map Tooltip?
                Newsgroup_User Community Member
                Which DW are you using?

                Anyhow, this is certainly wrong -

                <map name="leftpic_vadMap" id="leftpic_vadMap">
                <area shape="rect" coords="6,6,166,131" href="#"
                onMouseOver="TagToTip('Span1', WIDTH, '-300', BGCOLOR, '#CDEAFC', SHADOW,
                false, SHADOWCOLOR, '#333333', FOLLOWMOUSE, true)" onMouseOut="UnTip()"
                /><span id="Span1"><strong>Glädje</strong><br />All vår verksamhet präglas
                av glädje. En positiv känsla av tillfredsställdhet genom lyckade schysta
                arrangemang. Framför allt för era medverkande målgrupper (kunder, medlemmar
                och personal) men även för er organisation eller företag. </span><!--end
                tooltip content -->
                </map>

                The <span> tag doesn't belong inside a <map> tag. Change that content to
                this -

                <map name="leftpic_vadMap" id="leftpic_vadMap">
                <area shape="rect" coords="6,6,166,131" href="#"
                onMouseOver="TagToTip('Span1', WIDTH, '-300', BGCOLOR, '#CDEAFC', SHADOW,
                false, SHADOWCOLOR, '#333333', FOLLOWMOUSE, true)" onMouseOut="UnTip()"
                /> </map>
                <span id="Span1"><strong>Glädje</strong><br />All vår verksamhet präglas av
                glädje. En positiv känsla av tillfredsställdhet genom lyckade schysta
                arrangemang. Framför allt för era medverkande målgrupper (kunder, medlemmar
                och personal) men även för er organisation eller företag. </span><!--end
                tooltip content -->

                Also, I have modified your use of this tooltip as follows -

                <area shape="rect" coords="6,6,166,131" href="#"
                onMouseOver="TagToTip('Span1', WIDTH, '-300', HEIGHT,'-500', PADDING, '0',
                TEXTALIGN, 'left', BGCOLOR, '#CDEAFC', SHADOW, false, SHADOWCOLOR,
                '#333333', FOLLOWMOUSE, true)" onMouseOut="UnTip()"
                />

                But you still have the white space showing to the left of the content, and
                honestly, I'm not sure why.

                If you are using DWCS4, you could try the Spry tooltip.

                --
                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
                ==================


                "Lena P" <webforumsuser@macromedia.com> wrote in message
                news:gghg6l$s7i$1@forums.macromedia.com...
                > Thank you for the tip.
                >
                > It seems really nice and configurable. But....I still have this problem.
                >
                > If you take a look at this link: http://web2d2.com/test/vad.htm and hover
                > over
                > the word "gl?dje" in the image it looks a bit strange! I am not "man" to
                > find
                > out where the problem is. I have looked in and tried to reconfigure the
                > wz_tooltip.js with no luck.
                >
                > Any ideas?
                >

                • 5. Re: Image Map Tooltip?
                  Lena P Community Member
                  Thanks for your help. But now I know what the problem was. In my CSS I had a margin-left in my div at 43px. I corrected it to 0px and everything looks just fine.

                  / Lena