« »

This is a simple JavaScript that allows the user to click and move an image. Each image is on a layer. If it is clicked for the first time, it moves with the mouse.

Label: Drag-drop image

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
JavaScript
Print

Copy All x2

<SCRIPT>
//detecting browser to dynamically write appropriate DIVs/LAYERs
N=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)<5)
S=(navigator.appName.indexOf('Netscape')!=-1&&parseInt(navigator.appVersion)>4.9)
M=(navigator.appName.indexOf('Microsoft')!=-1)



Vis=new Array()
Vis[0]=(M||S) ? "hidden" : "hide"
Vis[1]=(M||S) ? "visible" : "show"

function GetDiv(divId,divY,divX,divW,divH,bCol,visb,zInd){
bkCol=(bCol!="")?((N)?" bgColor="+bCol:";background:"+bCol):""

Styl = (M||S) ? "<DIV" : "<LAYER"

if(M||S){
Styl+=" ID="+divId
Styl+=" style='position:absolute;top:"+divY+";left:"+divX+";width:"+divW+";height:"+divH+bkCol
Styl+=";visibility:"+Vis[visb]+";z-index:"+zInd
Styl+="'>"
}

if(N){
Styl+=" ID="+divId
Styl+=" top="+divY+" left="+divX+" width="+divW+" height="+divH+bkCol
Styl+=" visibility="+Vis[visb]+" z-index="+zInd
Styl+=">"
}
document.writeln(Styl)
}

function EndDiv(){
(M||S)? document.writeln("</DIV>"): document.writeln("</LAYER>")
}

function PutIt(ID,dX,dY){
if(N){
document.layers[ID].left=dX
document.layers[ID].top=dY
}
if(M){
document.all[ID].style.left=dX
document.all[ID].style.top=dY
}
if(S){
document.getElementById(ID).style.left=dX
document.getElementById(ID).style.top=dY
}
}

function ShowHide(ID,vs){
if(N){
document.layers[ID].visibility=Vis[vs]
}
if(M){
document.all[ID].style.visibility=Vis[vs]
}
if(S){
document.getElementById(ID).style.visibility=Vis[vs]
}
}

function Xof(ID){
if(N){
return document.layers[ID].left
}
if(M){
return document.all[ID].style.left
}
if(S){
return document.getElementById(ID).style.left
}
}

function Yof(ID){
if(N){
return document.layers[ID].top
}
if(M){
return document.all[ID].style.top
}
if(S){
return document.getElementById(ID).style.top
}
}



function Zind(ID,zz){
if(N){
document.layers[ID].zIndex=zz
}
if(M){
document.all[ID].style.zIndex=zz
}
if(S){
document.getElementById(ID).style.zIndex=zz
}
}

function ChangeCol(ID,colrx){
if(M)document.all[ID].style.background=colrx
if(N)document.layers[ID].bgColor=colrx
if(S)document.getElementById(ID).style.background=colrx
}

function DivWrite(IdName,Str) {
if (N){
document.layers[IdName].document.write(Str)
document.layers[IdName].document.close()
}
if(M) document.all[IdName].innerHTML=Str
if(S) document.getElementById(IdName).innerHTML=Str
}
</SCRIPT>
<SCRIPT>
//write the layers (for NN4.7) and div 9for other browsers)

GetDiv("Pic1",150,50,50,50,'',1,1)
document.write("<a href='javascript:void(0);' onclick='Klik(\"Pic1\")'><img src=logojs.gif border=0></a>")
EndDiv()
GetDiv("Pic2",300,50,50,50,'',1,1)
document.write("<a href='javascript:void(0);' onclick='Klik(\"Pic2\")'><img src=photo3.jpg border=0></a>")
EndDiv()

//tog will be togged between 0 and 1 with every click on the defined image link
tog=0

//sensing the mouse move event - gets its coords
if(N) window.captureEvents(Event.MOUSEMOVE); 
if(N||S) window.onmousemove=newPos;
if(M) document.onmousemove=newPos; 

function newPos(e){
if(M){
mX=event.clientX
mY=event.clientY
}
if(N||S){
mX=e.pageX
mY=e.pageY
}
window.status="Mouse coords=("+mX+":"+mY+")"

//if tog is 1 (ie clicked first time - move with mouse)
//CurObj is the last image clicked

if(tog==1&&CurObj!='undefined'){
PutIt(CurObj,mX-5,mY-5)
}
}

function Klik(x){
CurObj=x
tog=!tog
}
</SCRIPT>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->