CODEWITHSUNDEEP
javascriptjqueryhtml
Mathew Elis
Mathew Elis

Reputation: 21

Not able to show a div at the mouse position on an Image Map

I have this image:

enter image description here

And I am trying to show a div when I will hover over a image map I have created. It just works once for some strange reason and does work randomly. Moreover, I have noticed to some sort of delay showing the div when I hover over the image map after the first time. Also, code does not work with Firefox that smoothly whereas with Chrome it does.

Here is my 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 anything I am doing wrong in my jquery snippet? Or I can use anything else?

Upvotes: 2

Views: 299

Answers (1)

nullSharp
nullSharp

Reputation: 331

Give this a try: http://jsfiddle.net/b9kck/4/

I think the issue was that when you would mouse over the content it would think that you left the map, causing it to hide the content. Then it would realize that you entered the map again and show the content again... and so on and so forth.

To get around this I added mouseenters and mouseleaves on the content as well. I added a delay to compensate for any lag that may occur. like so:

$("#content").stop().delay(500).hide();

Upvotes: 1

Related Questions