Untitled

<html>
<head>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="js/jquery.maphilight.min.js"></script>
<script type="text/javascript">
    $(function(){
        $.fn.maphilight.defaults = {
            fill: true,
            fillColor: 'ff9900',
            fillOpacity: 0.2,
            stroke: true,
            strokeColor: 'ff9900',
            strokeOpacity: 1,
            strokeWidth: 1,
            fade: true,
            alwaysOn: false,
            neverOn: false,
            groupBy: false,
            wrapClass: true,
            shadow: false,
            shadowX: 0,
            shadowY: 0,
            shadowRadius: 6,
            shadowColor: '000000',
            shadowOpacity: 0.8,
            shadowPosition: 'outside',
            shadowFrom: false
        }

        //DIV ausblenden oder per CSS display:none; setzen
        $('#infobox').hide();

        $('img[usemap]').maphilight();

        $('area').on('click', function(e){
            $a = $(this);
            e.preventDefault();
            $('area').each(function(){
                var d = $(this).data('maphilight') || {};
                if(d.alwaysOn == true){
                    d.alwaysOn = false;
                }
            });
            var data = $a.mouseout().data('maphilight') || {};
            data.alwaysOn = !data.alwaysOn;
            console.log(data);
            $a.data('maphilight', data).trigger('alwaysOn.maphilight');

            //DIV einblenden
            $('#infobox').show();

        });

        //DIV ausblenden
        $('#infobox').on('click', function(){
            $(this).hide();
        });

    });
</script>
</head>
<body>

    <!-- Platzhalter für Zusatzinfos -->
    <div id="infobox" style="padding:10px;z-index:1;position:absolute; top:100px;left:400px;background:#ddd; color:#ff9900;">Was man nicht alles in ein DIV packen kann...</div>

<!-- usemap Angabe wichtig! -->
<img src="karte.gif" width="464" height="320" border="0" usemap="#karte">
<!-- #usemap = name -->
<map name="karte">
    <area shape="poly" coords="141,73,140,25,156,24,161,17,165,13,171,12,173,20,170,42,205,63,201,75,193,85,184,90,168,82,157,76" href=""  rel="area1 - jajaja!">
    <area shape="poly" coords="207,65,202,78,192,90,195,94,202,95,208,97,208,105,210,112,212,118,219,123,224,124,228,128,249,131,255,132,257,138,268,136,274,133,282,133,287,132,297,127,298,113,298,104,309,94,309,83,303,74,296,67,280,65,276,76,269,60,247,58,231,64,220,68,216,70" href="" rel="area2 - jajaja!">
    <area shape="poly" coords="139,76,150,77,161,80,170,85,178,89,184,93,191,91,194,96,205,97,207,103,208,114,211,122,219,124,225,127,224,134,219,132,213,132,206,132,199,135,194,142,159,140,137,131,126,115,121,96,129,82" href="" rel="area3 - jajaja!">
    <area shape="poly" coords="197,141,207,135,214,134,221,136,227,133,228,129,233,132,244,132,251,134,253,138,258,140,265,140,270,138,277,135,283,135,279,141,279,155,282,170,285,177,257,179,252,188,244,193,241,190,231,193,229,190,227,195,220,199,214,207,211,208,198,199,193,184,196,162,202,153" href="" rel="area4 - jajaja!">
    <area shape="poly" coords="207,209,208,222,213,233,219,242,226,244,230,252,236,260,244,261,242,268,223,263,180,304,158,298,139,289,129,281,134,274,115,248,117,239,141,230,159,216,169,204,193,202" href="" rel="area5 - jajaja!">
    <area shape="poly" coords="245,267,247,260,236,257,231,248,227,241,218,236,212,225,210,216,211,210,218,205,222,200,227,197,232,195,238,194,244,195,250,192,255,188,258,181,270,181,285,179,293,194,288,219,294,231,293,236,294,239,292,245,295,251,291,257,291,264,271,276" href=""  rel="area6 - jajaja!">
    <area shape="poly" coords="293,261,297,252,294,244,296,237,297,228,290,219,295,197,314,194,339,214,335,231,338,244,327,255,313,251" href=""  rel="area6 - jajaja!">
</map>

</body>
</html>