You are not logged in.

1

Wednesday, June 12th 2019, 11:42am

thank you for helping me [html&css&javascript]

thank you for reading my question ! *smile*


right now , i am tryting to make a tour through html& css.

i made it possible to move from TOP menu, and also i made wrapped Scence 001, Scence02 in div to make a layer, but it's not moving. so is there anything i can do ?

please check the LINK down below

thank you

link
here

Source code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<head>
	<style>
        *{margin:0; padding: 0; box-sizing: border-box;}
        li{list-style: none;}
       a{text-decoration: none;}
       /*header*/
       header{ background-color: blue;}
        .top_navi {background-color: #ff3333; overflow: hidden; text-align: center;}
        .top_navi li{float: left; width: 25%; height: 40px; line-height: 40px;}
        .top_navi li a{color:#fff;}
        .bottom_navi { text-align: center; height: 40px; line-height: 40px; background:blue;}
       .bottom_navi li {float: left; width: 20%}
        .bottom_navi li a { color: #fff; }#pano{ position: absolute; width:100%;height: 100%;}
        .lilist {position: absolute; bottom: 10px; width: 300px; height: 50px; background-color: rgba(33,33,33, 0.5);line-height: 50px;}
        .lilist li {float: left; width: 50%; color: #fff; text-align: center;}
        .lilist li a {color: #fff;}

	</style>
</head>
<body>
    <header>	    <nav>

	        <ul class="top_navi">
	            <li onclick="goscene('scene_001');"><a href="#">Top_Menu</a></li>
	            <li onclick="goscene('scene_002');"><a href="#" ">Top_Menu</a></li>
	            <li><a href="#">Top_Menu</a></li>
	            <li><a href="#">Top_Menu</a></li>
</ul>
<ul class="bottom_navi">
<li onclick="goscene('scene_001');"><a href="#">Bottom Menu</a></li>
<li onclick="goscene('scene_002');"><a href="#" ">Bottom Menu</a></li>
<li><a href="#">Bottom Menu</a></li>
<li><a href="#">Bottom Menu</a></li>
<li><a href="#">Bottom Menu</a></li>
</ul>
</nav></header>
    
    <!-- VR-CONTENTS -->
<div id="pano" style="width:100%; height: calc(100% - 80px); border:0.1px solid gray;">
</div>
<div class="lilist">
<ul class="snb">
<li onclick="goscene('scene_001');"><a href="">Scene001</a></li>
<li onclick="goscene('scene_002');"><a href="">Scene002</a></li>
</ul> 
</div>
<script src="tour.js"></script>
	<!-- <noscript><table style="width:100%;height:100%;"><tr style="vertical-align:middle;"><td><div style="text-align:center;">ERROR:<br/><br/>Javascript not activated<br/><br/></div></td></tr></table></noscript> -->

	<script>		embedpano({swf:"tour.swf", xml:"tour.xml", target:"pano", html5:"auto", mobilescale:1.0, passQueryParameters:true,onready : krpano_onready_callback});
        function krpano_onready_callback(krpano_interface)
    {
        krpano = krpano_interface;
    }

        function goscene(scene)
    {
        if (krpano)
        {
            krpano.call("loadscene("+ scene +", null, MERGE, BLEND(0.5));");
        }

    }
	</script></div>
</body>
</html>