var button = document.querySelectorAll('.obj');
for (var a = 0; a < button.length; a++) {
button[a].addEventListener('click',function()
{
document.getElementById("n").style.display="inline";
alert("Click on NEXT Button to move at position B");
});
}
Below is HTML code
<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
</head>
<body >
<div id="main_ob_plot">
<div><marquee direction="left"><img id="birds" src="images\birds.gif"></marquee></div>
<a href="2.html"><img id="result" src="images\result.PNG" ></a>
<img id="r" src="images\reset.PNG" onclick="Reset()">
<img id="n" src="images\next.PNG" onclick="next()">
<a href="index.html"><img id="h" src="images\home.PNG"></a>
<div>
<div id="flag_div"><span id="flag-obj">Object 1 (Flag)</span>
<span><img id="flag" src="images\flag.PNG" onclick="flag()" class="obj"></span></div>
<div id="pole_div"><span id="pole-obj">Object 2 (Pole)</span>
<span><img id="pole" src="images\pole.PNG" onclick="pole()" class="obj"></span></div>
<div id="house_div"><span id="house-obj">Object 3 (House)</span>
<span><img id="house" src="images\house.PNG" onclick="house()" class="obj"></span></div>
<div id="wind_div"><span id="wind-obj">Object 4 (Wind Mill)</span>
<span> <img id="wind" src="images\wind.gif" onclick="wind()" class="obj"></span></div>
<div id="tree_div"><span id="tree-obj">Object 5 (Tree)</span>
<img id="crow" src="images\crow.gif">
<span> <img id="tree" src="images\tree.PNG" onclick="tree()" class="obj"></span></div>
<img id="sc1_img" class="sc1_img" src="images\sc1.jpg" onclick="flag()">
<img id="sc2_img" src="images\sc2.jpg" onclick="pole()">
<img id="sc3_img" src="images\sc3.jpg" onclick="house()">
<img id="sc4_img" src="images\sc4.jpg" onclick="wind()">
<img id="sc5_img" src="images\sc5.jpg" onclick="tree()">
</div>
<div id="sheet">
<img id="lineobja1img" src="images\l1_black.PNG" alt="linea1">
<img id="lineobja2img" src="images\l2_black.PNG" alt="linea2">
<img id="lineobja3img" src="images\l3_black.PNG" alt="linea3">
<img id="lineobja4img" src="images\l4_black.PNG" alt="linea4">
<img id="lineobja5img" src="images\l5_black.PNG" alt="linea5">
<img id="lineobjb1img" src="images\l1_blackb.PNG" alt="lineb1">
<img id="lineobjb2img" src="images\l2_blackb.PNG" alt="lineb2">
<img id="lineobjb3img" src="images\l3_blackb.PNG" alt="lineb3">
<img id="lineobjb4img" src="images\l4_blackb.PNG" alt="lineb4">
<img id="lineobjb5img" src="images\l5_blackb.PNG" alt="lineb5">
<img id="refa" src="images\refa.PNG" alt="ref point a">
<img id="refdot1" src="images\refdot1.PNG" alt="ref dot1">
<img id="refdot2" src="images\refdot2.PNG" alt="ref dot2">
<img id="refb" src="images\refb.PNG" alt="ref point b">
<img id="drawobjimg" src="images\drawobj.PNG" class="draw" alt="draw">
</div>
<div id="adilade_view"><center><img id="alidade_img" src="images\alidade.PNG"></center></div>
<img id="stand_img" src="images\stand.PNG">
<img id="tripodimg" src="images\tri.PNG" alt="tri">
<div id="sheet2">
<img id="lineobja1img2" src="images\l1_black2.PNG" alt="linea1">
<img id="lineobja2img2" src="images\l2_black2.PNG" alt="linea2">
<img id="lineobja3img2" src="images\l3_black2.PNG" alt="linea3">
<img id="lineobja4img2" src="images\l4_black2.PNG" alt="linea4">
<img id="lineobja5img2" src="images\l5_black2.PNG" alt="linea5">
<img id="lineobjb1img2" src="images\l1_blackb2.PNG" alt="lineb1">
<img id="lineobjb2img2" src="images\l2_blackb2.PNG" alt="lineb2">
<img id="lineobjb3img2" src="images\l3_blackb2.PNG" alt="lineb3">
<img id="lineobjb4img2" src="images\l4_blackb2.PNG" alt="lineb4">
<img id="lineobjb5img2" src="images\l5_blackb2.PNG" alt="lineb5">
<img id="refa2" src="images\refa2.PNG" alt="ref point a">
<img id="refdot12" src="images\refdot12.PNG" alt="ref dot1">
<img id="refdot22" src="images\refdot22.PNG" alt="ref dot2">
<img id="refb2" src="images\refb2.PNG" alt="ref point b">
<img id="drawobjimg2" src="images\drawobj2.PNG" class="draw" alt="draw">
</div>
<img id="tripodimg2" src="images\tri2.PNG" alt="tri">
</div>
<script src="js/main.js"></script>
<script src="js/main2.js"></script>
</body>
</html>
Below is my CSS code
* {
margin: 0px;
padding: 0;
}
/*header section template styling*/
#header {
border-bottom: 8px solid #ff6600;
font-family: 'Raleway', sans-serif;
width: 1890px;
top: 0;
min-width: 500px;
background-color: #fff!important;
}
#header img {
padding: 8px 8px 4px 32px;
}
h2 {
font-size: large;
}
#steps{
margin-top: 20px;
font-size: 30px;
}
ol{
margin-left: 50px;
font-size: 20px;
}
#labName {
float: right;
font-size: 25px;
align-items: center;
margin-top: 30px;
margin-right: 40px;
color: #2C99CE;
}
#exp-name {
width: 1890px;
text-align: center;
padding: 10px;
height: 20px;
color: #2C99CE;
font-family: 'Raleway', sans-serif;
border-bottom: 1px solid #333;
}
#main{
margin-top: 50px;
margin-left: 300px;
height: 700px;
width: 1000px;
background-color: white;
border: 3px solid black;
border-radius: 10px;
}
#main_ob_plot{
margin-top: 10px;
margin-left: 10px;
height: 720px;
width: 1400px;
background-color: blanchedalmond;
border: 3px solid black;
border-radius: 10px;
background-image: url("../images/Capture.png");
}
#birds{
height:90px;
width:350px;
}
#flag{
margin-left: 175px;
float:left;
cursor: pointer;
position:absolute;
}
#flag-obj{
position: absolute;
left:15%;
color: black;
font-size: medium;
background-color: blanchedalmond;
white-space: nowrap;
border:2px solid black;
border-radius: 10px;
font-weight: bolder;
transform: translateX(-50%);
padding: 10px 10px;
visibility: hidden;
opacity: 0;
transition: opacity 0.5 s ease;
}
#flag-obj::before{
content: "";
position: absolute;
left:50%;
top:100%;
transform: translateX(-50%);
border:15px solid;
border-color: blanchedalmond #0000 #0000 #0000;
}
#flag_div:hover #flag-obj{
visibility: visible;
opacity: 0.9;
}
#pole{
margin-top: 33px;
margin-left: 345px;
float:left;
cursor: pointer;
position:absolute;
}
#pole-obj{
position: absolute;
left: 21%;
color: black;
font-size: medium;
background-color: blanchedalmond;
white-space: nowrap;
border:2px solid black;
border-radius: 10px;
font-weight: bolder;
transform: translateX(-50%);
padding: 10px 15px;
visibility: hidden;
opacity: 0;
transition: opacity 0.5 s ease;
}
#pole-obj::before{
content: "";
position: absolute;
left:50%;
top:100%;
transform: translateX(-50%);
border:15px solid;
border-color: blanchedalmond #0000 #0000 #0000;
}
#pole_div:hover #pole-obj{
visibility: visible;
opacity: 0.9;
}
#house{
margin-top: 60px;
margin-left: 495px;
float:left;
cursor: pointer;
position:absolute;
}
#house-obj{
position: absolute;
left: 32.5%;
top:26%;
color: black;
font-size: medium;
background-color: blanchedalmond;
white-space: nowrap;
border:2px solid black;
border-radius: 10px;
font-weight: bolder;
transform: translateX(-50%);
padding: 10px 15px;
visibility: hidden;
opacity: 0;
transition: opacity 0.5 s ease;
}
#house-obj::before{
content: "";
position: absolute;
left:50%;
top:100%;
transform: translateX(-50%);
border:15px solid;
border-color: blanchedalmond #0000 #0000 #0000;
}
#house_div:hover #house-obj{
visibility: visible;
opacity: 0.9;
}
#wind{
height: 320px;
width:170px;
margin-left: 880px;
float:left;
cursor: pointer;
position:absolute;
}
#wind-obj{
position: absolute;
left: 51%;
top:23%;
color: black;
font-size: medium;
background-color: blanchedalmond;
white-space: nowrap;
border:2px solid black;
border-radius: 10px;
font-weight: bolder;
transform: translateX(-50%);
padding: 10px 15px;
visibility: hidden;
opacity: 0;
transition: opacity 0.5 s ease;
}
#wind-obj::before{
content: "";
position: absolute;
left:50%;
top:100%;
transform: translateX(-50%);
border:15px solid;
border-color: blanchedalmond #0000 #0000 #0000;
}
#wind_div:hover #wind-obj{
visibility: visible;
opacity: 0.9;
}
#crow{
height:50px;
width:20px;
position: absolute;
margin-left: 1260px;
margin-top: 70px;
}
#tree{
height: 170px;
width: 150px;
margin-top: 100px;
margin-left: 1195px;
float:left;
cursor: pointer;
position:absolute;
}
#tree-obj{
position: absolute;
left: 67%;
top:29%;
color: black;
font-size: medium;
background-color: blanchedalmond;
white-space: nowrap;
border:2px solid black;
border-radius: 10px;
font-weight: bolder;
transform: translateX(-50%);
padding: 10px 10px;
visibility: hidden;
opacity: 0;
transition: opacity 0.5 s ease;
}
#tree-obj::before{
content: "";
position: absolute;
left:50%;
top:100%;
transform: translateX(-50%);
border:15px solid;
border-color: blanchedalmond #0000 #0000 #0000;
}
#tree_div:hover #tree-obj{
visibility: visible;
opacity: 0.9;
}
#sc1_img{
height:70px;
width:70px;
margin-left: 150px;
margin-top: 10px;
float:left;
position: absolute;
cursor: pointer;
}
#sc2_img{
height:100px;
width:80px;
margin-top: 60px;
margin-left: 343px;
float:left;
position: absolute;
cursor: pointer;
}
#sc3_img{
height:60px;
width:100px;
margin-top: 100px;
margin-left:605px;
float:left;
position: absolute;
cursor: pointer;
}
#sc4_img{
height:120px;
width:150px;
position: absolute;
margin-left:890px;
margin-top: 160px;
float:left;
position: absolute;
cursor: pointer;
}
#sc5_img{
height:120px;
width:160px;
position: relative;
margin-left: 1190px;
margin-top: 150px;
float:left;
position: absolute;
cursor: pointer;
}
#back_info{
margin-left: 350px;
margin-top: 120px;
height: 70px;
width: 300px;
font-size: large;
color:black;
background-color: #23B2EE;
font-weight: bolder;
border: 3px solid black;
border-radius: 10px;
cursor: pointer;
}
#back_info:hover{
color:black;;
background-color: #009dff;
}
#pta{
margin-left: 350px;
margin-top: 100px;
height: 70px;
width: 300px;
font-size: large;
color:black;
background-color: #23B2EE;
font-weight: bold;
border: 3px solid black;
border-radius: 10px;
cursor: pointer;
}
#pta:hover{
color:black;;
background-color: #009dff;
}
#set{
margin-left: 350px;
margin-top: 80px;
height: 70px;
width: 300px;
font-size: medium;
color:whitesmoke;
background-color: #222222;
font-weight: bold;
border: 3px solid black;
border-radius: 10px;
cursor: pointer;
}
#set:hover{
color:burlywood;
}
#plot{
margin-left: 350px;
margin-top: 100px;
height: 70px;
width: 300px;
font-size: large;
color:black;
background-color: #23B2EE;
font-weight: bold;
border: 3px solid black;
border-radius: 10px;
cursor: pointer;
}
#plot:hover{
color:black;;
background-color: #009dff;
}
#image_slider{
height:400px;
width: 700px;
margin-top: 30px;
margin-left: 150px;
border-radius: 10px;
border:2px solid black;
box-shadow: 0px 0px 20px #a0621a;
}
#img_sl{
height:400px;
width: 700px;
}
#rad_para{
font-weight: bold;
font-size:25px;
text-align: justify;
padding: 30px;
}
#back{
margin-left: 850px;
margin-top: 35px;
height: 50px;
width: 120px;
font-size: medium;
color:black;
background-color: #23B2EE;
font-weight: bold;
border: 3px solid black;
border-radius: 10px;
cursor: pointer;
}
#back:hover{
color:black;;
background-color: #009dff;
}
#lineobja1img
{
height: 100px;
margin-top: 90px;
font-weight: bolder;
margin-left: 5px;
float:left;
display: none;
position:absolute;
}
#lineobja2img
{
height: 100px;
margin-top: 95px;
margin-left: 18px;
float:left;
display: none;
position:absolute;
}
#lineobja3img
{
height:100px;
margin-top: 95px;
float:left;
display: none;
position:absolute;
margin-left: 28px;
}
#lineobja4img
{
height:100px;
float:left;
display: none;
position:absolute;
margin-left: 45px;
margin-top: 95px;
}
#lineobja5img
{
width: 200px;
height: 100px;
margin-top: 95px;
margin-left:13px;
float:left;
display: none;
position:absolute;
font-weight: bolder;
}
#lineobjb1img
{
height: 100px;
margin-top: 105px;
margin-left: 35px;
float:left;
display: none;
position:absolute;
}
#lineobjb2img
{
height: 100px;
margin-top: 100px;
margin-left: 45px;
float:left;
display: none;
position:absolute;
}
#lineobjb3img
{
height:100px;
margin-top: 100px;
margin-left: 55px;
float:left;
display: none;
position:absolute;
}
#lineobjb4img
{
height:100px;
margin-top: 100px;
margin-left: 60px;
float:left;
display: none;
position:absolute;
}
#lineobjb5img
{
height:100px;
margin-top: 100px;
margin-left: 75px;
float:left;
display: none;
position:fixed;
}
#refa{
margin-top: 170px;
margin-left: 65px;
height:10px;
width:10px;
position: absolute;
float: left;
}
#refdot1{
margin-top: 160px;
margin-left: 75px;
height:10px;
width:5px;
position: absolute;
}
#refdot2{
margin-top: 160px;
margin-left: 120px;
height:10px;
width:5px;
position: absolute;
}
#refb{
margin-top: 170px;
margin-left: 130px;
height:10px;
width:10px;
position: absolute;
}
#drawobjimg
{
margin-top:160px;
margin-left:130px;
height: 50px;
width: 70px;
position:absolute;
}
#sheet
{
margin-top: 285px;
margin-left: 525px;
margin-bottom: 0px;
float: left;
height: 200px;
width:200px;
background-color:#DEDEDE;
transform: perspective(800px)scaleZ(2)rotateX(70deg);
opacity:0.9;
border: 1px 1px 5px 5px solid ;
border-color: #B7410E ;
position:absolute;
cursor: pointer;
}
#tripodimg
{
margin-top: 430px;
float: left;
height: 135px;
width: 260px;
position:fixed;
margin-left: 150px;
cursor: pointer;
}
#adilade_view{
margin-top: 250px;
margin-left: 20px;
width:300px;
height:220px;
background-color:blanchedalmond;
position: absolute;
font-weight: bolder;
font-size: 30px;
padding:10px;
}
#alidade_img{
height: 220px;
width:300px;
}
#stand_img{
height:90px;
width:325px;
float:left;
margin-top: 475px;
margin-left: 20px;
position:relative;
}
#next{
margin-top: 200px;
margin-left: 50px;
height: 35px;
width:100px;
position: absolute;
border-radius:10px;
color:black;
background-color: blanchedalmond;
font-weight: bolder;
font-size: larger;
}
#reset
{
margin-top: 555px;
float: left;
height: 40px;
width: 150px;
margin-left: 150px;
border-radius:10px white;
border:3px solid white;
color:white;
background-color: #00394d;
font-size: medium;
font-weight: bold;
}
#r{
position: absolute;
margin-left: 20px;
margin-top: 570px;
float: left;
height: 50px;
width: 110px;
opacity: 0.9;
cursor: pointer;
}
#n{
position: absolute;
margin-top: 570px;
margin-left: 130px;
float: left;
height: 50px;
width: 90px;
opacity: 0.9;
cursor: pointer;
display: none;
}
#h{
position: absolute;
margin-top: 570px;
margin-left: 220px;
float: left;
height: 50px;
width: 110px;
opacity: 0.9;
cursor: pointer;
}
#result{
position: absolute;
margin-top: 180px;
margin-left:150px;
float: left;
height: 50px;
width: 110px;
opacity: 0.9;
cursor: pointer;
display:none;
}
#home_ob_plot{
margin-top: 555px;
margin-left: 50px;
height: 40px;
width: 150px;
font-size: medium;
color:whitesmoke;
background-color: #00394d;
font-weight: bold;
border-radius:10px white;
border:3px solid white;
cursor: pointer;
float: left;
}
[type=radio]{
display:none;
}
#slider{
height:35vw;
position:relative;
perspective: 1000px;
transform-style: preserve-3d;
}
#slider label{
margin: auto;
width: 60%;
height:100%;
border-radius: 4px;
position: absolute;
left:0;
right: 0;
cursor:pointer;
transition:transform 0.4s ease;
}
#graph{
float: left;
height: 700px;
width: 800px;
margin-top: 20px;
margin-left: 300px;
position: absolute;
}
#home{
float: left;
height: 40px;
width: 100px;
font-size: 20px;
font-weight: bolder;
background-color:green;
color: whitesmoke;
margin-top: 400px;
margin-left: 1150px;
position: absolute;
cursor: pointer;
}
#home:hover{
color:white;
background-color:#3895D3;
}
#symbol{
float: left;
margin-top: 500px;
margin-left: 1100px;
position: absolute;
}
/* FOR B POITION */
#lineobja1img2
{
height: 100px;
margin-top: 90px;
font-weight: bolder;
margin-left: 5px;
float:left;
position:absolute;
}
#lineobja2img2
{
height: 100px;
margin-top: 95px;
margin-left: 18px;
float:left;
position:absolute;
}
#lineobja3img2
{
height:100px;
margin-top: 95px;
float:left;
position:absolute;
margin-left: 28px;
}
#lineobja4img2
{
height:100px;
float:left;
position:absolute;
margin-left: 45px;
margin-top: 95px;
}
#lineobja5img2
{
width: 200px;
height: 100px;
margin-top: 95px;
margin-left:13px;
float:left;
position:absolute;
font-weight: bolder;
}
#lineobjb1img2
{
height: 100px;
margin-top: 105px;
margin-left: 35px;
float:left;
display: none;
position:absolute;
}
#lineobjb2img2
{
height: 100px;
margin-top: 100px;
margin-left: 45px;
float:left;
display: none;
position:absolute;
}
#lineobjb3img2
{
height:100px;
margin-top: 100px;
margin-left: 55px;
float:left;
display: none;
position:absolute;
}
#lineobjb4img2
{
height:100px;
margin-top: 100px;
margin-left: 60px;
float:left;
display: none;
position:absolute;
}
#lineobjb5img2
{
height:100px;
margin-top: 100px;
margin-left: 75px;
float:left;
display: none;
position:fixed;
}
#refa2{
margin-top: 170px;
margin-left: 65px;
height:10px;
width:10px;
position: absolute;
float: left;
}
#refdot12{
margin-top: 160px;
margin-left: 75px;
height:10px;
width:5px;
position: absolute;
}
#refdot22{
margin-top: 160px;
margin-left: 120px;
height:10px;
width:5px;
position: absolute;
}
#refb2{
margin-top: 170px;
margin-left: 130px;
height:10px;
width:10px;
position: absolute;
}
#drawobjimg2
{
margin-top:160px;
margin-left:130px;
height: 50px;
width: 70px;
position:absolute;
}
#sheet2
{
margin-top: 285px;
margin-left: 175px;
margin-bottom: 0px;
float: left;
height: 200px;
width:200px;
background-color:#DEDEDE;
transform: translate(646px)perspective(800px)scaleZ(2)rotateX(70deg);
opacity:0.9;
border: 1px 1px 5px 5px solid ;
border-color: #B7410E ;
position:absolute;
cursor: pointer;
display: none;
}
#tripodimg2
{
margin-top: 430px;
float: left;
height: 135px;
width: 260px;
position:fixed;
margin-left: 790px;
cursor: pointer;
display: none;
}
Below is my JS code
function Reset()
{
window.location.reload();
}
// SLIDING ANIMATION OF IMAGES
var slideIndex = 1;
showSlides(slideIndex);
// Next/previous controls
function plusSlides(n) {
showSlides(slideIndex += n);
}
// Thumbnail image controls
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {slideIndex = 1}
if (n < 1) {slideIndex = slides.length}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
// TIMING FUNCTION TO AUTO CHANGE IMAGES
var slideIndex = 0;
showSlides();
function showSlides() {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slideIndex++;
if (slideIndex > slides.length) {slideIndex = 1}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
setTimeout(showSlides, 2000); // Change image every 2 seconds
}
function set_time()
{
setInterval(image_show,1500);
}
var clear;
function flag()
{
if($('#n').css('display') === 'none')
{
check();
setTimeout(function(){ document.getElementById("alidade_img").src="images/a1.PNG"; }, 400);
setTimeout(function(){ document.getElementById("alidade_img").src="images/a2.PNG"; }, 800);
setTimeout(function(){ document.getElementById("drawobjimg").style.transform="translate(-110px,-45px)scale(1.5)rotateY(120deg)"; }, 400);
setTimeout(function(){ document.getElementById("drawobjimg").style.transform="translate(0px,0px)"; }, 800);
setInterval(() => {document.getElementById("lineobja1img").style.display="inline"}, 400);
/*document.getElementById("drawobjimg").style.transform="translate(-115px,-35px)scale(1.2)rotateY(150deg)";
document.getElementById("lineobja1img").style.display="inline";*/
}
else
{ setTimeout(function(){ document.getElementById("alidade_img").src="images/a1.PNG"; }, 400);
setTimeout(function(){ document.getElementById("alidade_img").src="images/a2.PNG"; }, 800);
setTimeout(function(){ document.getElementById("drawobjimg2").style.transform="translate(-75px,-35px)scale(1.2)rotateY(170deg)"; }, 400);
setTimeout(function(){ document.getElementById("drawobjimg2").style.transform="translate(0px,0px)"; }, 800);
setInterval(() => {document.getElementById("lineobjb1img2").style.display="inline"}, 400);
/* document.getElementById("drawobjimg").style.transform="translate(-75px,-35px)scale(1.2)rotateY(170deg)";
document.getElementById("lineobjb1img").style.display="inline";*/
}
}
function pole()
{
if($('#n').css('display') === 'none')
{
setTimeout(function(){ document.getElementById("alidade_img").src="images/b1.PNG"; }, 400);
setTimeout(function(){ document.getElementById("alidade_img").src="images/b2.PNG"; }, 800);
setTimeout(function(){ document.getElementById("drawobjimg").style.transform="translate(-105px,-60px)scale(2)rotateY(110deg)"; }, 400);
setTimeout(function(){ document.getElementById("drawobjimg").style.transform="translate(0px,0px)"; }, 800);
setInterval(() => {document.getElementById("lineobja2img").style.display="inline"}, 400);
/*document.getElementById("drawobjimg").style.transform="translate(-100px,-50px)scale(2)rotateY(110deg)";
document.getElementById("lineobja2img").style.display="inline";*/
}
else
{
setTimeout(function(){ document.getElementById("alidade_img").src="images/b1.PNG"; }, 400);
setTimeout(function(){ document.getElementById("alidade_img").src="images/b2.PNG"; }, 800);
setTimeout(function(){ document.getElementById("drawobjimg2").style.transform="translate(-75px,-45px)scale(1.5)rotateY(160deg)"; }, 400);
setTimeout(function(){ document.getElementById("drawobjimg2").style.transform="translate(0px,0px)"; }, 800);
setInterval(() => {document.getElementById("lineobjb2img2").style.display="inline"}, 400);
/*document.getElementById("drawobjimg").style.transform="translate(-75px,-45px)scale(1.5)rotateY(160deg)";
document.getElementById("lineobjb2img").style.display="inline";*/
}
}
function house()
{
if($('#n').css('display') === 'none')
{
setTimeout(function(){ document.getElementById("alidade_img").src="images/c1.PNG"; }, 400);
setTimeout(function(){ document.getElementById("alidade_img").src="images/c2.PNG"; }, 800);
setTimeout(function(){ document.getElementById("drawobjimg").style.transform="translate(-85px,-80px)scale(3)rotateY(89deg)"; }, 400);
setTimeout(function(){ document.getElementById("drawobjimg").style.transform="translate(0px,0px)"; }, 800);
setInterval(() => {document.getElementById("lineobja3img").style.display="inline"}, 400);
/*document.getElementById("drawobjimg").style.transform="translate(-80px,-65px)scale(2.5)rotateY(85deg)";
document.getElementById("lineobja3img").style.display="inline";*/
}
else{
setTimeout(function(){ document.getElementById("alidade_img").src="images/c1.PNG"; }, 400);
setTimeout(function(){ document.getElementById("alidade_img").src="images/c2.PNG"; }, 800);
setTimeout(function(){ document.getElementById("drawobjimg2").style.transform="translate(-65px,-60px)scale(2)rotateY(120deg)"; }, 400);
setTimeout(function(){ document.getElementById("drawobjimg2").style.transform="translate(0px,0px)"; }, 800);
setInterval(() => {document.getElementById("lineobjb3img2").style.display="inline"}, 400);
/* document.getElementById("drawobjimg").style.transform="translate(-65px,-60px)scale(2)rotateY(120deg)";
document.getElementById("lineobjb3img").style.display="inline";*/
}
}
function wind()
{
if($('#n').css('display') === 'none'){
setTimeout(function(){ document.getElementById("alidade_img").src="images/d1.PNG"; }, 400);
setTimeout(function(){ document.getElementById("alidade_img").src="images/d2.PNG"; }, 800);
setTimeout(function(){ document.getElementById("drawobjimg").style.transform="translate(-65px,-65px)scale(2)rotateY(-290deg)"; }, 400);
setTimeout(function(){ document.getElementById("drawobjimg").style.transform="translate(0px,0px)"; }, 800);
setInterval(() => {document.getElementById("lineobja4img").style.display="inline"}, 400);
/* document.getElementById("drawobjimg").style.transform="translate(-65px,-65px)scale(2)rotateY(-290deg)";
document.getElementById("lineobja4img").style.display="inline";*/
}
else{
setTimeout(function(){ document.getElementById("alidade_img").src="images/d1.PNG"; }, 400);
setTimeout(function(){ document.getElementById("alidade_img").src="images/d2.PNG"; }, 800);
setTimeout(function(){ document.getElementById("drawobjimg2").style.transform="translate(-55px,-60px)scale(2)rotateY(110deg)"; }, 400);
setTimeout(function(){ document.getElementById("drawobjimg2").style.transform="translate(0px,0px)"; }, 800);
setInterval(() => {document.getElementById("lineobjb4img2").style.display="inline"}, 400);
/*document.getElementById("drawobjimg").style.transform="translate(-55px,-60px)scale(2)rotateY(110deg)";
document.getElementById("lineobjb4img").style.display="inline";*/
}
}
function tree()
{
if($('#n').css('display') === 'none')
{
setTimeout(function(){ document.getElementById("alidade_img").src="images/e1.PNG"; }, 400);
setTimeout(function(){ document.getElementById("alidade_img").src="images/e2.PNG"; }, 800);
setTimeout(function(){ document.getElementById("drawobjimg").style.transform="translate(-55px,-55px)scale(1.5)rotateY(-320deg)"; }, 400);
setTimeout(function(){ document.getElementById("drawobjimg").style.transform="translate(0px,0px)"; }, 800);
setInterval(() => {document.getElementById("lineobja5img").style.display="inline"}, 400);
/* document.getElementById("drawobjimg").style.transform="translate(-50px,-55px)scale(1.5)rotateY(-320deg)";
document.getElementById("lineobja5img").style.display="inline";*/
}
else{
setTimeout(function(){ document.getElementById("alidade_img").src="images/e1.PNG"; }, 400);
setTimeout(function(){ document.getElementById("alidade_img").src="images/e2.PNG"; }, 800);
setTimeout(function(){ document.getElementById("drawobjimg2").style.transform="translate(-50px,-70px)scale(2.5)rotateY(-265deg)"; }, 400);
setTimeout(function(){ document.getElementById("drawobjimg2").style.transform="translate(0px,0px)"; }, 800);
setInterval(() => {document.getElementById("lineobjb5img2").style.display="inline"}, 400);
/*document.getElementById("drawobjimg").style.transform="translate(-50px,-55px)scale(1.5)rotateY(-250deg)";
document.getElementById("lineobjb5img").style.display="inline";*/
}
}
var button = document.querySelectorAll('.obj');
for (var a = 0; a < button.length; a++) {
button[a].addEventListener('click',function(){
document.getElementById("n").style.display="inline";
alert("Click on NEXT Button to move at position B");
});
}
function next()
{
document.getElementById("sheet").style.display="none";
document.getElementById("tripodimg").style.display="none";
document.getElementById("sheet2").style.display="inline";
document.getElementById("tripodimg2").style.display="inline";
}