Thanks, I figure out the problem, nothing to do with cluetip or javascript. I positionned 3 divs one on top of another, the areas beneath of all were not detected in all browsers except IE.
On Jan 10, 1:56 pm, Khiet <tkh...@gmail.com> wrote: > Hi, > > I am trying to use an image map with cluetip. Everything seems to work > as expected on IE 8, but the tooltip refuses to display on all other > browsers (Firefox, Chrome) > I am not a Javascript expert, could someone help out and point me to > the right direction? I also tried the plugin "stickytooltip" and the > same difference between browsers happen, is there something special > with image maps? > > You could consult the result > herehttp://montrealaikikai.qc.ca/site-www.montrealaikikai.qc.ca-20091214-... > > Here' how I initialize cluetip: > > <script type="text/javascript" src="includes/js/cluetip/lib/ > jquery.hoverIntent.js"></script> > <script type="text/javascript" src="includes/js/cluetip/ > jquery.cluetip.js"></script> > > <script type="text/javascript"> > <!-- > $(document).ready(function() { > $.cluetip.setup({insertionElement: '.schedule'}); > $('.tip').cluetip( > { > cluetipClass:'default', > attribute:'href', > titleAttribute:'alt', > local:true, > hideLocal:true, > sticky: true, > mouseOutClose: true, > closePosition: 'title', > closeText: 'Close', > arrows: true, > hoverIntent: false, > cursor: 'pointer', > tracking:true, > fx: { > open: 'slideDown', // can be 'show' or > 'slideDown' or 'fadeIn' > openSpeed: '0.5' > }, > // settings for when hoverIntent plugin is used > hoverIntent: { > sensitivity: 1, > interval: 50, > timeout: 0 > } > });}); > > --> > </script> > > And the image map element > > <img name="schedule" src="images/stories/general/schedule.png" > width="386" height="278" border="0" id="schedule" usemap="#m_schedule" > alt="" /> > <map name="m_schedule"> > <area class="tip" shape="rect" coords="323,64,361,136" > href="#free-tooltip" alt="Open practice period"/> > <area class="tip" shape="rect" coords="285,28,323,82" > href="#children-tooltip" alt="Children & Teenagers class"/> > <area class="tip" shape="rect" coords="285,82,323,118" > href="#regular-tooltip" alt="Regular class"/> > <area class="tip" shape="rect" coords="210,207,248,243" > href="#5k-tooltip" alt="Dismarmament class"/> > <area class="tip" shape="rect" coords="247,171,285,207" > href="#regular-tooltip" alt="Regular class"/> > <area class="tip" shape="rect" coords="210,136,248,172" > href="#regular-tooltip" alt="Regular class"/> > <area class="tip" shape="rect" coords="173,136,211,172" > href="#regular-tooltip" alt="Regular class"/> > <area class="tip" shape="rect" coords="136,242,174,278" > href="#4k-tooltip" alt="Advanced class"/> > <area class="tip" shape="rect" coords="136,207,174,243" > href="#regular-tooltip" alt="Regular class" /> > <area class="tip" shape="rect" coords="173,208,211,260" > href="#beginner-tooltip" alt="Beginner class"/> > <area class="tip" shape="rect" coords="210,172,248,208" > href="#regular-tooltip" alt="Regular class"/> > <area class="tip" shape="rect" coords="173,172,211,208" > href="#regular-tooltip" alt="Regular class"/> > <area class="tip" shape="rect" coords="136,172,174,208" > href="#weapon-tooltip" atl="Ken and Jo"/> > <area class="tip" shape="rect" coords="98,172,136,208" > href="#regular-tooltip" alt="Regular class"/> > <area class="tip" shape="rect" coords="98,208,136,260" > href="#beginner-tooltip" alt="Beginner class"/> > </map> > </div> > <div id="tips" style="display: none;"> > <div id="regular-tooltip">Any student of the dojo with a > <i>regular</i> membership could participate in this class.</div> > <div id="children-tooltip">Consult the <a > href="http://www.montrealaikikai.qc.ca/index.php?option=com_content&task=view&id=111";>calendar</a> > for active sessions.</div> > <div id="weapon-tooltip">Class focused on study of aikido > weapons. Any student of the dojo with a <i>regular</i> membership > could participate in this class. Each student should bring their own > equipment. </div> > <div id="4k-tooltip">Participants must be graded 4th kyu or > more</div> > <div id="5k-tooltip">Participants must be graded 5th kyu or > more</div> > <div id="beginner-tooltip">Consult the <a > href="http://www.montrealaikikai.qc.ca/index.php?option=com_content&task=view&id=111";>calendar</a> > for active sessions.</div> > <div id="free-tooltip">No formal class is given. All students > are welcome.</div> > </div>
