position div at mouse for specific usemap elements

Question

I need to position a div on an img using a usemap.

Only when the mouse hovers over a specific area, the div would appear - exactly at that mouse position.

I have found a few examples with jquery the sorts of

jQuery(document).ready(function(){
   $("#mydiv").mouseover(function(e){
      $('#showDiv').html(e.pageX +', '+ e.pageY);
   });
})

but this calls my div always; I'd like to show it only when it hovers over specific area elements. (Hope I was clear?).Thanks

I think I found what I was looking for here: http://stackoverflow.com/questions/4529957/get-position-of-map-areahtml — transient_loop, Mar 14 '12 at 16:38

Elliot Bonneville · Answer 1 · 2012-03-13T21:19:55.473

0

Hide the div on mouseout() and upon page ready.

jQuery(document).ready(function(){
    $('#showDiv').hide();

    $("#mydiv").mouseover(function(e){
       $('#showDiv').html(e.pageX +', '+ e.pageY);
       $('#showDiv').show()
    });

    $('#mydiv').mouseout(function() {
        $('#showDiv').hide();
    });
})

edited Mar 13 '12 at 21:19

answered Mar 13 '12 at 21:13

Elliot Bonneville

51,872
23
96
123

I think you need to show the div in your `mouseover`: `$('#showDiv').show()` – CAbbott Mar 13 '12 at 21:16
Ok, but this will show my div anywhere on the img. I want it to appear only when hovering over specific areas of the imagemap, not when hovering over the whole imagemap. – transient_loop Mar 13 '12 at 21:57
In other words what I need is a mouseover over an which would then pop up a div right at that and disappear when I leave that – transient_loop Mar 13 '12 at 22:30
Ah, yeah, I'm afraid that kind of question is too general for me to help you there. However, if you have a more specific question once you start implementing it, I'm sure somebody could help you out. – Elliot Bonneville Mar 13 '12 at 22:37

position div at mouse for specific usemap elements

1 Answers1