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

Puedes mover imágenes en pantalla con JavaScript.
Por brian bennett

Paso 1

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


Paso 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" />


Paso 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>


Paso 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>


Paso 5

Escribe el código del cuerpo del documento.

<body>

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

</body> </html>


Paso 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.