|
|
<!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; } |
|
|
#part2 { width: 60px; height: 20px; top: 60px; left: 120px; border-radius: 30px 30px 0 0; } |
|
|
#part3 { width: 30px; height: 40px; top: 80px; left: 135px; } |
|
|
#part4 { width: 40px; height: 30px; top: 110px; left: 130px; } |
|
|
#part5 { width: 60px; height: 20px; top: 120px; left: 120px; border-radius: 0 0 30px 30px; } |
|
|
#part6 { width: 160px; height: 30px; top: 140px; left: 70px; } |
|
|
#part7 { width: 40px; height: 120px; top: 170px; } |
|
|
#part7.left { left: 30px; } |
|
|
#part7.right { right: 30px; } |
|
|
#part8 { width: 30px; height: 30px; top: 290px; } |
|
|
#part8.left { left: 35px; } |
|
|
#part8.right { right: 35px; } |
|
|
#part9 { width: 35px; height: 80px; top: 320px; } |
|
|
#part9.left { left: 32px; } |
|
|
#part9.right { right: 32px; } |
|
|
#part10 { width: 35px; height: 50px; top: 400px; } |
|
|
#part10.left { left: 32px; } |
|
|
#part10.right { right: 32px; } |
|
|
#part11 { width: 40px; height: 20px; top: 450px; } |
|
|
#part11.left { left: 30px; } |
|
|
#part11.right { right: 30px; } |
|
|
#part12 { width: 120px; height: 80px; top: 170px; left: 90px; } |
|
|
#part13 { width: 100px; height: 100px; top: 250px; left: 100px; } |
|
|
#part14 { width: 120px; height: 60px; top: 350px; left: 90px; } |
|
|
#part15 { width: 160px; height: 40px; top: 410px; left: 70px; } |
|
|
#part16 { width: 60px; height: 120px; top: 450px; } |
|
|
#part16.left { left: 70px; } |
|
|
#part16.right { right: 70px; } |
|
|
#part17 { width: 50px; height: 40px; top: 570px; } |
|
|
#part17.left { left: 75px; } |
|
|
#part17.right { right: 75px; } |
|
|
#part18 { width: 45px; height: 100px; top: 610px; } |
|
|
#part18.left { left: 77px; } |
|
|
#part18.right { right: 77px; } |
|
|
#part19 { width: 35px; height: 25px; top: 710px; } |
|
|
#part19.left { left: 82px; } |
|
|
#part19.right { right: 82px; } |
|
|
#part20 { width: 50px; height: 30px; top: 735px; } |
|
|
#part20.left { left: 75px; } |
|
|
#part20.right { right: 75px; } |
|
|
#part21 { width: 50px; height: 20px; top: 765px; } |
|
|
#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> |
