JSFiddle - React, Tailwind, and code Playground

HTML

<img class="fit-picture"
     src="http://www.dessins-plaisirs.fr/wp-content/uploads/2013/06/homme-assis.jpg"
     alt="La source de l'image n'est certainement pas bonne..." />

<FORM>
<INPUT type= "radio" name="Bodypart" value="oeil" checked> Oeil
<INPUT type= "radio" name="Bodypart" value="racine"> racine des cheveux/nuque
<INPUT type= "radio" name="Bodypart" value="epaule"> epaule
<INPUT type= "radio" name="Bodypart" value="poitrine"> poitrine
<INPUT type= "radio" name="Bodypart" value="coude"> coude
<INPUT type= "radio" name="Bodypart" value="poignet"> poignet
<INPUT type= "radio" name="Bodypart" value="hanche"> hanche
<INPUT type= "radio" name="Bodypart" value="genou"> genou
<INPUT type= "radio" name="Bodypart" value="cheville"> cheville
<INPUT type= "radio" name="Bodypart" value="orteil"> orteil
<INPUT type= "radio" name="Bodypart" value="ecran"> ecran
<INPUT type= "radio" name="Bodypart" value="etalon"> etalon
</FORM>

<div id="oeil" > oeil </div>
<div id="racine" style="display: none;"> racine </div>
<div id="epaule" style="display: none;"> epaule </div>
<div id="poitrine" style="display: none;"> poitrine </div>
<div id="coude" style="display: none;"> coude </div>
<div id="poignet" style="display: none;"> poignet </div>
<div id="hanche" style="display: none;"> hanche </div>
<div id="genou" style="display: none;"> genou </div>
<div id="cheville" style="display: none;"> cheville </div>
<div id="orteil" style="display: none;"> orteil </div>
<div id="ecran" ><img src="http://www.dessins-plaisirs.fr/wp-content/uploads/2013/12/portrait-couleur-2.jpg" alt="zut" style="display: none;">  </div>
<div id="etalon" style="display: none;"> etalon </div>

CSS

#oeil{
    color:lightblue;
    font-weight:bold;
    background-color:black;
}

TypeScript

$( "img").click( function(event) {
	switch($('input[name=Bodypart]:checked').val()){
	case "oeil" :
  	$("#oeil").show().css( {position:"absolute", top:event.pageY, left: event.pageX});
    break;
   case "racine" :
  	$("#racine").show().css( {position:"absolute", top:event.pageY, left: event.pageX});
    break;
   case "epaule" :
  	$("#epaule").show().css( {position:"absolute", top:event.pageY, left: event.pageX});
    break;
   case "poitrine" :
  	$("#poitrine").show().css( {position:"absolute", top:event.pageY, left: event.pageX});
    break;
   case "coude" :
  	$("#coude").show().css( {position:"absolute", top:event.pageY, left: event.pageX});
    break;
   case "poignet" :
  	$("#poignet").show().css( {position:"absolute", top:event.pageY, left: event.pageX});
    break;
   case "hanche" :
  	$("#hanche").show().css( {position:"absolute", top:event.pageY, left: event.pageX});
    break;
   case "genou" :
  	$("#genou").show().css( {position:"absolute", top:event.pageY, left: event.pageX});
    break;
   case "cheville" :
  	$("#cheville").show().css( {position:"absolute", top:event.pageY, left: event.pageX});
    break;
   case "orteil" :
  	$("#orteil").show().css( {position:"absolute", top:event.pageY, left: event.pageX});
    break;
   case "ecran" :
  	$("#ecran").show().css( {position:"absolute", top:event.pageY, left: event.pageX});
    break;
   case "etalon" :
  	$("#etalon").show().css( {position:"absolute", top:event.pageY, left: event.pageX});
    break;
  }
});