This is actually surprisingly easy:
Create an element:
img = document.createElement('img');
Set your source:
img.src = "myimage.png";
Position it absolutely like this:
img.style.position = "absolute"; img.style.left = "50px"; img.style.top = "50px"; img.style.width = "50px"; // Make these match the image... img.style.height = "50px"; // ...or leave them off
(Obviously, use whatever coordinates and size you want.)
You might want to make sure that it appears above other things:
img.style.zIndex = 100; // Or whatever
Add it to the document:
document.body.appendChild(img);
Move it around
Use window.setInterval
(or setTimeout
depending on how you want to do this) to move it by changing the style.left
and style.top
. You can use Math.random
to get a random floating-point number between 0 and 1 and multiply this and run it through Math.floor
to get an integer to change the coordinates.
Example
This creates an image at 50.50 and enlivens it (in a very inconvenient random way, I didnโt waste time making it look elegant) every fifth of a second for 10 seconds, and then deleted it:
function createWanderingDiv() { var img, left, top, counter, interval; img = document.createElement('img'); img.src = "myimage.png"; left = 200; top = 200; img.style.position = "absolute"; img.style.left = left + "px"; img.style.top = top + "px"; img.style.width = "200px"; // Make these match the image... img.style.height = "200px"; // ...or leave them out. img.style.zIndex = 100; // Or whatever document.body.appendChild(img); counter = 50; interval = 200; // ms window.setTimeout(wanderAround, interval); function wanderAround() { --counter; if (counter < 0) { // Done; remove it document.body.removeChild(img); } else { // Animate a bit more left += Math.floor(Math.random() * 20) - 10; if (left < 0) { left = 0; } top += Math.floor(Math.random() * 10) - 5; if (top < 0) { top = 0; } img.style.left = left + "px"; img.style.top = top + "px"; // Re-trigger ourselves window.setTimeout(wanderAround, interval); } } }
(I prefer to reschedule at each iteration using setTimeout
[as above] with setInterval
, but that is completely your call. If you are using setInterval
, remember the interval handle [return value from setInterval
and use window.clearTimeout
to cancel it when you're done .)
The above DOM / JavaScript; jQuery offers some helpers to make this a little easier, but as you can see it is pretty simple even without.