Hey there! I'm diving into the world of JavaScript and HTML, and I need some guidance on creating a menu that can toggle visibility of specific content in div(s) depending on which button (picture1-12) is clicked. My idea is to have one div that can display a string corresponding to the selected button. Hopefully, my explanation makes sense! Is there anyone out there who can assist me?
body{
background-color: #A50000;
}
#Container{
width: 90%;
margin: 0 auto;
}
.CenterImage{
text-align: center;
}
.Menu{
float: left;
}<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<title>Test_Site</title>
</head>
<body>
<div ID="Container">
<div class="CenterImage">
<img src="images\HeaderImage.jpg" alt="HeaderImage" width="100%">
</div>
<div class="Menu">
<img src="images/Buttons/Picture1.png" alt="Button_1" style="position: absolute; top: 210px;"/>
<img src="images/Buttons/Picture2.png" alt="Button_2" style="position: absolute; top: 320px;"/>
<img src="images/Buttons/Picture3.png" alt="Button_3" style="position: absolute; top: 430px;"/>
<img src="images/Buttons/Picture4.png" alt="Button_4" style="position: absolute; top: 540px;"/>
<img src="images/Buttons/Picture5.png" alt="Button_5" style="position: absolute; top: 650px;"/>
<img src="images/Buttons/Picture6.png" alt="Button_6" style="position: absolute; top: 760px;"/>
<img src="images/Buttons/Picture7.png" alt="Button_7" style="position: absolute; top: 870px;"/>
<img src="images/Buttons/Picture8.png" alt="Button_8" style="position: absolute; top: 980px;"/>
<img src="images/Buttons/Picture9.png" alt="Button_9" style="position: absolute; top: 1090px;"/>
<img src="images/Buttons/Picture10.png" alt="Button_10" style="position: absolute; top: 1200px;"/>
<img src="images/Buttons/Picture11.png" alt="Button_11" style="position: absolute; top: 1310px;"/>
<img src="images/Buttons/Picture12.png" alt="Button_12" style="position: absolute; top: 1420px;"/>
</div>
</div>
</div>
</body>
</html>