Помогите со вставкой картинки

[StudentKVD]

Доброго времени суток!

Необходимо загрузить картинку через кнопку на сайт и добавить возможность двигать картинку вверх, вниз, влево и вправо, а так же изменять её размеры по кнопкам. Помогите пожалуйста, преподаватель на нас обиделся и дал сложное на данный момент задание. Основная проблема с привязкой вставленной картинки и кнопками для их изменения.

[SuperZen]

Здесь про клавиши, про размер - надо делать...
https://javascript.ru/forum/events/7...e-klavish.html

[Dilettante_Pro]

StudentKVD, а самостоятельно вы что-то сделали?
Вот вам для начала

<style>
.action {
    display:none;
}
.container {
     width:400px;
     height:300px;
     border:1px solid black;
}
#image {
     position:fixed;
}
</style>
<button id="load" style="display:block">Загрузить картинку</button>
<div id="drive">
  <button id="left" class="action">Влево</button>
  <button id="right" class="action">Вправо</button>
  <button id="down" class="action">Вниз</button>
  <button id="up" class="action">Вверх</button>
</div>
<div class="container">
   <img id="image" src="" alt="Здесь будет картинка"/>
</div>
<script>
   var loader = document.querySelector('#load'),
         image = document.querySelector('#image'),
         drivers = document.querySelectorAll('.action');
   loader.onclick = function() {
         image.src = "https://javascript.ru/cat/list/donkey.gif";
         loader.style.display = "none";
         [].forEach.call(drivers, function(item) {
             item.style.display = "inline-block";
         });
   }
   drive.onclick = function(e) {
      var position = image.getBoundingClientRect();
      console.log(position.left + ";" + position.top);
       switch(e.target.id) {
          case "left":
              image.style.left = (position.left - 5) + "px";
              break;
          case "right":
              image.style.left = (position.left + 5) + "px";
              break;
          case "down":
              image.style.top = (position.top + 5) + "px";
              break;
          case "up":
              image.style.top = (position.top - 5) + "px";
              break;
      }
   }
</script>

[StudentKVD]

<style>
.action {
    display:none;
}
.container {
     width:400px;
     height:300px;
     border:1px solid black;
}
</style>
<button id="load" style="display:block">Загрузить картинку</button>
<button id="left" class="action">Влево</button>
<button id="gight" class="action">Вправо</button>
<button id="down" class="action">Вниз</button>
<button id="up" class="action">Вверх</button>
<div class="container">
   <img id="image" src="" alt="Здесь будет картинка"/>
</div>
<script>
   var loader = document.querySelector('#load'),
         image = document.querySelector('img'),
         drivers = document.querySelectorAll('.action');
   loader.onclick = function() {
         image.src = "https://javascript.ru/cat/list/donkey.gif";
         loader.style.display = "none";
         [].forEach.call(drivers, function(item) {
             item.style.display = "inline-block";
         });
   }
</script>

Все отлично, но картинка не двигается по кнопкам, Вам не составит труда привести картинку в движение?

[Dilettante_Pro]

Вам не составит труда привести картинку в движение?

Мне-то не трудно. Внес дополнения в пример. Жалко, что все это зря...