File size: 6,994 Bytes
25d3e2b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Numbered Anatomical Body Map</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
background-color: #f0f0f0;
font-family: Arial, sans-serif;
}
.body-map {
position: relative;
width: 300px;
height: 600px;
background-color: #fff;
border: 2px solid #000;
}
.body-part {
position: absolute;
background-color: #ddd;
border: 1px solid #999;
transition: background-color 0.3s;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: bold;
}
.body-part:hover {
background-color: #aaa;
cursor: pointer;
}
#part1 { width: 80px; height: 100px; top: 10px; left: 110px; border-radius: 40px 40px 0 0; } /* Head */
#part2 { width: 60px; height: 20px; top: 60px; left: 120px; border-radius: 30px 30px 0 0; } /* Eyes */
#part3 { width: 30px; height: 40px; top: 80px; left: 135px; } /* Nose and Throat */
#part4 { width: 40px; height: 30px; top: 110px; left: 130px; } /* Neck */
#part5 { width: 60px; height: 20px; top: 120px; left: 120px; border-radius: 0 0 30px 30px; } /* Nape */
#part6 { width: 160px; height: 30px; top: 140px; left: 70px; } /* Shoulders */
#part7 { width: 40px; height: 120px; top: 170px; } /* Arms */
#part7.left { left: 30px; }
#part7.right { right: 30px; }
#part8 { width: 30px; height: 30px; top: 290px; } /* Elbows */
#part8.left { left: 35px; }
#part8.right { right: 35px; }
#part9 { width: 35px; height: 80px; top: 320px; } /* Forearms */
#part9.left { left: 32px; }
#part9.right { right: 32px; }
#part10 { width: 35px; height: 50px; top: 400px; } /* Hands */
#part10.left { left: 32px; }
#part10.right { right: 32px; }
#part11 { width: 40px; height: 20px; top: 450px; } /* Fingers */
#part11.left { left: 30px; }
#part11.right { right: 30px; }
#part12 { width: 120px; height: 80px; top: 170px; left: 90px; } /* Chest */
#part13 { width: 100px; height: 100px; top: 250px; left: 100px; } /* Abdomen */
#part14 { width: 120px; height: 60px; top: 350px; left: 90px; } /* Pelvis */
#part15 { width: 160px; height: 40px; top: 410px; left: 70px; } /* Hips */
#part16 { width: 60px; height: 120px; top: 450px; } /* Thighs */
#part16.left { left: 70px; }
#part16.right { right: 70px; }
#part17 { width: 50px; height: 40px; top: 570px; } /* Knees */
#part17.left { left: 75px; }
#part17.right { right: 75px; }
#part18 { width: 45px; height: 100px; top: 610px; } /* Calves */
#part18.left { left: 77px; }
#part18.right { right: 77px; }
#part19 { width: 35px; height: 25px; top: 710px; } /* Ankles */
#part19.left { left: 82px; }
#part19.right { right: 82px; }
#part20 { width: 50px; height: 30px; top: 735px; } /* Feet */
#part20.left { left: 75px; }
#part20.right { right: 75px; }
#part21 { width: 50px; height: 20px; top: 765px; } /* Toes */
#part21.left { left: 75px; }
#part21.right { right: 75px; }
#info-panel {
position: absolute;
top: 10px;
left: 10px;
background-color: rgba(255, 255, 255, 0.8);
padding: 10px;
border-radius: 5px;
display: none;
}
</style>
</head>
<body>
<div class="body-map">
<div id="part1" class="body-part" data-name="Head">1</div>
<div id="part2" class="body-part" data-name="Eyes">2</div>
<div id="part3" class="body-part" data-name="Nose and Throat">3</div>
<div id="part4" class="body-part" data-name="Neck">4</div>
<div id="part5" class="body-part" data-name="Nape">5</div>
<div id="part6" class="body-part" data-name="Shoulders">6</div>
<div id="part7" class="body-part left" data-name="Left Arm">7</div>
<div id="part7" class="body-part right" data-name="Right Arm">7</div>
<div id="part8" class="body-part left" data-name="Left Elbow">8</div>
<div id="part8" class="body-part right" data-name="Right Elbow">8</div>
<div id="part9" class="body-part left" data-name="Left Forearm">9</div>
<div id="part9" class="body-part right" data-name="Right Forearm">9</div>
<div id="part10" class="body-part left" data-name="Left Hand">10</div>
<div id="part10" class="body-part right" data-name="Right Hand">10</div>
<div id="part11" class="body-part left" data-name="Left Fingers">11</div>
<div id="part11" class="body-part right" data-name="Right Fingers">11</div>
<div id="part12" class="body-part" data-name="Chest">12</div>
<div id="part13" class="body-part" data-name="Abdomen">13</div>
<div id="part14" class="body-part" data-name="Pelvis">14</div>
<div id="part15" class="body-part" data-name="Hips">15</div>
<div id="part16" class="body-part left" data-name="Left Thigh">16</div>
<div id="part16" class="body-part right" data-name="Right Thigh">16</div>
<div id="part17" class="body-part left" data-name="Left Knee">17</div>
<div id="part17" class="body-part right" data-name="Right Knee">17</div>
<div id="part18" class="body-part left" data-name="Left Calf">18</div>
<div id="part18" class="body-part right" data-name="Right Calf">18</div>
<div id="part19" class="body-part left" data-name="Left Ankle">19</div>
<div id="part19" class="body-part right" data-name="Right Ankle">19</div>
<div id="part20" class="body-part left" data-name="Left Foot">20</div>
<div id="part20" class="body-part right" data-name="Right Foot">20</div>
<div id="part21" class="body-part left" data-name="Left Toes">21</div>
<div id="part21" class="body-part right" data-name="Right Toes">21</div>
</div>
<div id="info-panel"></div>
<script>
const bodyParts = document.querySelectorAll('.body-part');
const infoPanel = document.getElementById('info-panel');
bodyParts.forEach(part => {
part.addEventListener('click', () => {
const partName = part.getAttribute('data-name');
const partNumber = part.id.replace('part', '');
infoPanel.textContent = `${partNumber}. ${partName}`;
infoPanel.style.display = 'block';
});
});
</script>
</body>
</html> |