taggdaniel/braindev
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Brain Function Hover</title>7 <style>8 body {9 font-family: Arial, sans-serif;10 margin: 0;11 padding: 0;12 display: flex;13 justify-content: center;14 align-items: center;15 height: 100vh;16 background-color: #f5f5f5;17 }18 .container {19 position: relative;20 max-width: 800px;21 }22 .brain-image {23 width: 100%;24 display: block;25 }26 .tooltip {27 position: absolute;28 background-color: #eefdd5;29 border: 1px solid #000;30 padding: 10px;31 border-radius: 5px;32 box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);33 display: none;34 z-index: 10;35 }36 .hotspot {37 position: absolute;38 background-color: rgba(255, 0, 0, 0.4);39 border: 2px solid rgba(255, 0, 0, 0.8);40 border-radius: 50%;41 cursor: pointer;42 width: 50px;43 height: 50px;44 transform: translate(-50%, -50%);45 }46 .hotspot:hover + .tooltip {47 display: block;48 }49 50 .fixed-button {51 position: fixed;52 top: 20px; /* Adjust to your preference */53 right: 20px; /* Adjust to your preference */54 z-index: 1000; /* Ensure it stays above other elements */55 }56 57 .fixed-button a {58 background-color: #4CAF50;59 color: white;60 padding: 10px 20px;61 text-decoration: none;62 font-size: 1rem;63 border-radius: 5px;64 transition: background-color 0.3s ease;65 }66 67 .fixed-button a:hover {68 background-color: #45a049;69 }70 71 </style>72</head>73<body>74 75 <div class="fixed-button">76 <a href="index.html">Go to Home</a>77 </div>78 79 <div class="container">80 <img src="brainfunctionlabelling.png" alt="Brain Function Map" class="brain-image">81 <!-- Hotspots with updated positions -->82 <div class="hotspot" style="top: 40%; left: 15%;"></div>83 <div class="tooltip" style="top: 35%; left: 20%;">Responsible for higher-order <br> cognitive functions like <br> decision-making, problem-solving, <br> and planning.</div>84 85 <div class="hotspot" style="top: 30%; left: 78%;"></div>86 <div class="tooltip" style="top: 25%; left: 83%;">Processes sensory information <br> like touch, spatial awareness, <br>and navigation.</div>87 88 <div class="hotspot" style="top: 55%; left: 50%;"></div>89 <div class="tooltip" style="top: 50%; left: 55%;">Processes emotions like <br>fear and pleasure. <br> Significant in emotional <br> learning and memory.</div>90 91 <div class="hotspot" style="top: 78%; left: 35%;"></div>92 <div class="tooltip" style="top: 73%; left: 40%;">Central to processing <br> auditory information <br> and memory association.</div>93 94 <div class="hotspot" style="top: 65%; left: 85%;"></div>95 <div class="tooltip" style="top: 60%; left: 90%;">Primarily responsible for <br> visual processing, including color, shape, and motion perception.</div>96 97 <div class="hotspot" style="top: 75%; left: 52%;"></div>98 <div class="tooltip" style="top: 70%; left: 57%;">Transmits nerve signals <br> from the cortex and midbrain <br> to organs around the body.<br> For example, the <br> vagus and cardiac accelerator <br> nerves connect to the <br> heart and other organs. <br> These nerves are involved <br> in the rest and digest <br> and fight or flight responses. </div>99 </div>100</body>101<script>102 const hotspots = document.querySelectorAll('.hotspot');103 104 hotspots.forEach(hotspot => {105 hotspot.addEventListener('mouseenter', function () {106 const tooltip = this.nextElementSibling;107 tooltip.style.display = 'block';108 });109 hotspot.addEventListener('mouseleave', function () {110 const tooltip = this.nextElementSibling;111 tooltip.style.display = 'none';112 });113 });114</script>115</html>116