map_layer_mouseover

HTML

<div id="karte">
<MAP Name="mymap"> 
<AREA Shape="rect" Coords="25,180,125,280" href="http://www.december.com/html/"> 
<AREA Shape="poly" Coords="153,106,186,225,340,193,315,81,304,167" href="http://www.december.com/works/tour.html"> 
</MAP>
<IMG Src="http://www.december.com/html/images/imagemap.gif" Width="500" Height="300"
        Alt="Image Map" Usemap="#mymap" Ismap>
<div class="flag"></div>
</div>

CSS

#karte {
	position: relative;
}
#karte .flag {
	position: absolute;
	background: url('http://static.netzwelt.de/farcade/images/capturetheflag1.gif') no-repeat;
	width: 50px;
	height: 50px;
	top: 200px;
    left: 50px;
}
#mo_termin {
	position: absolute;
	display: none;
	padding: 5px;
	background-color: #FFFFFF;
    border: 1px solid #005CA1;
	color: #005CA1;
	width: 220px;
}

JavaScript

jQuery(document).ready(function($) {
    
    // add div for showing dates
	$('body').append('<div id="mo_termin"></div>');
    
    // show div on mouseover
    $('area, .flag').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();
    });
});