0
Мне нужна помощь с моим кодом, я добавил код css, чтобы получить раскрывающееся меню для активации всякий раз, когда вы наводите курсор на одно из изображений. Он работает ... кроме того, что раскрывающееся меню отображается только в левом верхнем углу, а не прямо под изображением. Пожалуйста, помогитенаведите объект в css со всеми изображениями
<!DOCTYPE html>
<html>
<head>
<title>RSS Earth Map</title>
<style>
body {
\t background-image: url("https://api.edmodo.com/files/717111096/download?f=9k7y8m7if6dkcq345y53s4yp4");
}
img {
\t float: left;
}
.dropdown {
\t position: relative;
\t display: inline-block;
}
.dropdown-content {
\t display: none;
\t position: absolute;
\t background-color: black;
\t min-width: 160px;
\t box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
\t padding: 12px 16px;
}
.dropdown:hover .dropdown-content {
\t display: block;
}
</style>
</head>
<body><div class="terrain">
<div class="dropdown">
\t <img id="cDunes" data-hover-src = 'https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf' src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"/>
\t <img id="eDunes" data-hover-src = 'https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf' src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"/>
\t <img id="forest" data-hover-src = 'https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf' src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"/>
\t <img id="oasis" data-hover-src = 'https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf' src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"/>
\t <img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="forest" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111094/download?f=8thtza1n3c1jcjcbz8zxjm6oy"><img id="eDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111093/download?f=butw29huynzzfmr2khesrabmf"><img id="oasis" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111095/download?f=5zrg0l9f98ec2wak40fm2wkwi"><img id="cDunes" data-hover-src="https://api.edmodo.com/files/717230700/download?f=4djrzz4g3ebonnu51c14r1yaf" src="https://api.edmodo.com/files/717111092/download?f=5xvdsuiuz1khl27tlrkqk9ihy">
<div class="dropdown-content">
<p> teleport </p>
</div>
</div>
</div>
<script>
\t \t \t function moveBase() {
\t \t \t
\t \t \t \t //Assign event for each image holding a hover-src
\t \t \t \t for(var tL=document.querySelectorAll('img[data-hover-src]'), i=0, j=tL.length; i<j; i++){
\t \t \t \t \t tL[i].addEventListener('click', replaceImage)
\t \t \t \t }
\t \t \t
\t \t \t function resetToOriginal(){
\t \t \t \t //Sets all images holding a original-src back to it
\t \t \t \t for(var tL=document.querySelectorAll('img[data-original-src]'), i=0, j=tL.length; i<j; i++){
\t \t \t \t \t var tS = tL[i].getAttribute('data-original-src');
\t \t \t \t \t (tS !== tL[i].src) && (tL[i].src = tS)
\t \t \t \t }
\t \t \t }
\t \t \t function replaceImage(e){
\t \t \t \t //Clicked element
\t \t \t \t var tE = e.srcElement || e.target;
\t \t \t \t //Storing the original src
\t \t \t \t !tE.getAttribute('data-original-src') && tE.setAttribute('data-original-src', tE.src);
\t \t \t \t //Reseting all the images
\t \t \t \t resetToOriginal()
\t \t \t \t //Change the src
\t \t \t \t tE.src = tE.getAttribute('data-hover-src') || tE.src
\t \t \t }
\t \t }
</script>
</body>
</html>
Я просто хочу, чтобы он зависал вниз, а также хотел, чтобы его можно было щелкнуть с помощью коробки. Так как есть так много изображений на оригинале, есть ли более простой способ сделать это? –
Позвольте мне понять, понимаю ли вы, что вы делаете - вы хотите, чтобы ящик отображался прямо под изображением, которое было зависшим, верно? Вы хотите, чтобы изображение можно было щелкнуть, чтобы открыть окно? –
Да, и всякий раз, когда пользователь нажимает на телепорт, я хочу, чтобы изображение изменилось на деревню или (телепорт), но не удалось телепортировать несколько других раз после этого. –