ejercicio.html

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <meta charset="UTF-8">
  4. <title>Mover una imagen</title>
  5. <style>
  6. #escenario {
  7. position: relative;
  8. width: 640px;
  9. height: 480px;
  10. border: 1px solid black;
  11. overflow: hidden;
  12. }
  13. #figura {
  14. position: absolute;
  15. left: 256px;
  16. top: 176px;
  17. }
  18. </style>
  19.  
  20. function posicionar() {
  21. const img = document.querySelector('#figura');
  22. const inputX = document.querySelector('#x');
  23. const inputY = document.querySelector('#y');
  24. const x = inputX.value - 64;
  25. const y = inputY.value - 64;
  26. img.style.left = x + 'px';
  27. img.style.top = y + 'px';
  28. }
  29.  
  30. </script>
  31. </head>
  32. <h1>Mover una imagen</h1>
  33. <div id="escenario">
  34. <img id="figura" src="hamtaro.gif">
  35. </div>
  36. <p>
  37. <label>X</label>
  38. <input id="x" type="range"
  39. min="0" max="640" value="320"
  40. oninput="posicionar()"
  41. autocomplete="off">
  42. <br>
  43. <label>Y</label>
  44. <input id="y" type="range"
  45. min="0" max="480" value="240"
  46. oninput="posicionar()"
  47. autocomplete="off">
  48. </p>
  49. </body>
  50. </html>

Proinf.net