Good day,
Thanks to the help of stackoverflow users for which I am very grateful, I have successfully implemented a click on a button to navigate to and display a separate section. The following code is working absolutely fine:
<button class="cupid-blue" href="p03" id="btnTwo" onclick="toggle(this)">📰 p3 </button>
Now, I would like that a click on one of the image has exactly the same behaviour and I have programmed my image in the following way :
<a href="#p03"><img src="img_snow.jpg" alt="Snow" style="width:100%"></a>
Now, I am not quite sure how I can link the onclick="toggle(this)" to my image in order to ensure it works and it displays the correct section (p03 in my example above). Up to now, I was quite unsucessful.
The toggle button successfully calls the following javascript function :
function toggleDisplay(className, displayState){
var elements = document.getElementsByClassName(className)
for (var i = 0; i < elements.length; i++){
elements[i].style.display = displayState;
}
}
function toggle(){
document.onclick = function(e) {
if (e.target.tagName == 'BUTTON') {
var href = e.target.getAttribute("href");
toggleDisplay('page', 'none');
document.getElementById(href).style.display = 'block';
}
}
}
I am not quite sure what the problem is and I would be grateful if I could get some guidance (let's put it clear that I'm not asking anyone to write code for me !).
Many thanks for your time and best wishes
Extract of my HTML code :
<!DOCTYPE html>
<head>
<title>Domoos V2 | home</title>
<meta http-equiv="refresh" content="360">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
<meta http-equiv="pragma" content="no-cache">
<link rel="stylesheet" type="text/css" href="css/mystyle.css?rnd=999" />
<script type="text/javascript" src="scripts/display_section.js"></script>
</head>
<body>
<div class="div_screen">
<div class="div_screen_left_frame">
<div class="div_screen_nav1">
<ul id="menu">
<button class="cupid-blue" href="pMain" id="btnOne" onclick="toggle(this)">🏠 Main Page</button>
<button class="cupid-blue" href="p03" id="btnTwo" onclick="toggle(this)">📰 p3 </button>
</ul>
</div>
</div>
<div class="div_screen_contents_frame">
<div class="page active" id="pMain">
<section class="icon fa fa-bolt">
<div class="column">
<a href="#p03"><img src="img_snow.jpg" alt="Snow" style="width:100%"></a>
<center>Chambre 1</center>
</div>
</section>
</div>
<div class="page" id="p02">
<section class="icon fa fa-bolt">
Here comes the 2nd section
</section>
</div>
<div class="page" id="p03">
<section class="icon fa fa-bolt">
Here comes the 3rd section
</section>
</div>
<div class="page" id="p04">
<section class="icon fa fa-bolt">
Here comes the 4th section
</section>
</div>
</div>
</div>
</body>
</html>
If it could be of any help to better understand my question (not sure though), I am also copying an extract of my css:
/* Three image containers (use 25% for four, and 50% for two, etc) */
.column {
float: left;
width: 19.0%;
padding: 2px;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
.div_screen {
font-family:"Quicksand", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 90%;
color: blue;
position: fixed;
top: -3;
left: -3;
width: 1005px;
height: 540 px;
border: 2px solid #de2be4;
/*background: red;*/
}
.div_screen_left_frame {
position: absolute;
left: 1px;
top: 1px;
width: 146px;
height:536px;
border: 1px solid blue;
}
.div_screen_contents_frame {
position: absolute;
left: 150px;
top: 99px;
width: 852px;
height:438px;
border: 1px solid blue;
}
.div_screen_icon {
position: absolute;
left: 0px;
top: 0px;
width: 145px;
height: 95px;
border: 1px solid black;
}
.div_screen_nav1 {
position: absolute;
left: 0px;
top: 95px;
width: 145px;
height: 150px;
border: 1px solid black;
}
.div_screen_nav2 {
position: absolute;
left: 0px;
top: 248px;
width: 145px;
height: 287px;
border: 1px solid black;
}
button.cupid-blue {
background-color: #d7e5f5;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d7e5f5), color-stop(100%, #cbe0f5));
background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: linear-gradient(top, #d7e5f5, #cbe0f5);
border-top: 1px solid #abbbcc;
border-left: 1px solid #a7b6c7;
border-bottom: 1px solid #a1afbf;
border-right: 1px solid #a7b6c7;
border-radius: 12px;
-webkit-box-shadow: inset 0 1px 0 0 white;
box-shadow: inset 0 1px 0 0 white;
color: #1a3e66;
font: normal 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
padding: 6px 0 3px 0;
text-align: center;
text-shadow: 0 1px 1px #fff;
width: 140px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
left: 5 px;
}
button.cupid-blue-rooms {
background-color: #d7e5f5;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d7e5f5), color-stop(100%, #cbe0f5));
background-image: -webkit-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -moz-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -ms-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: -o-linear-gradient(top, #d7e5f5, #cbe0f5);
background-image: linear-gradient(top, #d7e5f5, #cbe0f5);
border-top: 1px solid #abbbcc;
border-left: 1px solid #a7b6c7;
border-bottom: 1px solid #a1afbf;
border-right: 1px solid #a7b6c7;
border-radius: 12px;
-webkit-box-shadow: inset 0 1px 0 0 white;
box-shadow: inset 0 1px 0 0 white;
color: #1a3e66;
font: normal 11px/1 "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
padding: 6px 0 3px 0;
text-align: center;
text-shadow: 0 1px 1px #fff;
width: 130px;
height: 40px;
margin-top: 4px;
margin-bottom: 4px;
left: 5 px;
}
ul {
position: absolute;
z-index: 1;
top: 0;
bottom: 0;
left: 0;
margin: auto;
width: 10%;
padding: 0;
text-align: center;
}
.page{display: none;}
.page.active {display: block;}
