Positionierung

HTML

<span class="GruppeAanzeigen">GruppeA</span>
<span class="GruppeBanzeigen">GruppeB</span>

<div id="karte">
    <img src="http://openiconlibrary.sourceforge.net/gallery2/open_icon_library-full/icons/png/256x256/intl/flag-hk.png">
         <img class="gruppeA p1" src="http://openiconlibrary.sourceforge.net/gallery2/open_icon_library-full/icons/png/16x16/symbols/pictogram-din-m019-use_lock.png" title="beschreibung">
         <img class="gruppeA p2" src="http://openiconlibrary.sourceforge.net/gallery2/open_icon_library-full/icons/png/16x16/symbols/pictogram-din-m019-use_lock.png" title="beschreibung">
         <img class="gruppeB p3" src="http://openiconlibrary.sourceforge.net/gallery2/open_icon_library-full/icons/png/16x16/symbols/pictogram-din-m019-use_lock.png" title="beschreibung">
         <img class="gruppeB p4" src="http://openiconlibrary.sourceforge.net/gallery2/open_icon_library-full/icons/png/16x16/symbols/pictogram-din-m019-use_lock.png" title="beschreibung">
         <img class="gruppeB p5" src="http://openiconlibrary.sourceforge.net/gallery2/open_icon_library-full/icons/png/16x16/symbols/pictogram-din-m019-use_lock.png" title="beschreibung">
</div>

CSS

#karte {position:relative;}
/*Positionen der einzelnen punkte*/
.p1{position:absolute; top:10px; left: 35px;}
.p2{position:absolute; top:85px; left: 72px;}
.p3{position:absolute; top:67px; left: 150px;}
.p4{position:absolute; top:150px; left: 45px;}
.p5{position:absolute; top:22px; left: 50px;}

JavaScript

$(document).ready(function() {
   /*default also was beim öffen sein soll oder weg lassen dann alle*/ 
   $('#karte img[class^="gruppe"]').attr('style', 'display:none');
   $(".gruppeA").fadeIn("500") ;    

    $(".GruppeAanzeigen").bind("click",function(){
             $('#karte img[class^="gruppe"]').attr('style', 'display:none');
        $(".gruppeA").fadeIn("500") ;
    });

    $(".GruppeBanzeigen").bind("click",function(){
             $('#karte img[class^="gruppe"]').attr('style', 'display:none');
        $(".gruppeB").slideDown("500") ;
    });
});