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.
https://www.plus2net.com/javascript_tutorial/image-move.php
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.
To move the position to a new location (based on the user click of the button) the style.top and style.left value is assigned the new value using the x, y coordinates.
#imagemovet #Javascriptimagemove #styleLeft #styleTop

Видео Moving image in UP, down, left & right direction by buttons with offsetTop offsetLeft in JavaScript канала plus2net