Update image position

On each click on the button, image position would change. Image position must be predefined.
Like on the first click image position translate to a pre-defined position, on second click image position translate or move to a different pre-defined position & so on.

Please post your code to enable others to assist.

There is no code to display. just have to use this functionality in my code.

And I’m asking you to show us your code, so we can see what you are working with and understand what you are trying to achieve. smile

Please refer to tag id=“change_loc” or class=“btn”

`<html>
<head>
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/pannellum/2.5.6/pannellum.css" integrity="sha512-UoT/Ca6+2kRekuB1IDZgwtDt0ZUfsweWmyNhMqhG4hpnf7sFnhrLrO0zHJr2vFp7eZEvJ3FN58dhVx+YMJMt2A==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/pannellum/2.5.6/pannellum.js" integrity="sha512-EmZuy6vd0ns9wP+3l1hETKq/vNGELFRuLfazPnKKBbDpgZL0sZ7qyao5KgVbGJKOWlAFPNn6G9naB/8WnKN43Q==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.js" integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/cesiumjs/1.78/Build/Cesium/Cesium.js"></script>
<script src="js/jquery.min.js"></script>
</head>
<body>

<div id="display">
<div id="gps_device_div" onkeypress="myFunction(event)"><img id="gps_device" src="img/gps2.png" alt="gps device"></div>
<div id="display_div"><br><br>
<p id="power_on">Powering On...</p>
<p id="detect_sig">Detecting Satellites....</p>
<img id="sig_img" src="img/signals.gif">
<p id="ob1">  &nbsp; Longitude : 77 53 37 N
<br><br>
                   &nbsp;  &nbsp; &nbsp; Lattitude : 29 51 19 E<br><br>
                   &nbsp;  &nbsp; &nbsp; Elevation : 302 m  <br><br>
                   &nbsp;  &nbsp; &nbsp; Obj. ID : Road Point A</p>
<p id="ob2">  &nbsp; Longitude : 77 53 37 N
<br><br>
                   &nbsp;  &nbsp; &nbsp; Lattitude : 29 51 19 E<br><br>
                   &nbsp;  &nbsp; &nbsp; Elevation : 302 m  <br><br>
                   &nbsp;  &nbsp; &nbsp; Obj. ID : Road Point B</p>
<p id="ob3">  &nbsp; Longitude : 77 53 37 N
<br><br>
                   &nbsp;  &nbsp; &nbsp; Lattitude : 29 51 19 E<br><br>
                   &nbsp;  &nbsp; &nbsp; Elevation : 302 m  <br><br>
                   &nbsp;  &nbsp; &nbsp; Obj. ID : Road Point C</p>
<p id="ob4">  &nbsp; Longitude : 77 53 37 N
<br><br>
                   &nbsp;  &nbsp; &nbsp; Lattitude : 29 51 19 E<br><br>
                   &nbsp;  &nbsp; &nbsp; Elevation : 302 m  <br><br>
                   &nbsp;  &nbsp; &nbsp; Obj. ID : Tree Point A</p>
<p id="ob5">  &nbsp; Longitude : 77 53 37 N
<br><br>
                   &nbsp;  &nbsp; &nbsp; Lattitude : 29 51 19 E<br><br>
                   &nbsp;  &nbsp; &nbsp; Elevation : 302 m  <br><br>
                   &nbsp;  &nbsp; &nbsp; Obj. ID : Tree Point B</p>
<p id="ob6">  &nbsp; Longitude : 77 53 37 N
<br><br>
                   &nbsp;  &nbsp; &nbsp; Lattitude : 29 51 19 E<br><br>
                   &nbsp;  &nbsp; &nbsp; Elevation : 302 m  <br><br>
                   &nbsp;  &nbsp; &nbsp; Obj. ID : Tree Point C</p>
<p id="ob7">  &nbsp; Longitude : 77 53 37 N
<br><br>
                   &nbsp;  &nbsp; &nbsp; Lattitude : 29 51 19 E<br><br>
                   &nbsp;  &nbsp; &nbsp; Elevation : 302 m  <br><br>
                   &nbsp;  &nbsp; &nbsp; Obj. ID : Tree Point D</p>
<p id="ob8">  &nbsp; Longitude : 77 53 37 N
<br><br>
                   &nbsp;  &nbsp; &nbsp; Lattitude : 29 51 19 E<br><br>
                   &nbsp;  &nbsp; &nbsp; Elevation : 302 m  <br><br>
                   &nbsp;  &nbsp; &nbsp; Obj. ID : Field Point </p>

</div>
<button id="in" class="bt" disabled onclick="In()">In</button>
<button id="out" class="bt" disabled onclick="out()">Out</button>
<button id="esc" class="bt" disabled onclick="esc()">Esc</button>
<button id="enter" class="bt" disabled onclick="enter()">Enter</button>
<button id="nav" class="bt" onclick="nav()">Nav</button>
<button id="menu" class="bt" onclick="menu()">Menu</button>
<button id="goto" class="bt" disabled onclick="Goto()">Goto</button>
<button id="power" class="bt" disabled onclick="power()">Power</button>
<img id="person" src="img/person4.png">
<button id="start" class="start" onclick="start()">Start </button>
<button id="change_loc" class="btn">Change Loc</button>
<button id="reset" class="reset" onclick="reset()">Reset</button>
</div>
<script src="js/main.js"></script>

</body>
</html>
`

pannellum.viewer('panorama-360-view', {
    "type": "equirectangular",
    "panorama": "https://i.ibb.co/42JSzBv/Screenshot-34.png",
    "autoLoad": true
})

function reset(){
    window.location.reload();
}
function power(){

        document.getElementById("power_on").style.display="inline";
        setTimeout(function(){ swal({position:'top-end', title:"Message",text:"Click on ENTER button to proceed",icon: "info",button: "ok",}) }, 300);
        document.getElementById("enter").disabled = false;
}
function enter(){

    
        document.getElementById("power_on").style.display="none";
        document.getElementById("detect_sig").style.display="inline";
    document.getElementById("sig_img").style.display="inline";
    setTimeout(function(){ swal({position:'top-end', title:"Message",text:"Signals from minimum four satellites are required.Click on IN button for observations",icon: "info",button: "ok",}) }, 1000);
    document.getElementById("in").disabled = false;
    
}
function start(){

    document.getElementById("person").style.display="inline";
    setTimeout(function(){ swal({title:"Message",text:"Click on POWER button on device to turn on GPS",icon: "info",button: "ok",position:"center",}) }, 500);
    document.getElementById("power").disabled = false;
}
function In(){

    document.getElementById("detect_sig").style.display="none";
    document.getElementById("sig_img").style.display="none";
    document.getElementById("ob1").style.display="inline";
    setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 1",icon: "success",button: "ok",}) }, 500);
    document.getElementById("goto").disabled = false;
}

    
    
function Goto(){

    document.getElementById("detect_sig").style.display="none";
    document.getElementById("sig_img").style.display="none";
    document.getElementById("ob1").style.display="none";
    document.getElementById("ob2").style.display="none";
    document.getElementById("ob3").style.display="none";
    document.getElementById("ob4").style.display="none";
    document.getElementById("ob5").style.display="none";
    document.getElementById("ob6").style.display="none";
    document.getElementById("ob7").style.display="none";
    document.getElementById("ob8").style.display="none";
    setTimeout(function(){ swal({title:"Success",text:"Observations are saved successfully!! ",icon: "success",button: "ok",}) }, 500);
    setTimeout(function(){ swal({title:"Message",text:"Click on change location ",icon: "success",button: "ok",}) }, 2500);
   /* document.getElementById("change_loc").disabled = false;*/

}
/*
function change_loc()
{
    var ch=1;
    switch(ch){

        case 1:{

            setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 2",icon: "success",button: "ok",}) }, 500);
            document.getElementById("person").style.transform="translate(-600px,-150px)";
            document.getElementById("ob1").style.display="none";
            document.getElementById("ob2").style.display="inline";
            ch++;
            break;
        }
        case 2:{

            setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 3",icon: "success",button: "ok",}) }, 500);
            document.getElementById("person").style.transform="translate(-40px,-280px)";
            document.getElementById("ob1").style.display="none";
            document.getElementById("ob2").style.display="none";
            document.getElementById("ob3").style.display="inline";
            ch++;
            break;
        }



    }

}*/
/*
function change_loc()
{
var clicks = 0;
if(clicks = 0)
{
    setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 2",icon: "success",button: "ok",}) }, 500);
    document.getElementById("person").style.transform="translate(-600px,-150px)";
    document.getElementById("ob2").style.display="inline";
}
else if(clicks = 1)
{

    setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 3",icon: "success",button: "ok",}) }, 500);
    document.getElementById("person").style.height="80px";
    document.getElementById("person").style.width="40px";
    document.getElementById("person").style.transform="translate(-800px,-200px)";
    document.getElementById("ob3").style.display="inline";

}
++clicks;

}*/


$( "#button-container button" ).on( "click", function() {
    alert("hello")
  });


$.fn.toggleClick = function(funcArray) {
    return this.click(function() {
      var elem = $(this);
      var index = elem.data('index') || 0;
  
      funcArray[index]();
      elem.data('index', (index + 1) % funcArray.length);
    });
  };
  
  $('.btn').toggleClick([
    function() {
       
        setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 2",icon: "success",button: "ok",}) }, 500);
        document.getElementById("person").style.transform="translate(-600px,-150px)";
        document.getElementById("ob2").style.display="inline";
    }, function() {
        setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 3",icon: "success",button: "ok",}) }, 500);
        document.getElementById("person").style.transform="translate(-40px,-280px)";
        document.getElementById("person").style.height="80px";
        document.getElementById("person").style.width="40px";
        document.getElementById("ob3").style.display="inline";
    }, function() {
        setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 4",icon: "success",button: "ok",}) }, 500);
        document.getElementById("person").style.transform="translate(-230px,-260px)";
        document.getElementById("person").style.height="80px";
        document.getElementById("person").style.width="40px";
        document.getElementById("ob4").style.display="inline";
    }, function() {
        setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 5",icon: "success",button: "ok",}) }, 500);
        document.getElementById("person").style.transform="translate(-470px,-260px)";
        document.getElementById("person").style.height="80px";
        document.getElementById("person").style.width="40px";
        document.getElementById("ob5").style.display="inline";
    }, function() {
        setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 6",icon: "success",button: "ok",}) }, 500);
        document.getElementById("person").style.transform="translate(-820px,-260px)";
        document.getElementById("person").style.height="80px";
        document.getElementById("person").style.width="40px";
        document.getElementById("ob6").style.display="inline";
    }, function() {
        setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 7",icon: "success",button: "ok",}) }, 500);
        document.getElementById("person").style.transform="translate(-1000px,-260px)";
        document.getElementById("person").style.height="80px";
        document.getElementById("person").style.width="40px";
        document.getElementById("ob7").style.display="inline";
    }, function() {
        setTimeout(function(){ swal({title:"Success",text:"Click on GOTO button to save reading of locatiion 8",icon: "success",button: "ok",}) }, 500);
        document.getElementById("person").style.transform="translate(-800px,-200px)";
        document.getElementById("person").style.height="80px";
        document.getElementById("person").style.width="40px";
        document.getElementById("ob8").style.display="inline";
    }
  ]);