The four images above are placed inside absolutely positioned div elements and can be moved with the mouse. Drag and drop them anywhere you like. It won't work with this image as it is not positioned in any way, but inside a normal paragraph.
The images may be wrapped in <div> tags as shown below, which have been adorned with the position:absolute style. This attribute may also be applied to the images directly.
<div id="s" style="position:absolute;z-index:2;left:310px;top:30px;"> <img src="/image/clipart/c-spade.gif" alt="spade" width="13" height="11"/> </div> <div id="h" style="position:absolute;z-index:2;left:330px;top:55px;"> <img src="/image/clipart/c-heart.gif" alt="heart" width="13" height="11"/> </div> <div id="d" style="position:absolute;z-index:2;left:400px;top:30px;"> <img src="/image/clipart/c-diamont.gif" alt="diamont" width="13" height="11"/> </div> <div id="c" style="position:absolute;z-index:2;left:350px;top:45px;"> <img src="/image/clipart/c-club.gif" alt="club" width="13" height="11"/> </div>
The responsible script is old (it even supports Netscape 4) and wise:
function MD(e) {
if(N) {
ob = window.document.layers[e.target.name];
X = e.x;
Y = e.y;
return false;
} else {
ob = window.event.srcElement.parentNode;
if(ob) {
ob = ob.style;
X = window.event.offsetX;
Y = window.event.offsetY;
}
}
}
function MM(e) {
if(ob) {
if(N) {
ob.moveTo( e.pageX - X, e.pageY - Y );
} else {
ob.pixelLeft = window.event.clientX - X + document.body.scrollLeft - 2;
ob.pixelTop = window.event.clientY - Y + document.body.scrollTop - 2;
return false;
}
}
}
function MU() {
ob = null;
}
var ob, X, Y, N = (document.layers) ? 1 : 0;
if(N) {
document.captureEvents(Event.MOUSEDOWN|Event.MOUSEMOVE|Event.MOUSEUP);
}
document.onmousedown=MD;
document.onmousemove=MM;
document.onmouseup=MU;