javascript - Not able to show a div at the mouse position on an Image Map -
i have image:
and trying show div when hover on image map have created. works once strange reason , work randomly. moreover, have noticed sort of delay showing div when hover on image map after first time. also, code not work firefox smoothly whereas chrome does.
here code till now:
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> #pipelines{ margin-left:auto; margin-right:auto; margin-top:auto; margin-bottom:auto; } #content{ } </style> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>pipeline</title> <script src="http://code.jquery.com/jquery-1.9.1.js"></script> </head> <body> <div id="pipelines"> <img src="2d_pipeline(sample).jpg" usemap="#map" border="0"/> <map name="map" id="map"> <area shape="rect" coords="38,41,152,70" href="#" alt="script" /> </map> </div> <div id="content"><h4>test!</h4></div> <script> $("#map").on('mouseenter',function(e){ $("#content").show(); $("#content").offset({left:e.pagex,top:e.pagey}); }); $("#map").on('mouseleave',function(){ $("#content").css("display", "none"); }); </script> </body> </html> is there doing wrong in jquery snippet? or can use else?
give try: http://jsfiddle.net/b9kck/4/
i think issue when mouse on content think left map, causing hide content. realize entered map again , show content again... , on , forth.
to around added mouseenters , mouseleaves on content well. added delay compensate lag may occur. so:
$("#content").stop().delay(500).hide();
Comments
Post a Comment