Demo of changing position of an Image in JavaScript

Use the original Up, Left, right and down controls to move the image in 50-pixel steps. The modern demo keeps the image inside a responsive movement area.

Return to image move tutorial

JavaScript source

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));
});

HTML source

<div id="move-area" class="border rounded mb-3" style="position:relative; min-height:420px; overflow:hidden; touch-action:none;">
  <img src="images/help.jpg" id="i1" alt="Help icon used in JavaScript image movement demo" style="position:absolute; left:40px; top:40px; max-width:80px; height:auto;">
</div>
<div class="mb-3" aria-label="Image movement controls">
  <button type="button" class="btn btn-outline-info mb-1" data-move="up">Up</button><br>
  <button type="button" class="btn btn-outline-info mb-1" data-move="left">Left</button>
  <button type="button" class="btn btn-outline-info mb-1" data-move="right">right</button><br>
  <button type="button" class="btn btn-outline-info" data-move="down">down</button>
</div><p><a href="image-move.php">Return to image move tutorial</a></p>