Search code examples
javascriptjqueryhtmlcssimagemap

Imagemap with overlying div: Mouseover disappears on div

Could anyone give me a hint how to solve this?

Fiddle: http://jsfiddle.net/9Br6h/

Have a look at the part left under... with the flag. On the area the mouseover is visible.. but it disappears on the flag - that is the thing I want to remove. It should stay visible.

But please keep in mind that this is a very simple example. In real I've tons of areas and flags. ;o)

jQuery(document).ready(function($) {
    // add div for showing dates
    $('body').append('<div id="mo_termin"></div>');
    // show div on mouseover
    $('area').mouseover(function(event) { 
        var left = event.pageX + 30;
            var top = event.pageY + 5;
            display = '<div class="views-field-field-body">Keine Termine</div>';
        $('#mo_termin').css({top: top,left: left}).html(display).show();
    });
    $('area').mouseout(function() {
        $('#mo_termin').html('').hide();
    });
});
Solution

  • you can use the css property pointer-events: none;as well.

    #karte .flag {
      pointer-events: none; /*Added line*/
    position: absolute;
    background: url('http://static.netzwelt.de/farcade/images/capturetheflag1.gif') no-repeat;
    width: 50px;
    height: 50px;
    top: 200px;
    left: 50px;
}

    Here is the Demo http://jsfiddle.net/9Br6h/2/.