body map for mobile

Body map CSS suitable for mobile. Body map can populated, edited to get selected body parts. Populates selected parts dynamically.

by rao b

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<textarea id="selectedBodyPart" >
</textarea>
<p id="testP">Hiiiiiiiiiiiiiiii</p>
<div id="bodyMapContainer">
</div>

CSS

body{
    background-color: white;
}

#selectedBodyPart{
    width : 100%;
    height : 50px;
    vertical-align: top;
}

#bodyMapContainer{
    width:100%;
    height : 100%;
    overflow : hidden;

}

JavaScript

var data = {
    "Forehead Left & Centre": [{x:140,y:9},{x:147,y:9},{x:152,y:10},{x:157,y:13},{x:161,y:16},{x:164,y:19},{x:167,y:23},{x:170,y:28},{x:170,y:33},{x:169,y:35},{x:163,y:34},{x:159,y:35},{x:157,y:36},{x:152,y:34},{x:147,y:34},{x:143,y:35},{x:140,y:38},{x:139,y:39},{x:140,y:9}],
    "Forehead Right & Center": [{x:139,y:39},{x:139,y:31},{x:139,y:25},{x:139,y:19},{x:139,y:13},{x:138,y:9},{x:131,y:9},{x:126,y:11},{x:121,y:13},{x:117,y:15},{x:113,y:19},{x:111,y:23},{x:110,y:28},{x:109,y:32},{x:114,y:33},{x:120,y:34},{x:123,y:36},{x:128,y:34},{x:132,y:35},{x:136,y:36},{x:139,y:39}],
    
    "Nose": [{x:139,y:51},{x:132,y:56},{x:128,y:57},{x:129,y:62},{x:131,y:65},{x:134,y:66},{x:138,y:67},{x:141,y:67},{x:145,y:66},{x:147,y:64},{x:150,y:62},{x:151,y:58},{x:150,y:57},{x:144,y:54},{x:139,y:51}],
    "Left Ear": [{x:158,y:38},{x:161,y:42},{x:161,y:47},{x:158,y:51},{x:156,y:54},{x:156,y:55},{x:156,y:61},{x:157,y:65},{x:158,y:69},{x:162,y:73},{x:163,y:68},{x:166,y:67},{x:170,y:63},{x:171,y:59},{x:172,y:55},{x:172,y:50},{x:172,y:47},{x:167,y:46},{x:168,y:43},{x:169,y:38},{x:169,y:35},{x:163,y:34},{x:158,y:38}],
    "Right Ear": [{x:122,y:56},{x:119,y:51},{x:118,y:47},{x:117,y:43},{x:119,y:39},{x:119,y:35},{x:117,y:33},{x:111,y:33},{x:109,y:33},{x:111,y:41},{x:111,y:46},{x:108,y:47},{x:106,y:47},{x:106,y:52},{x:107,y:57},{x:109,y:62},{x:111,y:66},{x:114,y:68},{x:117,y:68},{x:116,y:72},{x:119,y:70},{x:122,y:66},{x:123,y:61},{x:122,y:56}],
    "Mouth & Cheek": [{x:117,y:76},{x:117,y:73},{x:121,y:68},{x:123,y:63},{x:123,y:56},{x:128,y:56},{x:128,y:63},{x:131,y:66},{x:135,y:67},{x:140,y:68},{x:145,y:67},{x:149,y:64},{x:150,y:61},{x:151,y:57},{x:156,y:55},{x:155,y:63},{x:157,y:68},{x:159,y:71},{x:162,y:74},{x:162,y:77},{x:117,y:76}],
    "Chin": [{x:117,y:80},{x:116,y:77},{x:162,y:78},{x:160,y:81},{x:151,y:87},{x:140,y:91},{x:127,y:87},{x:117,y:80}],
    "Left Shoulder Front":...