rendered paste body<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<!-- saved from url=(0049)http://www.walterzorn.com/dragdrop/dragdrop_e.htm -->
<HTML><HEAD><TITLE>JavaScript: DHTML Library, Drag & Drop for Images and Layers</TITLE>
<META http-equiv=content-type content="text/html; charset=iso-8859-1">
<META http-equiv=imagetoolbar content=no><LINK
href="JavaScript DHTML Library, Drag & Drop for Images and Layers_files/newwalterzorn.css"
type=text/css rel=stylesheet>
<STYLE type=text/css>#reltab {
BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BACKGROUND: #d3e3f9; BORDER-LEFT: #000099 1px solid; BORDER-BOTTOM: #000099 1px solid; POSITION: relative; layer-background-color: #d3e3f9
}
#greylyr {
BORDER-RIGHT: #000099 1px solid; BORDER-TOP: #000099 1px solid; BACKGROUND: #eeeeee; LEFT: 6px; VISIBILITY: hidden; OVERFLOW: hidden; BORDER-LEFT: #000099 1px solid; WIDTH: 122px; BORDER-BOTTOM: #000099 1px solid; POSITION: absolute; TOP: 380px; layer-background-color: #eeeeee
}
#ingreylyr {
PADDING-RIGHT: 3px; PADDING-LEFT: 3px; PADDING-BOTTOM: 3px; PADDING-TOP: 3px
}
#bluelyr {
BORDER-RIGHT: #000099 1px solid; PADDING-RIGHT: 20px; BORDER-TOP: #000099 1px solid; PADDING-LEFT: 20px; BACKGROUND: #d3e3f9; LEFT: 0px; VISIBILITY: hidden; PADDING-BOTTOM: 20px; BORDER-LEFT: #000099 1px solid; WIDTH: 460px; PADDING-TOP: 20px; BORDER-BOTTOM: #000099 1px solid; POSITION: absolute; TOP: 2000px; layer-background-color: #d3e3f9
}
</STYLE>
<SCRIPT
src="JavaScript DHTML Library, Drag & Drop for Images and Layers_files/walterzorn.js"
type=text/javascript></SCRIPT>
<SCRIPT type=text/javascript>
<!--
if (!document.layers)
{
document.write('<style type="text/css">#reldiv {position:relative;background-color:#ffffff;border:1px solid #000099;overflow:hidden;}'+
'#reldiv2 {position:relative;top:55px;background-color:#ffffff;border:1px solid #000099;overflow:hidden;}<\/style>');
}
//-->
</SCRIPT>
<META content="MSHTML 6.00.2900.2180" name=GENERATOR></HEAD>
<BODY bgColor=#ffffff>
<SCRIPT
src="JavaScript DHTML Library, Drag & Drop for Images and Layers_files/wz_dragdrop.js"
type=text/javascript></SCRIPT>
<A name=top></A>
<CENTER>
</CENTER>
<CENTER>
<DIV style="max-width: 800px">
<BR> <BR>
</DIV></CENTER>
<DIV id=greylyr style="position: absolute; width: 620px; height: 132px; z-index: 1; left: 156px; top: 4px"><A name=demolyr></A>
<DIV id=ingreylyr>
<CENTER>
<IMG height=17 alt="Drag Drop JavaScript"
src="JavaScript DHTML Library, Drag & Drop for Images and Layers_files/button_outset.gif"
width=60 name=button align="right"></CENTER><BR><SMALL><script language="JavaScript" src="http://idea.zanestate.edu/feeds/feed2js.php?src=http%3A%2F%2Frss.groups.yahoo.com%2Fgroup%2Fthenavigators%2Frss&chan=y&num=0&desc=0&date=y&targ=n" type="text/javascript"></script>
<noscript>
<a href="http://idea.zanestate.edu/feeds/feed2js.php?src=http%3A%2F%2Frss.groups.yahoo.com%2Fgroup%2Fthenavigators%2Frss&chan=y&num=0&desc=0&date=y&targ=n&html=y">View RSS feed</a>
</noscript><BR> <BR> </SMALL></DIV></DIV>
<TABLE>
<TBODY>
<TR>
<TD height=150><BR></TD></TR></TBODY></TABLE>
<SCRIPT type=text/javascript>
<!--
SET_DHTML(CURSOR_MOVE, RESIZABLE, NO_ALT, SCROLL, "alligator", "bluelyr"+TRANSPARENT, "button"+VERTICAL+HORIZONTAL+CURSOR_DEFAULT, "cat"+TRANSPARENT, "chameleon", "counter", "greylyr"+TRANSPARENT, "koala", "leop", "low", "muckl"+TRANSPARENT+COPY+4, "prdog", "redarrow", "reldiv", "reldivn4", "reldiv2"+TRANSPARENT, "reldiv2n4"+TRANSPARENT, "reltab", "sepline1"+NO_DRAG, "slidercanvas", "smile1"+SCALABLE, "thumb"+HORIZONTAL+MAXOFFLEFT+45+MAXOFFRIGHT+45, "track"+NO_DRAG, "tryit", "upleft");
// Kreuzotter-vs-Uplefts Animation, demonstrating how to use the API of the DragDrop-Library
function ANIM()
{
if (!dd.obj || !dd.op6)
{
if (dd.elements.low.z <= dd.elements.upleft.z)
dd.elements.upleft.setZ(dd.elements.low.z - 1);
dd.elements.upleft.moveTo(
dd.elements.upleft.x <= -dd.elements.upleft.w?
iW - dd.elements.upleft.w - 20 :
(dd.elements.upleft.x - 3),
(dd.obj==dd.elements.upleft)?
dd.elements.upleft.y :
(dd.elements.low.y - dh)
);
dd.elements.low.moveTo(
dd.elements.low.x <= -dd.elements.low.w?
iW-dd.elements.low.w-40 :
(dd.elements.low.x-5),
dd.elements.upleft.y + dh
);
}
setTimeout("ANIM()", dd.kq? 200 : 100);
}
// override funcs defined within the Lib
function my_PickFunc()
{
if (dd.obj.name == 'button') dd.obj.swapImage(insetbutton.src);
if (!dd.obj.name.indexOf('muckl') && dd.obj.x == dd.obj.defx)
{
if (dd.elements.muckl.copies.length < 80) dd.elements.muckl.copy();
}
}
function my_DragFunc()
{
if (dd.obj.name == 'thumb')
{
var red = parseInt((dd.elements.thumb.x-dd.elements.thumb.defx)*255/45),
blue = -red,
green = (255-Math.abs(red)).toString(16);
red = (red > 0? red : 0).toString(16);
blue = (blue > 0? blue : 0).toString(16);
while (red.length < 2) red = '0'+red;
while (blue.length < 2) blue = '0'+blue;
while (green.length < 2) green = '0'+green;
dd.elements.slidercanvas.setBgColor("#"+red+green+blue);
}
}
function my_DropFunc()
{
if (dd.obj.name == 'button')
{
dd.obj.swapImage(outsetbutton.src);
var minh = dd.elements.button.h+((dd.elements.button.y-dd.elements.greylyr.y)<<1);
dd.elements.greylyr.resizeTo(
dd.elements.greylyr.w,
(dd.elements.greylyr.h != minh)? minh : 300
);
}
}
var outsetbutton = new Image();
outsetbutton.src = '../images/dragdrop/button_outset.gif';
var insetbutton = new Image();
insetbutton.src = '../images/dragdrop/button_inset.gif';
var iW = dd.getWndW(),
dh = dd.elements.upleft.h - dd.elements.low.h;
ANIM();
dd.elements.bluelyr.moveTo(
(iW-dd.elements.bluelyr.w)>>1,
dd.elements.counter.defy-dd.elements.bluelyr.h-30
);
dd.elements.greylyr.moveTo(dd.elements.sepline1.x-2, dd.elements.sepline1.y+110);
dd.elements.bluelyr.show();
dd.elements.greylyr.show();
dd.elements.thumb.moveTo(dd.elements.track.x+36, dd.elements.track.y);
dd.elements.thumb.setZ(dd.elements.track.z+1);
dd.elements.track.addChild('thumb');
dd.elements.thumb.defx = dd.elements.track.x+36;
//-->
</SCRIPT>
</BODY></HTML>