<div id="Gruppenfoto" class"BoBo">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 675">
    <alt>Gruppenfoto des C-Wurfs vom Bonner Bogen am 06.01.2019</alt>
     <path id="Cookie" 
           class="shape" 
           fill="none" 
           stroke="transparent" 
           stroke-width="1" 
           d="M 747.00,425.00 C 747.00,425.00 721.20,406.05 722.50,407.00 723.80,407.95 732.00,391.00 732.00,391.00 732.00,391.00 730.87,370.36 730.87,370.36 730.87,370.36 727.00,353.00 727.00,353.00 727.00,353.00 722.50,331.93 722.50,331.93 722.50,331.93 721.50,298.00 721.50,298.00 721.50,298.00 728.50,267.00 728.50,267.00 728.50,267.00 747.00,260.00 747.00,260.00 747.00,260.00 766.50,260.00 766.50,260.00 766.50,260.00 783.50,264.50 783.50,264.50 783.50,264.50 809.50,280.00 809.50,280.00 809.50,280.00 809.50,297.50 809.50,297.50 809.50,297.50 814.50,316.50 814.50,316.50 814.50,316.50 822.50,334.00 822.50,334.00 822.50,334.00 822.50,352.50 822.50,352.50 822.50,352.50 817.00,362.50 817.00,362.50 817.00,362.50 811.00,381.00 811.00,381.00 811.00,381.00 811.00,396.50 811.00,396.50 811.00,396.50 818.50,407.00 818.50,407.00 818.50,407.00 813.00,417.00 813.00,417.00 813.00,417.00 782.00,425.00 782.00,425.00 782.00,425.00 747.00,425.00 747.00,425.00">
    </path>
    <text x="670" y="70">Cookie - Welpe 5</text>
  </svg>
</div>
 
 

<style>
/*       Gruppenfotos beschriften      */
/*_____________________________________*/
/* <![CDATA[ */
 

#Gruppenfoto path {
  fill: none;
  pointer-events: all;
}
 
#Gruppenfoto text {
  opacity: 0;
  transition: .3s;
  font-size: 24px;
}
 
#Gruppenfoto path:hover
 {
  cursor: pointer;
}
 
#Gruppenfoto path:hover + text
{
  opacity: 1;
}
 
@media all and (max-width: 500px) {
  #Gruppenfoto text {
        font-size: 28px;
  }
}
#Gruppenfoto { 
  width: 80%;
  margin: 0 auto;
  max-width: 1200px;
}
 
#Gruppenfoto svg {
        background-image: url('https://image.jimcdn.com/app/cms/image/transf/dimension=871x10000:format=jpg/path/s57fec69c5512d8fc/image/i7a38a3fd09bcf055/version/1552757224/image.jpg');
  background-size: cover;
}
 
@media all and (min-width: 750px) {
        #Gruppenfoto svg {
                background-image: url('https://image.jimcdn.com/app/cms/image/transf/dimension=871x10000:format=jpg/path/s57fec69c5512d8fc/image/i7a38a3fd09bcf055/version/1552757224/image.jpg');
        }
}
/*]]>*/
</style>
 
 

<style>
/* <![CDATA[ */
/*       Gruppenfotos beschriften      */
/*_____________________________________*/
 
./*ImageMap Inner-Container*/
        .imgage-map {
                width: 100%;
 
        }   
        /* CSS für rwdImageMaps (responsive)*/
        img[usemap] {
                border: none;
                height: auto;
                max-width: 100%;
                width: auto;
        }     
/*]]>*/
</style>
 

<center>
    <div id="wrap" class="imgage-map">
        <!-- Image Map Generated by http://www.image-map.net/ -->
        <img src="https://image.jimcdn.com/app/cms/image/transf/dimension=871x10000:format=jpg/path/s57fec69c5512d8fc/image/i7a38a3fd09bcf055/version/1552757224/image.jpg" usemap="#image-map" />
        <map name="image-map" id="image-map">
            <area id="Murmel" class="ruede" alt="Murmel - Welpe 7" coords="171,199,174,234,148,274,169,296,244,297,235,252,226,204,199,195" shape="poly" />
        </map>
    </div>
</center>
<script type="text/javascript">
     $(document).ready(function(e) {
        $('img[usemap]').rwdImageMaps();
     });
</script>
 

 
<script>
let person_data = {
	"Murmel":{
		"name":"Murmel",
		"sex": "Rüde",
		"position":"Welpe 7",
		/*"avatar_url":"Welpenfoto"*/
	},
	
}
 
$("area").hover(function(){
	var id = $(this).attr("id");
	var name = $(this).attr("id");
	var pane = createPane(id,name);
	$("#wrap").append(pane);
}, function() {
	$("#pane-"+$(this).attr("id")).remove();
});
 

function createPane(id, name) {
	let data = person_data[name];
	
	var pane = $("<div/>").attr("id", "pane-"+id)
							.addClass("pane")
							
	var avatar = $("<div/>").addClass("pane-avatar")
							.appendTo(pane);
	var img = $("<img/>").attr("src",data.avatar_url)
							.appendTo(avatar);
	
	var info = $("<div/>").addClass("pane-info")
							.appendTo(pane);
	var name = $("<div/>").addClass("pane-name")
							.text(data.name)
							.appendTo(info);
	var sex = $("<div/>").addClass("pane-sex")
								.text(data.sex)
								.appendTo(info);
	var position = $("<div/>").addClass("pane-position")
								.text(data.position)
								.appendTo(info);
	
		return pane;
}
</script>
 

 
<style>
     .pane {
        background: #fcf2d2;
        opacity: 0.8;
        }
    
    .pane-info {
        padding: 1em;
        
    }
    
    .pane-name {
        text-transform: uppercase;
        font-weight: 900;
        font-size: 1.25em;
        color: #704919;
        
    }
    
    .pane-sex {
        color: #d1882e;
    }
    
    .pane-position {
        color: #5c3e38;
    }
 </style>