Cómo mover una imagen por X y Y en JavaScript

Escrito por brian bennett | Traducido por beatriz sánchez
  • Comparte
  • Twittea
  • Comparte
  • Pin
  • E-mail
Cómo mover una imagen por X y Y en JavaScript
Puedes mover imágenes en pantalla con JavaScript. (Martin Poole/Stockbyte/Getty Images)

JavaScript puede modificar la información de las hojas de estilo en cascada en una página web, permitiendo que una imagen se mueva a distintas posiciones en una página, según la entrada de usuario. Un ejemplo de esto es una demostración de HTML, estilo y JavaScript que permite que una imagen se mueva por una página de forma aleatoria mientras el cursor del ratón está colocado sobre ella. Para conseguir esto, los atributos de posición de la imagen se modifican a medida que ocurren los eventos del paso del ratón.

Nivel de dificultad:
Moderado

Otras personas están leyendo

Necesitarás

  • Un editor de texto
  • Un navegador web

Lista completaMinimizar

Instrucciones

  1. 1

    Abre un nuevo documento en el editor de texto. Guarda el archivo como "moveimage.html".

  2. 2

    Escribe el código de cabecera del documento.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <title>Move Image</title>

    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />

  3. 3

    Escribe el código de estilo del documento.

    <style type="text/css">

    image

    { position: absolute; z-index: 0; visibility: visible; top: 10em; left: 10em; width: 5em; height: 5em }

    </style>

  4. 4

    Escribe el código JavaScript del documento.

    <script type="text/javascript">

    var x; var y;

    function pause(ms) { var date = new Date(); var curDate = null;

    do { curDate = new Date(); } while(curDate-date < ms); }

    function moveImage() { x = Math.floor(Math.random()40); y = Math.floor(Math.random()30); pause(300); document.getElementById("image").style.top = y + "em"; document.getElementById("image").style.left = x + "em"; }

    </script>

    </head>

  5. 5

    Escribe el código del cuerpo del documento.

    <body>

    <img id="image" src="http://www.objcom.com/brianb.png" onmouseover = "moveImage()"/>

    </body> </html>

  6. 6

    Abre este archivo en el navegador web. Mueve el puntero del ratón sobre la imagen, y se moverá a la nueva posición en la página.

No dejes de ver

Filtrar por:
  • Mostrar todos
  • Artículos
  • Galerías de fotos
  • Videos
Ordenar:
  • Más relevante
  • Más popular
  • Más reciente

No se encuentran artículos disponibles

No se encuentran slideshows disponibles

No se encuentran videos disponibles