Menu
Hi
The following code works fine for the text but has a problem with image.
I am only concerned with ie5+.
Any help would be appreciated.
Thanks
<html>
<head>
<script type=”text/javascript”>
function dragObj(obj,nest)
{
nest=(!nest) ? ”:’document.’+nest+’.’
this.css=eval(‘document.all.’+obj+’.style’)
this.evnt=eval(obj);
this.getLeft=b_getLeft;
this.getTop=b_getTop;
this.moveIt=b_moveIt;
this.name=obj
return this
}
function b_moveIt(x,y)
{
this.x=x; this.y=y;
this.css.left=this.x
this.css.top=this.y
}
function b_getLeft()
{
x=this.css.pixelLeft
return x
}
function b_getTop()
{
y=this.css.pixelTop
return y
}
function dragInit()
{
document.onmousedown=mdown
document.onmouseup=mup
document.onmousemove=mmove;
}
function mmover(num)
{
if(loaded) oDrag[num].isOver=true
}
function mmout(num)
{
if(loaded) oDrag[num].isOver=false
}
function mup()
{
for(var i=0; i<oDrag.length;i++)
{
if(oDrag[i].isOver) {oDrag[i].drag=false}
}
}
function mdown(num)
{
x=event.x
y=event.y
for(var i=0; i<oDrag.length;i++)
{
if(oDrag[i].isOver)
{
oDrag[i].drag=true
oDrag[i].clickedX=x-oDrag[i].getLeft()
oDrag[i].clickedY=y-oDrag[i].getTop()
}
}
}
function mmove()
{
x=event.x
y=event.y
for(var i=0; i<oDrag.length;i++)
{
if(oDrag[i].drag)
oDrag[i].moveIt(x-oDrag[i].clickedX,y-oDrag[i].clickedY)
}
}
</script>
</head>
<body leftmargin=0 topmargin=0 marginwidth=0 marginheight=0
onload=”init();”
>
<div id=”image1″ style=”position:absolute; left:0px; top:0px; width:80px; height:100px; z-index:5; visibility:visible”
onmouseover=”mmover(0)”;
onmouseout=”mmout(0)”;
>
<IMG height=100 alt=”” src=”albert_th.gif” width=80 border=0 name=image1img>
</DIV>
<div id=”textbox1″ style=”position:absolute; left:200px; top:0px; width:100px; height:50px; z-index:5; visibility:visible”
style=”cursor:hand”;
onmouseover=”mmover(1)”;
onmouseout=”mmout(1)”;
>
Text Works
</DIV>
</body>
<script language=”javascript”><!–
function init()
{
dragInit();
oDrag=new Array();
oDrag[0]=new dragObj(‘image1’);
oDrag[1]=new dragObj(‘textbox1’);
loaded=true;
}
–></script>
</html>