This code works great for puzzles or image makers.
Place this in the head of your page:
Use this code to link your images you would like to be draggable:
Place this in the head of your page:
Code:
<style>
<!--
.drag{position:relative;cursor:hand}
-->
</style>
<script language="JavaScript1.2">
<!--
//Generic Drag Script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code and terms of usage,
//visit http://www.dynamicdrive.com
var ie=document.all
var ns6=document.getElementById&&!document.all
var dragapproved=false
var z,x,y
function move(e){
if (dragapproved){
z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x
z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y
return false
}
}
function drags(e){
if (!ie&&!ns6)
return
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "HTML" : "BODY"
while (firedobj.tagName!=topelement&&firedobj.className!="drag"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}
if (firedobj.className=="drag"){
dragapproved=true
z=firedobj
temp1=parseInt(z.style.left+0)
temp2=parseInt(z.style.top+0)
x=ns6? e.clientX: event.clientX
y=ns6? e.clientY: event.clientY
document.onmousemove=move
return false
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
//-->
</script>
<!--
.drag{position:relative;cursor:hand}
-->
</style>
<script language="JavaScript1.2">
<!--
//Generic Drag Script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code and terms of usage,
//visit http://www.dynamicdrive.com
var ie=document.all
var ns6=document.getElementById&&!document.all
var dragapproved=false
var z,x,y
function move(e){
if (dragapproved){
z.style.left=ns6? temp1+e.clientX-x: temp1+event.clientX-x
z.style.top=ns6? temp2+e.clientY-y : temp2+event.clientY-y
return false
}
}
function drags(e){
if (!ie&&!ns6)
return
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "HTML" : "BODY"
while (firedobj.tagName!=topelement&&firedobj.className!="drag"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}
if (firedobj.className=="drag"){
dragapproved=true
z=firedobj
temp1=parseInt(z.style.left+0)
temp2=parseInt(z.style.top+0)
x=ns6? e.clientX: event.clientX
y=ns6? e.clientY: event.clientY
document.onmousemove=move
return false
}
}
document.onmousedown=drags
document.onmouseup=new Function("dragapproved=false")
//-->
</script>
Code:
<img src="URLOFIMAGE" class="drag">
.com .info 
We're the affordable, reliable place to host your site. And unlike the competition, there's no set up fee and no annual commitment. 
Our highly trained, courteous support staff is waiting to help. We'll resolve any issue to your complete satisfaction.