Demo of changing position of an Image in JavaScript

Each original direction button moves the image by 50 pixels. Movement is limited to the demo area so the image stays reachable on smaller screens.

Help icon used for step movement demo


Return to tutorial on Image Position

JavaScript

const image = document.getElementById('i1');
const area = document.getElementById('step-area');
const step = 50;

function moveByStep(direction) {
  const currentLeft = image.offsetLeft;
  const currentTop = image.offsetTop;
  const maxLeft = Math.max(0, area.clientWidth - image.offsetWidth);
  const maxTop = Math.max(0, area.clientHeight - image.offsetHeight);

  if (direction === 'down') image.style.top = `${Math.min(maxTop, currentTop + step)}px`;
  if (direction === 'up') image.style.top = `${Math.max(0, currentTop - step)}px`;
  if (direction === 'left') image.style.left = `${Math.max(0, currentLeft - step)}px`;
  if (direction === 'right') image.style.left = `${Math.min(maxLeft, currentLeft + step)}px`;
}

document.querySelectorAll('[data-step-direction]').forEach((button) => {
  button.addEventListener('click', () => moveByStep(button.dataset.stepDirection));
});

HTML

<div id="step-area" style="position:relative; min-height:360px; border:1px solid #ccc; overflow:hidden;">
  <img src="images/help.jpg" id="i1" alt="Help icon used for step movement demo"
       style="position:absolute; left:50%; top:100px; max-width:80px;">
</div>
<button type="button" data-step-direction="up">Up</button><br>
<button type="button" data-step-direction="left">Left</button>
<button type="button" data-step-direction="right">right</button><br>
<button type="button" data-step-direction="down">down</button>

Complete working page

<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Move an Image in 50 Pixel Steps</title></head><body>
<div id="step-area" style="position:relative; min-height:360px; border:1px solid #ccc; overflow:hidden;">
  <img src="images/help.jpg" id="i1" alt="Help icon used for step movement demo"
       style="position:absolute; left:50%; top:100px; max-width:80px;">
</div>
<button type="button" data-step-direction="up">Up</button><br>
<button type="button" data-step-direction="left">Left</button>
<button type="button" data-step-direction="right">right</button><br>
<button type="button" data-step-direction="down">down</button>
<script>
const image = document.getElementById('i1');
const area = document.getElementById('step-area');
const step = 50;

function moveByStep(direction) {
  const currentLeft = image.offsetLeft;
  const currentTop = image.offsetTop;
  const maxLeft = Math.max(0, area.clientWidth - image.offsetWidth);
  const maxTop = Math.max(0, area.clientHeight - image.offsetHeight);

  if (direction === 'down') image.style.top = `${Math.min(maxTop, currentTop + step)}px`;
  if (direction === 'up') image.style.top = `${Math.max(0, currentTop - step)}px`;
  if (direction === 'left') image.style.left = `${Math.max(0, currentLeft - step)}px`;
  if (direction === 'right') image.style.left = `${Math.min(maxLeft, currentLeft + step)}px`;
}

document.querySelectorAll('[data-step-direction]').forEach((button) => {
  button.addEventListener('click', () => moveByStep(button.dataset.stepDirection));
});
</script></body></html>