I'm a bit new to web designing. I want to create a classroom with 4 tables, each of them are clickable. I was able to create a drop down menu when clicking to an image of table with this code:
.parent {
position: relative;
display: inline-block;
font-family: Futura, ‘Century Gothic’, AppleGothic, sans-serif;
}
.children {
visibility: hidden;
transition: visibility 0.5s;
position: absolute;
background-color: #f9f9f9;
min-width: 200px;
box-shadow: 0px 8px 16px 0px #f3fb6b;
z-index: 1;
padding: 10px 10px;
}
.children a {
color: black;
padding: 10px 10px;
text-decoration: none;
display: block;
}
.children a:hover {background-color: #f1f1f1}
.parent:focus .children {
visibility: visible;
}
<html>
<head>
<title>
Classroom
</title>
<meta charset="utf-8" />
</head>
<body>
<div id="table"><div tabindex="0" class="parent">
<img src="table1.png" alt="table 1"></img>
<div class="children">You found a paper inside the table.
<ul>
<li><a href="door2_paper.html">Take the paper</a></li>
<li><a href="door2.html">Don't take the paper</a></li>
</ul>
</div>
</div> </div>
</body>
</html>
However, with this method, I have to edit different margin for 4 tables, and if people zoomed in, the location of them would fall apart.
So I want to have a picture of the whole classroom with 4 tables, and the drop down menu would show up only when I click a specific table in the picture.
I had tried with image map, however, it only works with a link, not a drop down menu.
Aucun commentaire:
Enregistrer un commentaire