Image w/ tooltip on a mapped image

[edouard]

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

[jscheuer1]

At present your page isn't even showing up in Opera or IE, though it does appear in FF. This is invalid 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:

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

[edouard]

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:

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

<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

[edouard]

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

<area href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip shape="rect" coords="1870,263,1967,363" alt="">

by the following one

<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

[edouard]

Hello JOhn

I have now transform the code to the following:

<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

[jscheuer1]

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:

<area nohref shape="rect" . . .

But I don't believe it's technically required when one is not linking the area tag.