Hi all, im new here and im facing a problem i cant solve myself.
im trying to place container over some buildning on my background image, so that i can hover to highlight them.
my problem is that if i resize my browser, they dont align any more.
is there i smart way to make sure they stay over the buildings.
here a link to what i got: https://admiring-mclean-7b669c.netlify.app/
im trying to place container over some buildning on my background image, so that i can hover to highlight them.
my problem is that if i resize my browser, they dont align any more.
is there i smart way to make sure they stay over the buildings.
here a link to what i got: https://admiring-mclean-7b669c.netlify.app/
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="bygningtekst1">
<h2>Title</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni cupiditate corporis possimus pariatur impedit iste recusandae id dolores ut magnam ratione eligendi debitis vel, molestias illo saepe deserunt doloribus eaque!
</p>
<a href="#">Link til bygnings underside</a>
</div>
<div id="bygningtekst2">
<h2>Title 2</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni cupiditate corporis possimus pariatur impedit iste recusandae id dolores ut magnam ratione eligendi debitis vel, molestias illo saepe deserunt doloribus eaque!
</p>
<a href="#">Link til bygnings 2 underside</a>
</div>
<div id="bygningtekst3">
<h2>Title 3</h2>
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Magni cupiditate corporis possimus pariatur impedit iste recusandae id dolores ut magnam ratione eligendi debitis vel, molestias illo saepe deserunt doloribus eaque!
</p>
<a href="#">Link til bygnings 3 underside</a>
</div>
<section class="prototype">
<div id="bygning1" class="bygning1" onclick="ClickBygning1(1)" onmouseover="stopShow()" onmouseout="runShow()"></div>
<div id="bygning2" class="bygning2" onclick="ClickBygning1(2)" onmouseover="stopShow()" onmouseout="runShow()"></div>
<div id="bygning3" class="bygning3" onclick="ClickBygning1(3)" onmouseover="stopShow()" onmouseout="runShow()"></div>
</section>
<style>
* {
margin: 0;
padding: 0;
}
.prototype {
width: 100vw;
height: 100vh;
background-image: url(/Eksemple.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center;
}
#bygning1 {
position: absolute;
width: 100vw;
height: 100vh;
background-color: rgba(240, 248, 255);
opacity: 0;
clip-path: polygon(50% 28%, 55% 26%, 60% 43%, 53% 52%, 51.5% 44%);
transition: opacity 1s ease;
}
#bygning1:hover {
width: 100vw;
height: 100vh;
opacity: .5 !important;
background-color: rgba(240, 248, 255);
clip-path: polygon(50% 28%, 55% 26%, 60% 43%, 53% 52%, 51.5% 44%);
}
#bygning2 {
position: absolute;
width: 100vw;
height: 100vh;
opacity: 0;
background-color: rgba(240, 248, 255);
clip-path: polygon(56% 22%, 61% 19%, 70% 37%, 70% 44%, 67% 44%, 64% 39%, 61.5% 41%, 56% 28%);
transition: opacity 1s ease;
}
#bygning2:hover {
position: absolute;
width: 100vw;
height: 100vh;
opacity: .5 !important;
background-color: rgba(240, 248, 255);
clip-path: polygon(56% 22%, 61% 19%, 70% 37%, 70% 44%, 67% 44%, 64% 39%, 61.5% 41%, 56% 28%);
}
#bygning3 {
position: absolute;
width: 100vw;
height: 100vh;
opacity: 0;
background-color: rgba(240, 248, 255);
clip-path: polygon(30.7% 14%, 38% 9%, 43.2% 15%, 44% 26%, 35% 34%, 30.5% 27%);
transition: opacity 1s ease;
}
#bygning3:hover {
position: absolute;
width: 100vw;
height: 100vh;
opacity: .5 !important;
background-color: rgba(240, 248, 255);
clip-path: polygon(30.7% 14%, 38% 9%, 43.2% 15%, 44% 26%, 35% 34%, 30.5% 27%);
}
#bygningtekst1, #bygningtekst2, #bygningtekst3 {
position: absolute;
background-color: aliceblue;
z-index: 999;
width: 30vw;
padding: 1rem;
display: none;
}
#bygningtekst2 {
top: 18vh;
left: 24vw;
}
#bygningtekst1 {
top: 25vh;
left: 18vw;
}
@media only screen and (max-width: 820px) {
.bygning1 {
width: 100vw;
height: 100vh;
background-color: rgba(240, 248, 255);
clip-path: polygon(50% 32.2%, 60% 30.5%, 69% 43%, 57% 52%, 53.5% 44%);
transition: background-color 0.5s ease;
}
.bygning1:hover {
width: 100vw;
height: 100vh;
background-color: rgba(240, 248, 255);
clip-path: polygon(50% 32.2%, 60% 30.5%, 69% 43%, 57% 52%, 53.5% 44%);
}
}
</style>
<script>
console.log("Is the script running, then get after it...")
function ClickBygning1(e) {
if(e == 1) {
var x = document.getElementById("bygningtekst1");
var y = document.querySelectorAll("#bygningtekst2", "#bygningtekst3")
}else if(e == 2) {
var x = document.getElementById("bygningtekst2");
var y = document.querySelectorAll("#bygningtekst1", "#bygningtekst3")
} else if(e == 3) {
var x = document.getElementById("bygningtekst3");
let y = document.querySelectorAll("#bygningtekst1", "#bygningtekst2")
}
if (x.style.display === "block") {
x.style.display = "none";
} else {
x.style.display = "block";
}
}
const boxes = ['bygning1', 'bygning2', 'bygning3']
var i = 0;
var timer;
function ChangeBox() {
var x = document.getElementById(boxes[i]);
if (x.style.opacity == 0.5) {
x.style.opacity = 0;
} else {
x.style.opacity = 0.5;
}
if(i < boxes.length - 1) {
i++
} else {
i = 0;
}
setTimeout(() => {
x.style.opacity = 0;
}, 3000);
timer = setTimeout("ChangeBox()", 3000);
}
function stopShow() {
clearInterval(timer);
}
function runShow() {
ChangeBox();
}
window.onload = runShow;
</script>
</body>
</html>