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 here http://montrealaikikai.qc.ca/site-www.montrealaikikai.qc.ca-20091214-204513/index.php?option=com_content&task=view&id=16&Itemid=84 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>
