Moving image in UP, down, left & right direction by buttons with offsetTop offsetLeft in JavaScript

We can create one image object and read the properties of it. These properties can be manged to move the image across the screen in different directions by using up down left and right buttons.
First we will read the present location of the image by using offsetTop and offsetLeft properties of the image object.
We have four HTML buttons and one image on the screen. These buttons have onClick event calling one common function move_img() with different parameters passing to the function. This parameter will carry the directions as value of the button and tells the function in which direction the image needs to move.
After receiving the string value from the button, inside the function we will first fix the step value required the image to jump in each direction.
Then one switch() condition checking is done and the with the case the offsetLeft and offsetTop value of the image object is collected. Then based on the direction ( string attribute ) the x value for Moving Up or down and y value for moving left or right is added or subtracted using the step value based on the button the user clicked.

#imagemovet #Javascriptimagemove #styleLeft #styleTop

[chaansabra]

Can you please add Position Save button to save the changed position after refresh page?

[twistytastylife]

Tell me what all things to write to create a button that moves the image