Sticky Tooltip script

[cavenj]

I used the "Sticky Tooltip script" ( http://www.dynamicdrive.com/dynamicindex5/stickytooltip.htm )
with <area> tag inside an image-map.

It works good with Chrome and Firefox. It works too with IE 7 except the right click. Sticky box doesn't work when I click right.
What can I do. I need help. Thank you.

Joana

Here is the html code :

<div><img src="docs/essai3.jpg" border="0" usemap="#Map">
<map name="Map">
<area shape="rect" coords="41,87,74,131" href="http://www.wmaker.net/starcityisland/index.php?action=article&id_article=413992" data-tooltip="sticky1">
</map>
</div>


<!--HTML for the tooltips-->
<div id="mystickytooltip" class="stickytooltip">
<div style="padding:5px">

<div id="sticky1" class="atip" style="width:262px">
<img src="http://img686.imageshack.us/img686/7383/vancouver.jpg" /><br />BC is the westernmost of Canada's provinces and is famed for its natural beauty.<b><a href="http://en.wikipedia.org/wiki/Vancouver">Vancouver</a></b> is BC's largest city.
</div>

</div>

<div class="stickystatus"></div>
</div>

[jscheuer1]

Use this updated version:

3618

Notes: In IE 6 and 7 the right click, (on)contextmenu as used by the script, doesn't register on the trigger in an image map, rather upon the image. To remedy this I changed the code to instead of testing if the right click is enabled and if the (highlighted) element right clicked upon is registered as a trigger (original code, excerpted from the init function):



$(this).bind("contextmenu", function(e){
if (stickytooltip.rightclickstick && $(e.target).parents().andSelf().filter(targetselector).length==1){ //if oncontextmenu over a target element
stickytooltip.docktooltip($, $tooltip, e)
return false
}
})

Instead of that perhaps more convoluted than it needs to be test, the new code registers a runtime variable in the scope of the init function to track whether or not a tip is open. This is a different test, but amounts to the same result (new code, additions highlighted):


init:function(targetselector, tipid){
jQuery(document).ready(function($){
var $targets=$(targetselector)
var $tooltip=$('#'+tipid).appendTo(document.body)
var curtip = null;
if ($targets.length==0)
return
var $alltips=$tooltip.find('div.atip')
if (!stickytooltip.rightclickstick)
stickytooltip.stickynotice1[1]=''
stickytooltip.stickynotice1=stickytooltip.stickynotice1.join(' ')
stickytooltip.hidebox($, $tooltip)
$targets.bind('mouseenter', function(e){
$alltips.hide().filter('#'+$(this).attr('data-tooltip')).show();
curtip = this;
stickytooltip.showbox($, $tooltip, e);
})
$targets.bind('mouseleave', function(e){
curtip = null;
stickytooltip.hidebox($, $tooltip)
})
$targets.bind('mousem . . .

And use its "thruthiness" later here in the same section of the init function as quoted above as from the original (new code):


$(this).bind("contextmenu", function(e){
if (stickytooltip.rightclickstick && curtip){
stickytooltip.docktooltip($, $tooltip, e)
return false
}
})

Further Notes: Although not used, Its value when true is set to the trigger so that it could conceivably be used elsewhere in the init function and/or passed to other functions. This is much like (in the orignal and new code) the event (e) being passed along to the docktooltip function. It's not required or used there, yet.

[cavenj]

Very good. It works. Thank you very much.