Hi
Can anyone tell me why the following code works fine with the text but not with the image.
I only care about ie5+.
Any help would be appreciated.
<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.isOver) {oDrag.drag=false}
}
}
function mdown(num)
{
x=event.x
y=event.y
for(var i=0; i<oDrag.length;i++)
{
if(oDrag.isOver)
{
oDrag.drag=true
oDrag.clickedX=x-oDrag.getLeft()
oDrag.clickedY=y-oDrag.getTop()
}
}
}
function mmove()
{
x=event.x
y=event.y
for(var i=0; i<oDrag.length;i++)
{
if(oDrag.drag)
oDrag.moveIt(x-oDrag.clickedX,y-oDrag.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>
Can anyone tell me why the following code works fine with the text but not with the image.
I only care about ie5+.
Any help would be appreciated.
<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.isOver) {oDrag.drag=false}
}
}
function mdown(num)
{
x=event.x
y=event.y
for(var i=0; i<oDrag.length;i++)
{
if(oDrag.isOver)
{
oDrag.drag=true
oDrag.clickedX=x-oDrag.getLeft()
oDrag.clickedY=y-oDrag.getTop()
}
}
}
function mmove()
{
x=event.x
y=event.y
for(var i=0; i<oDrag.length;i++)
{
if(oDrag.drag)
oDrag.moveIt(x-oDrag.clickedX,y-oDrag.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>
