ENGO150/FabrikaHradekTour
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

made the map working

Browse Source 
no I need to add all the points
This commit is contained in:
Václav Šmejkal 2023-05-28 16:04:04 +02:00
parent 3b16383864
commit 7b88652257
Signed by: ENGO150
GPG Key ID: 4A57E86482968843
4 changed files with 163 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@ -11,9 +11,8 @@
<script src="./res/script.js"></script>
</head>
<body>
<img src="http://207.180.212.190/fht/map.png" usemap="#air_map">
<map name="air_map">
<area shape="circle" coords="100,100,30" href="4.htm" alt="4">
</map>
<div class="imgbox">
<img class="center-fit" src="http://207.180.212.190/fht/map.jpg" draggable="false">
</div>
</body>
</html>

2
res/panorama/script.js
View File

@ -82,5 +82,5 @@ function check_param()
open("../index.html", "_self");
}
img_url = './img/' + img_url + '.jpg'; //TODO: Change
img_url = 'http://207.180.212.190/fht/fabrika_imgs/' + img_url + '.jpg'; //TODO: Change
}

45
res/script.js
View File

@ -1,4 +1,45 @@
function open_panorama()
const points =
[
[1240, 625, "1;2"]
];
const tolerance = 3;
window.onload = function()
{
open("./res/panorama.html?img=" + document.getElementById("text_test").value, "_self");
document.querySelector("img").onclick = (e) =>
{
let x = e.pageX - e.target.offsetLeft;
let y = e.pageY - e.target.offsetTop;
for (let i = 0; i < points.length; i++)
{
if
(
(Math.abs(x - points[i][0]) <= tolerance || -Math.abs(x - points[i][0]) >= tolerance) &&
(Math.abs(y - points[i][1]) <= tolerance || -Math.abs(y - points[i][1]) >= tolerance)
)
{
move(points[i][2]);
break;
}
}
}
}
function open_panorama(img)
{
open("./res/panorama.html?img=" + img, "_self");
}
function move(img)
{
if (!img.includes(";"))
{
open_panorama(img);
} else
{
let imgs = img.split(";");
open_panorama(imgs[Math.floor(Math.random() * imgs.length)]);
}
}

20
res/style.css
View File

@ -1,12 +1,18 @@
img
*
{
width: 50%;
display: block;
margin-left: auto;
margin-top: auto;
margin: 0;
padding: 0;
}
area
.imgbox
{
fill: blue;
display: grid;
height: 100%;
}
.center-fit
{
max-width: 100%;
max-height: 100vh;
margin: auto;
}