Results 1 to 6 of 6

Thread: Image w/ tooltip on a mapped image

  1. #1
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Image w/ tooltip on a mapped image

    Hello,

    For my genealogical trees, I use the following JavaScript

    http://www.dynamicdrive.com/dynamici...agetooltip.htm

    Image w/ description tooltip
    Author: Sharon Paine

    Note: Updated Feb 8th, 07. Fixed positioning bug in IE that occurs when page contains a valid doctype.
    Description: Move the mouse over a link and have the image of your choice plus corresponding description pop up, by using this image tooltip script. Each tooltip can have a different background color, just for aesthetics or in case the images are transparent gifs.
    The code detects for window edges and keeps the tooltip inside. The tooltip moving with the mousemove is an option that can be turned off by setting the tipFollowMouse to false.


    But instead of a text link as shown in the example (see Link1)

    <a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()">Link 1</a><br>

    I have replaced the text link by an area shape link of a mapped image, as follow:
    <a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()"> <area shape="rect" coords="1870,263,1967,363" alt=""> </a>

    All parameters for using mapped image were introduced correctly in the body part of html text.

    These new script works correctly with IE and I appreciate it.
    However, it does not work with Firefox, Opera…and Mac browsers.

    You can see an example of one of mine genealogical trees at:
    http://e.rzepka.free.fr/Genealogy/Barnas.php
    (There is no tooltip for each person)

    Have you comments or answer to the fact that the script does not work for all the browsers?

    Best

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    At present your page isn't even showing up in Opera or IE, though it does appear in FF. This is invalid code:

    Code:
    <a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()"><area shape="rect" coords="1870,263,1967,363" alt=""></a>
    It and similar on your page should be more like:

    Code:
    <area href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip shape="rect" coords="1870,263,1967,363" alt="">
    However, image map implementation is rather non-standard across browsers. If you need to link to portions of a large image (whether for an actual link and/or for a tool tip), it would be better to break it into smaller images that appear connected and to link to each of these smaller images.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    At present your page isn't even showing up in Opera or IE, though it does appear in FF.

    Sorry, I have done some manipulations and the file .../Barnas.php on my site was wrong. Now, all is OK and you can see it (see link in the post before)


    This is invalid code:

    Code:
    <a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()"><area shape="rect" coords="1870,263,1967,363" alt=""></a>
    Well, but it works with IE...!

    It and similar on your page should be more like:

    Code:
    <area href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip shape="rect" coords="1870,263,1967,363" alt="">
    I am sorry, but I have try with your proposal and it does not work with any browsers, IE included.

    However, image map implementation is rather non-standard across browsers. If you need to link to portions of a large image (whether for an actual link and/or for a tool tip), it would be better to break it into smaller images that appear connected and to link to each of these smaller images.
    OK, I well untersdand your meanning, however it is a more larger task to do it on each of mine genealogical trees with a great number of people (image).

    Thanks John
    More comments were welcome to help me

  4. #4
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello John

    Thank you very much for your answer.
    It is now morning in Paris and I have more time to work properly with your comments

    I have corrected your code
    Code:
    <area href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip shape="rect" coords="1870,263,1967,363" alt="">
    by the following one

    Code:
    <area href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()" shape="rect" coords="1870,263,1967,363" alt="">
    by adding correct ponctuation noted in red

    And it works with all browsers
    I am HAPPY...

    Remains a problem with Opera the right margin of the tip have a problem and I must increment de tip width by 20 px more than in IE or FF.

    One more time

    Thanks John for your help and for your very quick and valuable response

    Edouard from Paris

  5. #5
    Join Date
    Nov 2008
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Hello JOhn

    I have now transform the code to the following:

    Code:
    <area onmouseover="doTooltip(event,0)" onmouseout="hideTip()" shape="rect" coords="1870,263,1967,363" alt="">
    Without the [CODE]href="#"[/CODE] part

    and it works also very well every time

    Is it Ok for you ? or is it a wrong code?

    If it is OK, it would be interesting that the author (Sharon Paine) of this script add this possibility in an update of its older code (2007). This will be interesting for the community to have a widely documented package about the tooltip. I don't know how to join him.
    Please do it if you know how do do.

    Best regards

    Edouard

  6. #6
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Sorry about the typo. Um, an area tag doesn't require an href value. The script doesn't either, so as long as it works, it's fine with me. The area tag may have a nohref attribute:

    Code:
    <area nohref shape="rect" . . .
    But I don't believe it's technically required when one is not linking the area tag.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •