Ejercicio con rangos

HTML

CSS

Javascript


Ayuda paso a paso

  1. Crea un fichero HTML llamado "ejercicio.html"
  2. Bájate una imagen de 128 por 128 píxeles
  3. En el HTML pon las etiquetas necesarias:
    • DIV#escenario
    • IMG#figura
    • INPUT#x
    • INPUT#y
  4. Poner tres estilos en #escenario:
    • Posicionamiento relativo
    • Ancho = 640px
    • Alto = 480px
  5. Poner tres estilo en #figura
    • Posicionamiento absoluto
    • Izquierda = Mitad del ancho del escenario menos la mitad del ancho de la imagen = 320-64 = 256px
    • Arriba = Mitad de la altura del escenario menos la mitad de la altura de la imagen = 240-64 = 176px
  6. En el INPUT#x el valor mínimo es 0 y el máximo 640px
  7. En el INPUT#y el valor mínimo es 0 y el máximo 480px
  8. Tanto en el INPUT#x como en el INPUT#y poner el evento oninput que llame a la función posicionar()
  9. Crear la función posicionar()
  10. Crear tres variables que hagan referencia al INPUT#x, al INPUT#y y a la IMG#figura.
  11. Crear dos variables que obtengan el valor de x y el valor de y con la propiedad value.
  12. Asignar al estilo left de la figura el valor x. Hay que concatenar 'px' al valor x.
  13. Lo mismo con top y el valor y.

Proinf.net