Moving Image by buttons using offset
Move an image to a new location by reading its current offsetLeft and offsetTop coordinates, adding or subtracting a step value, and assigning the result through the image style position properties.
const image = document.getElementById('i1');
const step = 50;
image.style.left = `${image.offsetLeft + step}px`;
Moving image with direction buttons Top ↑
Four direction buttons Top ↑
The original Up, Left, right and down controls are retained. Modern JavaScript separates behavior from HTML by using data-move values and event listeners instead of inline onclick.
<button type="button" data-move="up">Up</button>
<button type="button" data-move="left">Left</button>
<button type="button" data-move="right">right</button>
<button type="button" data-move="down">down</button>
Move by direction Top ↑
A switch() statement can decide which coordinate changes. The current position is read first, then the new position is clamped to the demo area.
switch (direction) {
case 'up': top -= step; break;
case 'down': top += step; break;
case 'left': left -= step; break;
case 'right': left += step; break;
}
Moving Down Top ↑
For downward movement, add the step value to the current vertical position and assign the new top value.
top += step;
image.style.top = `${top}px`;
Complete working source Top ↑
The original complete-page copy facility is preserved below with modern event handling and responsive boundaries.
<!doctype html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Demo of changing position of an Image in JavaScript</title></head><body>
<div id="move-area" style="position:relative; min-height:420px; border:1px solid #ccc; overflow:hidden;">
<img src="images/help.jpg" id="i1" alt="Help icon" style="position:absolute; left:40px; top:40px; max-width:80px;">
</div>
<button type="button" data-move="up">Up</button>
<button type="button" data-move="left">Left</button>
<button type="button" data-move="right">right</button>
<button type="button" data-move="down">down</button>
<p>Return to <a href="image-move.php">image move tutorial</a></p>
<script>
const image = document.getElementById('i1');
const area = document.getElementById('move-area');
const step = 50;
function moveImage(direction) {
let left = image.offsetLeft;
let top = image.offsetTop;
const maxLeft = Math.max(0, area.clientWidth - image.offsetWidth);
const maxTop = Math.max(0, area.clientHeight - image.offsetHeight);
switch (direction) {
case 'up': top -= step; break;
case 'down': top += step; break;
case 'left': left -= step; break;
case 'right': left += step; break;
}
image.style.left = `${Math.min(maxLeft, Math.max(0, left))}px`;
image.style.top = `${Math.min(maxTop, Math.max(0, top))}px`;
}
document.querySelectorAll('[data-move]').forEach((button) => {
button.addEventListener('click', () => moveImage(button.dataset.move));
});
</script></body></html>
The step-based version can be extended into continuous motion, which is covered in Part II.
Image Object Continuous movement of image Two Image crossing Moving Images in four sides of browser
Subhendu Mohapatra
Author & Instructor at plus2net
I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.
Subscribe to our YouTube Channel here
