DIR : /home/kozerus/public_html/js/wz/wz_dragdrop_e.html
/home/kozerus/public_html/js/wz
<html>
<head>
<title>/js/wz/wz_dragdrop_e.html 20230206_2230</title>
<meta http-equiv="content-type" content="text/html; charset=windows-1252"></head>
<body bgcolor=linen><
<meta http-equiv="expires" content="0">
<meta http-equiv="content-type" content="text/html; charset=windows-1252">
<meta http-equiv="imagetoolbar" content="no">
<title>Drag&Drop for Images and Layers: Commands available for Drag and Drop Elements</title>
<link rel="stylesheet" type="text/css" href="/js/wz/newwalterzorn.css">
<style type="text/css">
<!--
tt.ltgrey {
padding:3px;
line-height:30px;
background-color:#eeeeee;
layer-background-color:#eeeeee;
}
#reZLyr {
position:absolute;
visibility:hidden;
z-index:0;
left:0px;
top:0px;
width:252px;
border:1px solid #000099;
padding:5px;
background:#eeeeee;
layer-background-color:#eeeeee;
}
#nodetachlyr {
position:absolute;
visibility:hidden;
left:0px;
top:0px;
border:none;
padding:3px;
background:#d3e3f6;
layer-background-color:#d3e3f6;
}
#detachlyr {
position:absolute;
visibility:hidden;
left:0px;
top:0px;
border:none;
padding:3px;
background:#ffcccc;
layer-background-color:#ffcccc;
}
#bluelyr {
position:absolute;
visibility:hidden;
width:80px;
border:none;
padding:3px;
background:#d3e3f6;
layer-background-color:#d3e3f6;
}
-->
</style>
<script type="text/javascript" src="/js/wz/wz_dragdrop.js"></script>
<a name="top"> </a>
<center>
<table cellpadding="6">
<tbody><tr>
<td align="center"><a href="http://walterzorn.de/en/index.htm"><img name="logo" src="/js/wz/wz_logo.gif" alt="Home" width="278" height="30" border="0"></a></td>
</tr>
</tbody></table>
<table>
<tbody><tr>
<td>
<br>
<b><big>
<br>
<br>
<br>
<br>
<br>
</big></b>
</td>
</tr>
</tbody></table>
</center>
<br>
<table>
<tbody><tr valign="top">
<td><img src="/js/wz/transparentpixel.gif" alt="" width="80" height="1"></td>
<td>
<table>
<tbody><tr>
<td>
<b><big>Commands available for Drag'nDrop Elements</big></b>
<br> <br>
<b>Global</b> commands, taking effect on all Drag Drop elements, are to be passed to SET_DHTML() as separate arguments.
<b>Individual</b> commands, on the other hand, are to be
appended, with a plus sign as concatenator, directly to the name/ID of
the concerned element.
See examples below.
<br>
</td>
</tr>
</tbody></table>
<table cellspacing="0" cellpadding="0" border="0" bgcolor="#000099">
<tbody><tr>
<td>
<table cellspacing="1" cellpadding="6" border="0">
<tbody><tr bgcolor="#eeeeee">
<td>
<b>CLONE</b><br>(individual, images only)
</td>
</tr>
<tr bgcolor="#ffffff">
<td>
<img name="dolly" src="/js/wz/wz_dddolly.jpg" alt="Drag & Drop Image" title="Drag & Drop Image" width="160" height="111" align="left"><img src="/js/wz/transparentpixel.gif" alt="" width="2" vspace="3" height="111" align="left">
Drag this image around...<br>
CLONE creates a static copy, devoid of draggability and DHTML capabilities.
<br clear="all">
Example:
<br>
<table>
<tbody><tr>
<td bgcolor="#eeeeee">
<tt><font style="font-size:12px;" size="2">
<script type="text/javascript"><br>
<!--<br>
<br>
SET_DHTML("layer1", "dolly"+CLONE, "image1", "image3"+CLONE);<br>
<br>
//--><br>
</script>
</font></tt>
</td>
</tr>
</tbody></table>
<br>
</td>
</tr>
<tr bgcolor="#eeeeee">
<td>
<b>COPY</b>
<br>(individual, images only)
</td>
</tr>
<tr bgcolor="#ffffff">
<td>
<img name="muckl" src="/js/wz/wz_muckl.jpg" alt="Mulitiplied drag drop image" title="Mulitiplied drag drop image" style="visibility: hidden;" width="100" height="130" align="left">
Creates a specifiable number of copies, each being a
fully capable DHTML and Drag&Drop item by its own.
Copies even inherit their originals' NO_ALT,
RESET_Z, RESIZABLE, SCALABLE, SCROLL and size-limiting commands
(MAXWIDTH etc.).
<br>Be carefull with large numbers of copies; large
image file sizes combined with the presence of many drag drop images
might challenge the visitors' browsers.
<br>
<tt class="ltgrey">SET_DHTML("layer1", "muckl"+COPY+5, "anotherImg");</tt>
<br clear="all">
</td>
</tr>
<tr bgcolor="#eeeeee">
<td>
<b>CURSOR_HAND</b><br>(global and individual, images and layers)
</td>
</tr>
<tr bgcolor="#ffffff">
<td>
Alters the cursor over drag and drop items.
Does not work in Netscape 4 and Opera earlier than ver. 7.
Available cursor commands:
<br><img name="koala" src="/js/wz/wz_ddkoala.jpg" alt="Drag&Drop Image" title="Drag&Drop Image" style="visibility: hidden;" width="160" vspace="6" height="213" align="right"><small> </small><br>
CURSOR_DEFAULT (preset; default cursor of browser)
<br>
CURSOR_CROSSHAIR
<br>
CURSOR_MOVE (globally set on this page)
<br>
CURSOR_HAND (pointer, as over links)
<br>
CURSOR_E_RESIZE
<br>
CURSOR_NE_RESIZE
<br>
CURSOR_NW_RESIZE
<br>
CURSOR_N_RESIZE
<br>
CURSOR_SE_RESIZE
<br>
CURSOR_SW_RESIZE
<br>
CURSOR_S_RESIZE
<br>
CURSOR_W_RESIZE
<br>
CURSOR_TEXT (as over text)
<br>
CURSOR_WAIT (hourglass or something similar)
<br>
CURSOR_HELP
<br>
<tt class="ltgrey">SET_DHTML(CURSOR_MOVE, "layer1", "koala"+CURSOR_HAND, "image1");</tt>
<br>This example, illustrating again how to use
commands globally and individually, also intimates that individual
commands override global ones.
<br>
</td>
</tr>
<tr bgcolor="#eeeeee">
<td>
<b>DETACH_CHILDREN</b><br>(individual, layers only)
</td>
</tr>
<tr bgcolor="#ffffff">
<td>
<br> <br> <br>
<img name="detachbuoy" src="/js/wz/transparentpixel.gif" alt="" style="visibility: hidden;" width="1" height="1">
<br>
The default behavior of a drag drop layer is as
follows:
If the layer contains images which have been set
draggable by their own (i.e. their names have been passed to SET_DHTML()
too), the library considers these images as "children" of the layer.
Once the layer is dragged, <a class="code" href="javascript:void(0)" onclick=";if (window.dd && dd.elements)dd.elements.nodetachlyr.hide();">hidden</a> or <a class="code" href="javascript:void(0)" onclick=";if (window.dd && dd.elements)dd.elements.nodetachlyr.show();">shown</a>,
its children automatically follow it.
The DETACH_CHILDREN command detaches images from
their parent layer, making them independent from the layer's behavior
(example: <a class="code" href="javascript:void(0)" onclick=";if (window.dd && dd.elements)dd.elements.detachlyr.hide();">hide()</a> and <a class="code" href="javascript:void(0)" onclick=";if (window.dd && dd.elements)dd.elements.detachlyr.show();">show()</a> again).
<br>
<tt class="ltgrey">SET_DHTML("LayerName"+DETACH_CHILDREN, "image2", "image1", "layer2");</tt>
<br>
</td>
</tr>
<tr bgcolor="#eeeeee">
<td>
<b>HORIZONTAL</b><br>(individual, images and layers)
</td>
</tr>
<tr bgcolor="#ffffff">
<td>
<img name="rhlguana" src="/js/wz/wz_ddrhinoceroslguana.jpg" alt="Drag Drop Image" title="Drag Drop Image" style="visibility: hidden;" width="159" height="127" align="right">
The element can be dragged horizontally only.
However, the item's <tt>moveTo()</tt> and <tt>moveBy()</tt> methods by their own aren't affected.
Therefore movements in both directions via scripting are unlimited.
<br>
<tt class="ltgrey">SET_DHTML("FirstImg", "lguana"+HORIZONTAL);</tt>
<br>
</td>
</tr>
<tr bgcolor="#eeeeee">
<td>
<b>MAXWIDTH, MAXHEIGHT, MINWIDTH, MINHEIGHT</b><br>(individual, images and layers)
</td>
</tr>
<tr bgcolor="#ffffff">
<td>
<img name="deddie" src="/js/wz/wz_deddie.jpg" alt="Drag Drop Image" title="Drag Drop Image" style="visibility: hidden;" width="90" height="62" align="left">
These commands limit the size to which an element
can be resized with mouse+<SHIFT>, a functionality feasible for
elements to which the <tt>RESIZABLE</tt> or <tt>SCALABLE</tt> command has been applied.
<b>Note:</b> Default setting, if MINWIDTH / MINHEIGHT haven't been applied, for mimimum width and height is 1 px.
<br clear="all">
<tt class="ltgrey">SET_DHTML("deddie"+RESIZABLE+MAXWIDTH+420+MINHEIGHT+45, "anotherImg");</tt>
<br>
</td>
</tr>
<tr bgcolor="#eeeeee">
<td>
<b>MAXOFFBOTTOM, MAXOFFLEFT, MAXOFFRIGHT, MAXOFFTOP</b><br>(individual, images and layers)
</td>
</tr>
<tr bgcolor="#ffffff">
<td>
These commands specify how far the item can be
maximally dragged away from its default position.
To each of these commands, its value must be
appended with a plus sign.
For example, by combining MAXOFFLEFT and MAXOFFRIGHT
with HORIZONTAL (allowing horizontal movements only), an image might be
converted into a horizontal slider with stops.
<table cellspacing="0" cellpadding="6" border="0">
<tbody><tr>
<td height="40" align="right">red</td>
<td>
<img name="track_r" src="/js/wz/wz_track.gif" alt="red" title="red" style="visibility: hidden; display: none !important;" width="94" hidden="" height="35">
<img name="thumb_r" src="/js/wz/wz_sliderthumb.gif" alt="red" title="red" style="visibility: hidden;" width="22" height="35">
</td>
<td rowspan="3">
<img name="ccanvas" src="/js/wz/transparent_300_120.gif" alt="" style="visibility: hidden;" width="300" height="120">
</td>
<td rowspan="3">
<form name="cform"><input name="ctext" type="text" size="9"></form>
</td>
</tr>
<tr>
<td height="40" align="right">green</td>
<td>
<img name="track_g" src="/js/wz/wz_track.gif" alt="green" title="green" style="visibility: hidden; display: none !important;" width="94" hidden="" height="35">
<img name="thumb_g" src="/js/wz/wz_sliderthumb.gif" alt="green" title="green" style="visibility: hidden;" width="22" height="35">
</td>
</tr>
<tr>
<td height="40" align="right">blue</td>
<td>
<img name="track_b" src="/js/wz/wz_track.gif" alt="blue" title="blue" style="visibility: hidden; display: none !important;" width="94" hidden="" height="35">
<img name="thumb_b" src="/js/wz/wz_sliderthumb.gif" alt="blue" title="blue" style="visibility: hidden;" width="22" height="35">
</td>
</tr>
</tbody></table>
<br>
The following code demonstrates how you can build a
slider by using just two images (named "thumb" and "track").
As always with SET_DHTML(), this code should be
inserted immediately before the closing </body> tag.
<br>
<table>
<tbody><tr>
<td bgcolor="#eeeeee">
<tt>
<script type="text/javascript">
<br>
<!--
<br> <br>
SET_DHTML("thumb"+MAXOFFLEFT+45+MAXOFFRIGHT+45+HORIZONTAL,"track"+NO_DRAG);
<br> <br>
dd.elements.thumb.moveTo(dd.elements.track.x+36, dd.elements.track.y);
<br>
dd.elements.thumb.setZ(dd.elements.track.z+1);
<br>
dd.elements.track.addChild("thumb");
<br>
dd.elements.thumb.defx = dd.elements.track.x+36;
<br> <br>
//-->
<br>
</script>
</tt>
</td>
</tr>
</tbody></table>
About these lines:
To prevent the slider track from being draggable, we
apply the NO_DRAG command to it.
Then, after SET_DHTML() has been invoked and while
the page is still loading, the thumb is moved to the center of the track
(moveTo() method, visit the <a href="http://walterzorn.de/en/dragdrop/api_e.htm">API reference</a>
for more details).
To ensure the right visual "stacking order" of these
images initially, the third JavaScript line sets the z-index (setZ()
method) of the thumb beyond the track's.
Then, by transforming it into a "child" and hence
"sub-image" of the track, the thumb's position and behavior is made
dependent from the track's - especially important for window resize
events.
The last JS line sets the thumb's default x position
(defx) to the center of the track.
<small><br> <br></small>
To retrieve the current position of the thumb (current x minus default x coordinate, <tt>dd.elements.thumb.x-dd.elements.thumb.defx</tt> ),
use my_DragFunc(), an empty function body for additional/extended
scripting.
my_DragFunc(), already included into the library, is
automatically and permanently invoked while an item is dragged (see <a href="http://walterzorn.de/en/dragdrop/api_e.htm">API reference</a>).
The above example calculates a color from the positions of the three slider thumbs.
Then, still from inside my_DragFunc(), the API's setBgColor() method of the transparent image is invoked.
<br>
</td>
</tr>
<tr bgcolor="#eeeeee">
<td>
<b>NO_ALT</b><br>(global and individual, images only)
</td>
</tr>
<tr bgcolor="#ffffff">
<td>
<img name="azcat" src="/js/wz/wz_azcat.jpg" alt="Drag Drop Image" title="Drag Drop Image" style="visibility: hidden;" width="110" height="106" align="left">
De-activates the ALT and TITLE attributes of the concerned image.
<br clear="all">
Globally (affecting all drag drop images at once):
<br>
<tt class="ltgrey">SET_DHTML(NO_ALT, "ImgName1", anotherImg");</tt>
<br>
Individually:
<br>
<tt class="ltgrey">SET_DHTML("ImgName1"+NO_ALT, anotherImg", "img3"+NO_ALT);</tt>
<br>
</td>
</tr>
<tr bgcolor="#eeeeee">
<td>
<img name="lefttop" src="/js/wz/transparentpixel.gif" alt="" style="visibility: hidden;" width="1" hspace="0" height="1" align="left">
<b>NO_DRAG</b><br>(individual, images and layers)
</td>
</tr>
<tr bgcolor="#ffffff">
<td>
Disables Drag'nDrop capabilities and converts item
into a "normal" DHTML element (wz_dragdrop.js may be used as general
DHTML library).
Access to the item's properties and methods via
scripting, however, remains unlimited, for example reading coordinates
and size, moving, resizing, hiding, showing again, swapping images etc..
<small><br> <br></small>
NO_DRAG may even be useful for the 'Image Buoy'
trick which allows to integrate an absolutely positioned layer into the
logical structure of a page:
1.) Place one or several non-draggable
(NO_DRAG!) transparent 1x1 px images as 'bouys' into the logical
structure or text flow whereever required.
2.) Retrieve the co-ordinates of these
invisible images by their x and y properties (see <a href="http://walterzorn.de/en/dragdrop/api_e.htm">DHTML-API</a>), and,
3.) simply by invoking its <tt>moveTo()</tt> method accordingly, place the layer relatively to these Image Buoys.
For example, the small blue layer moving around this text paragraph is controlled by such Image Buoys.
<br>
<tt class="ltgrey">SET_DHTML("blueLayer"+NO_DRAG, "lefttop"+NO_DRAG, "rightbottom"+NO_DRAG);</tt>
<br><img name="rightbottom" src="/js/wz/transparentpixel.gif" alt="" style="visibility: hidden;" width="1" height="1" align="right">
<br>
</td>
</tr>
<tr bgcolor="#eeeeee">
<td>
<b>RESET_Z</b><br>(global and individual, images and layers)
</td>
</tr>
<tr bgcolor="#ffffff">
<td>
<img name="leop" src="/js/wz/wz_ddleop.jpg" alt="Drag&Drop Image" title="Drag&Drop Image" style="visibility: hidden;" width="300" height="205">
<br>
As default behavior, once a drag-drop item starts to
be dragged, its z-index (its place in the visual stacking order of all
elements) is lifted to the top level, and remains there after drag-end.
The RESET_Z command restores the element's original
z-index once the element is dropped.
Due to drag-drop intuitivity issues, I don't
recommend to use this command unnecessarily.
<br>
<tt class="ltgrey">SET_DHTML("layer1", "image2"+RESET_Z, "image1");</tt>
<br>
</td>
</tr>
<tr bgcolor="#eeeeee">
<td>
<b>RESIZABLE</b><br>(global and individual, images and layers)
</td>
</tr>
<tr bgcolor="#ffffff">
<td>
<img name="chameleon" src="/js/wz/wz_ddcham.jpg" alt="JavaScript, DHTML: Drag&Drop Images" title="JavaScript, DHTML: Drag&Drop Images" style="visibility: hidden;" width="155" height="95" align="left">
Allows an element to be resized instead of dragged.
Keeping the <Shift> key pressed at the
beginning of a drag movement lets the left top corner of the element
stay fixed whereas the right and bottom boundaries follow the mouse
movement.
RESIZABLE (and SCALABLE, see below) Mode mode works
even with Netscape 4 und Opera 5+.
<br clear="all">
<tt class="ltgrey">SET_DHTML("layer1", "img1"+RESIZABLE, "anotherImg");</tt>
<br>
</td>
</tr>
<tr bgcolor="#eeeeee">
<td>
<b>SCALABLE</b><br>(global and individual, images and layers)
</td>
</tr>
<tr bgcolor="#ffffff">
<td>
<img name="grizzly" src="/js/wz/wz_grizzly.jpg" alt="Drag Drop Image" title="Drag Drop Image" style="visibility: hidden;" width="130" height="160" align="left">
Being an alternative to RESIZABLE, SCALABLE
preserves the width/height ratio of the element.
In other words, SCALABLE enables the element to be
scaled, but, contrary to RESIZABLE, not to be arbitrarily stretched.
<br> <br>
Note about SCALABLE and RESIZABLE:
If one of these commands has been applied globally
and the other one individually, only the individual command, overriding
the global one, takes effect on the concerned element.
<br>
<tt class="ltgrey">SET_DHTML("image1", "image2"+SCALABLE);</tt>
<br>
</td>
</tr>
<tr bgcolor="#eeeeee">
<td>
<b>SCROLL</b><br>(global and individual, images and layers)
</td>
</tr>
<tr bgcolor="#ffffff">
<td>
Enables the Auto-Scroll functionality which scrolls
the page automatically when the mousepointer approaches the window
boundary during a drag operation.
Thereby scrolling velocity is non-linearly
determined by the remaining distance of the border, giving the
impression that the scrolling velocity depended from the "pressure"
executed towards the boundary.
BTW, on these pages the SCROLL command has been
applied globally.
<br>
<tt class="ltgrey">SET_DHTML(SCROLL, "blueLayer", "image2", "image1", "layer2");</tt>
<br>or<br>
<tt class="ltgrey">SET_DHTML("blueLayer"+SCROLL, "image2", "image1", "layer2");</tt>
<br>
</td>
</tr>
<tr bgcolor="#eeeeee">
<td>
<b>TRANSPARENT</b><br>(global and individual, images and layers)
</td>
</tr>
<tr bgcolor="#ffffff">
<td>
<img name="ko1" src="/js/wz/ko1.png" alt="Drag Drop Image" title="Drag Drop Image" style="visibility: hidden;" width="200" height="114" align="left">
Makes the item semi-transparent while it is being dragged.
<br> <br>
(Yes, that's me.)
</td>
</tr>
<tr bgcolor="#eeeeee">
<td>
<b>VERTICAL</b><br>(individual, images and layers)
</td>
</tr>
<tr bgcolor="#ffffff">
<td>
<img name="lama" src="/js/wz/wz_lama.jpg" alt="Drag Drop Image" title="Drag Drop Image" style="visibility: hidden;" width="125" height="150" align="right">
Element can be dragged vertically only.
However, the item's <tt>moveTo()</tt> and <tt>moveBy()</tt> methods by their own aren't affected.
Therefore movements in both directions via scripting are unlimited.
<br>
<tt class="ltgrey">SET_DHTML("FirstImg", "snake"+VERTICAL);</tt>
<br>
</td>
</tr>
</tbody></table>
</td>
</tr>
</tbody></table>
<table>
<tbody><tr>
<td>
<b> <br> <br> <br><big>Combine commands?</big></b>
<br>
<b>Global</b> commands affect all drag drop elements and
must be passed to SET_DHTML() as separate arguments, separated with
commas from each other:
<br>
<tt class="ltgrey">SET_DHTML(NO_ALT,CURSOR_MOVE, "ImgName1","layerName","anotherImg");</tt>
<br>
To apply multiple <b>individual</b> commands to a certain drag drop element, use plus signs as connectors, as in the example below:
<br>
<tt class="ltgrey">SET_DHTML("layer1", "muckl"+VERTICAL+COPY+5+RESET_Z, "otherImg");</tt>
</td>
</tr>
<tr>
<td>
<b><a name="notes"> </a><br> <br> <br> <br> <br><big>Notes</big></b>
</td>
</tr>
</tbody></table>
</td>
<td><img src="/js/wz/transparentpixel.gif" alt="" width="80" height="1"></td>
</tr>
</tbody></table>
<p> <a href="#top"><img src="/js/wz/wz_topOfPage.gif" alt="Top of page" width="21" height="20" border="0"></a></p>
<hr width="95%" size="1" noshade="noshade">
<table cellpadding="20">
<tbody><tr>
<td>
<small>Walter Zorn, Munich
<br><a href="http://www.kreuzotter.de/impressum.htm">Impressum / about this page</a></small>
<br>
<br> <br> <br> <br> <br> <br> <br> <br> <br> <br>
</td>
</tr>
</tbody></table>
<div id="reZLyr" style="width: 252px; height: 100px; top: 2994px; left: 329px; z-index: 0; cursor: move; visibility: visible;">
<img src="/js/wz/transparentpixel.gif" alt="" width="60" height="100" align="left">
Drag this layer and drop it on one of the draggable images on this page.
</div>
<div id="nodetachlyr" style="width: 194px; height: 46px; top: 1294px; left: 94px; z-index: 0; cursor: move; visibility: visible;">
<center>
<img name="madno" src="/js/wz/wz_mad.gif" alt="" style="visibility: hidden;" width="15" height="15">
<img name="biggrinno" src="/js/wz/wz_biggrin.gif" alt="" style="visibility: hidden;" width="15" height="15">
<img name="frownno" src="/js/wz/wz_frown.gif" alt="" style="visibility: hidden;" width="15" height="15">
<br>
<small>Layer with standard behavior<br>without DETACH_CHILDREN command</small>
</center>
</div>
<div id="detachlyr" style="width: 158px; height: 46px; top: 1294px; left: 296px; z-index: 0; cursor: move; visibility: visible;">
<center>
<img name="madyes" src="/js/wz/wz_mad.gif" alt="" style="visibility: hidden;" width="15" height="15">
<img name="biggrinyes" src="/js/wz/wz_biggrin.gif" alt="" style="visibility: hidden;" width="15" height="15">
<img name="frownyes" src="/js/wz/wz_frown.gif" alt="" style="visibility: hidden;" width="15" height="15">
<br>
<small>A layer the DETACH_CHILDREN<br>command has been applied to</small>
</center>
</div>
<div id="bluelyr" style="width: 80px; height: 56px; top: 2638px; left: 760px; z-index: 0; cursor: auto; visibility: visible;"><small>A layer the NO_DRAG command has been applied to<br></small></div>
<script type="text/javascript">
<!--
SET_DHTML(CURSOR_MOVE, RESIZABLE, SCROLL, "azcat"+NO_ALT, "biggrinno", "biggrinyes", "bluelyr"+NO_DRAG, "ccanvas"+MAXOFFRIGHT+100+MAXOFFBOTTOM+100+MAXOFFLEFT+100+MAXOFFTOP+100, "chameleon", "counter", "deddie"+MAXWIDTH+270+MAXHEIGHT+186+MINWIDTH+45+MINHEIGHT+31, "detachbuoy"+NO_DRAG, "detachlyr"+DETACH_CHILDREN, "dolly"+CLONE, "frownno", "frownyes", "grizzly"+SCALABLE, "koala"+CURSOR_HAND, "ko1"+TRANSPARENT, "lama"+VERTICAL, "lefttop"+NO_DRAG, "leop", "madno", "madyes", "muckl"+COPY+5, "nodetachlyr", "reZLyr"+RESET_Z, "rhlguana"+HORIZONTAL, "rightbottom"+NO_DRAG, "track_r"+NO_DRAG, "track_g"+NO_DRAG, "track_b"+NO_DRAG, "thumb_r"+MAXOFFLEFT+45+MAXOFFRIGHT+45+HORIZONTAL, "thumb_g"+MAXOFFLEFT+45+MAXOFFRIGHT+45+HORIZONTAL, "thumb_b"+MAXOFFLEFT+45+MAXOFFRIGHT+45+HORIZONTAL);
function moveBluelyr()
{
if (blyr.x > dd.elements.lefttop.x - blyr.w && blyr.y >= dd.elements.rightbottom.y) blyr.moveTo(blyr.x-8, dd.elements.rightbottom.y);
else if (blyr.x <= dd.elements.lefttop.x - blyr.w && blyr.y > dd.elements.lefttop.y - blyr.h) blyr.moveTo(dd.elements.lefttop.x - blyr.w, blyr.y-8);
else if (blyr.x < dd.elements.rightbottom.x && blyr.y <= dd.elements.lefttop.y - blyr.h) blyr.moveTo(blyr.x+8, dd.elements.lefttop.y - blyr.h);
else if (blyr.x >= dd.elements.rightbottom.x && blyr.y < dd.elements.rightbottom.y) blyr.moveTo(dd.elements.rightbottom.x, blyr.y+8);
else blyr.moveTo(dd.elements.rightbottom.x, dd.elements.rightbottom.y);
setTimeout('moveBluelyr();', 160);
}
function my_DragFunc()
{
if (dd.obj.name.indexOf('thumb_') >= 0)
{
var red = (parseInt((thumb_r.x-thumb_r.defx+45)*255/90)).toString(16),
green = (parseInt((thumb_g.x-thumb_g.defx+45)*255/90)).toString(16),
blue = (parseInt((thumb_b.x-thumb_b.defx+45)*255/90)).toString(16);
while (red.length < 2) red = '0'+red;
while (blue.length < 2) blue = '0'+blue;
while (green.length < 2) green = '0'+green;
var color = "#"+red+green+blue;
dd.elements.ccanvas.setBgColor(color);
document.cform.ctext.value = color;
}
}
var lyr1 = dd.elements.reZLyr,
nodet = dd.elements.nodetachlyr,
det = dd.elements.detachlyr,
thumb_r = dd.elements.thumb_r,
thumb_g = dd.elements.thumb_g,
thumb_b = dd.elements.thumb_b,
blyr = dd.elements.bluelyr;
blyr.moveTo(dd.elements.rightbottom.x, dd.elements.rightbottom.y);
blyr.show();
moveBluelyr();
lyr1 = dd.elements.reZLyr;
lyr1.moveTo(dd.elements.leop.x + dd.elements.leop.w - 65, dd.elements.leop.y + 20);
lyr1.show();
nodet.moveTo(dd.elements.detachbuoy.x, dd.elements.detachbuoy.y-nodet.h);
nodet.show();
det.moveTo(nodet.x+nodet.w+2, nodet.y);
det.show();
for (var i = 0; i < det.children.length; i++) det.children[i].moveTo(det.children[i].x+det.x-det.defx, det.children[i].y+det.y-det.defy);
thumb_r.moveTo(dd.elements.track_r.x+36, dd.elements.track_r.y);
thumb_g.moveTo(dd.elements.track_g.x+36, dd.elements.track_g.y);
thumb_b.moveTo(dd.elements.track_b.x+36, dd.elements.track_b.y);
thumb_r.setZ(dd.elements.track_r.z+1);
thumb_g.setZ(dd.elements.track_g.z+1);
thumb_b.setZ(dd.elements.track_b.z+1);
dd.elements.track_r.addChild('thumb_r');
dd.elements.track_g.addChild('thumb_g');
dd.elements.track_b.addChild('thumb_b');
thumb_r.defx = dd.elements.track_r.x+36;
thumb_g.defx = dd.elements.track_g.x+36;
thumb_b.defx = dd.elements.track_b.x+36;
//-->
</script><div id="thumb_bdIi15v" style="position: absolute; left: 36px; top: 0px; width: 22px; height: 35px; z-index: 3; cursor: move;"><img name="thumb_bdIi15vNI1m6G" src="/js/wz/wz_sliderthumb.gif" alt="blue" title="blue" width="22" height="35"></div><div id="thumb_gdIi15v" style="position: absolute; left: 36px; top: 0px; width: 22px; height: 35px; z-index: 3; cursor: move;"><img name="thumb_gdIi15vNI1m6G" src="/js/wz/wz_sliderthumb.gif" alt="green" title="green" width="22" height="35"></div><div id="thumb_rdIi15v" style="position: absolute; left: 36px; top: 0px; width: 22px; height: 35px; z-index: 3; cursor: move;"><img name="thumb_rdIi15vNI1m6G" src="/js/wz/wz_sliderthumb.gif" alt="red" title="red" width="22" height="35"></div><div id="track_bdIi15v" style="position: absolute; left: 0px; top: 0px; width: 94px; height: 35px; z-index: 1; cursor: auto;"><img name="track_bdIi15vNI1m6G" src="/js/wz/wz_track.gif" alt="blue" title="blue" style="display: none !important;" width="94" hidden="" height="35"></div><div id="track_gdIi15v" style="position: absolute; left: 0px; top: 0px; width: 94px; height: 35px; z-index: 1; cursor: auto;"><img name="track_gdIi15vNI1m6G" src="/js/wz/wz_track.gif" alt="green" title="green" style="display: none !important;" width="94" hidden="" height="35"></div><div id="track_rdIi15v" style="position: absolute; left: 0px; top: 0px; width: 94px; height: 35px; z-index: 1; cursor: auto;"><img name="track_rdIi15vNI1m6G" src="/js/wz/wz_track.gif" alt="red" title="red" style="display: none !important;" width="94" hidden="" height="35"></div><div id="rightbottomdIi15v" style="position: absolute; left: 1445px; top: 2873px; width: 1px; height: 1px; z-index: 1; cursor: auto;"><img name="rightbottomdIi15vNI1m6G" src="/js/wz/transparentpixel.gif" alt="" title="" width="1" height="1"></div><div id="rhlguanadIi15v" style="position: absolute; left: 1287px; top: 1504px; width: 159px; height: 127px; z-index: 1; cursor: move;"><img name="rhlguanadIi15vNI1m6G" src="/js/wz/wz_ddrhinoceroslguana.jpg" alt="Drag Drop Image" title="Drag Drop Image" width="159" height="127"></div><div id="muckldIi15v" style="position: absolute; left: 94px; top: 709px; width: 100px; height: 130px; z-index: 1; cursor: move;"><img name="muckldIi15vNI1m6G" src="/js/wz/wz_muckl.jpg" alt="Mulitiplied drag drop image" title="Mulitiplied drag drop image" width="100" height="130"></div><div id="muckl1dIi15v" style="position: absolute; left: 94px; top: 709px; width: 100px; height: 130px; z-index: 2; cursor: move;"><img name="muckl1dIi15vNI1m6G" src="/js/wz/wz_muckl.jpg" alt="Mulitiplied drag drop image" title="Mulitiplied drag drop image" width="100" height="130"></div><div id="muckl2dIi15v" style="position: absolute; left: 94px; top: 709px; width: 100px; height: 130px; z-index: 3; cursor: move;"><img name="muckl2dIi15vNI1m6G" src="/js/wz/wz_muckl.jpg" alt="Mulitiplied drag drop image" title="Mulitiplied drag drop image" width="100" height="130"></div><div id="muckl3dIi15v" style="position: absolute; left: 94px; top: 709px; width: 100px; height: 130px; z-index: 4; cursor: move;"><img name="muckl3dIi15vNI1m6G" src="/js/wz/muckl.jpg" alt="Mulitiplied drag drop image" title="Mulitiplied drag drop image" width="100" height="130"></div><div id="muckl4dIi15v" style="position: absolute; left: 94px; top: 709px; width: 100px; height: 130px; z-index: 5; cursor: move;"><img name="muckl4dIi15vNI1m6G" src="/js/wz/muckl.jpg" alt="Mulitiplied drag drop image" title="Mulitiplied drag drop image" width="100" height="130"></div><div id="muckl5dIi15v" style="position: absolute; left: 94px; top: 709px; width: 100px; height: 130px; z-index: 6; cursor: move;"><img name="muckl5dIi15vNI1m6G" src="/js/wz/muckl.jpg" alt="Mulitiplied drag drop image" title="Mulitiplied drag drop image" width="100" height="130"></div><div id="madyesdIi15v" style="position: absolute; left: 336px; top: 1297px; width: 15px; height: 15px; z-index: 1; cursor: move;"><img name="madyesdIi15vNI1m6G" src="/js/wz/wz_mad.gif" alt="" title="" width="15" height="15"></div><div id="madnodIi15v" style="position: absolute; left: 152px; top: 1297px; width: 15px; height: 15px; z-index: 1; cursor: move; visibility: visible;"><img name="madnodIi15vNI1m6G" src="/js/wz/wz_mad.gif" alt="" title="" width="15" height="15"></div><div id="leopdIi15v" style="position: absolute; left: 94px; top: 2964px; width: 300px; height: 205px; z-index: 1; cursor: move;"><img name="leopdIi15vNI1m6G" src="/js/wz/ddleop.jpg" alt="Drag&Drop Image" title="Drag&Drop Image" width="300" height="205"></div><div id="lefttopdIi15v" style="position: absolute; left: 94px; top: 2700px; width: 1px; height: 1px; z-index: 1; cursor: auto;"><img name="lefttopdIi15vNI1m6G" src="/js/wz/transparentpixel.gif" alt="" title="" width="1" height="1"></div><div id="lamadIi15v" style="position: absolute; left: 1321px; top: 4085px; width: 125px; height: 150px; z-index: 1; cursor: move;"><img name="lamadIi15vNI1m6G" src="/js/wz/lama.jpg" alt="Drag Drop Image" title="Drag Drop Image" width="125" height="150"></div><div id="ko1dIi15v" style="position: absolute; left: 94px; top: 3912px; width: 200px; height: 114px; z-index: 1; cursor: move;"><img name="ko1dIi15vNI1m6G" src="/js/wz/ko1.png" alt="Drag Drop Image" title="Drag Drop Image" width="200" height="114"></div><div id="koaladIi15v" style="position: absolute; left: 1286px; top: 920px; width: 160px; height: 213px; z-index: 1; cursor: pointer;"><img name="koaladIi15vNI1m6G" src="/js/wz/ddkoala.jpg" alt="Drag&Drop Image" title="Drag&Drop Image" width="160" height="213"></div><div id="grizzlydIi15v" style="position: absolute; left: 94px; top: 3508px; width: 130px; height: 160px; z-index: 1; cursor: move;"><img name="grizzlydIi15vNI1m6G" src="/js/wz/grizzly.jpg" alt="Drag Drop Image" title="Drag Drop Image" width="130" height="160"></div><div id="frownyesdIi15v" style="position: absolute; left: 405px; top: 1297px; width: 15px; height: 15px; z-index: 1; cursor: move;"><img name="frownyesdIi15vNI1m6G" src="/js/wz/wz_frown.gif" alt="" title="" width="15" height="15"></div><div id="frownnodIi15v" style="position: absolute; left: 221px; top: 1297px; width: 15px; height: 15px; z-index: 1; cursor: move; visibility: visible;"><img name="frownnodIi15vNI1m6G" src="/js/wz/wz_frown.gif" alt="" title="" width="15" height="15"></div><div id="dollydIi15v" style="position: absolute; left: 94px; top: 380px; width: 160px; height: 111px; z-index: 1; cursor: move;"><img name="dollydIi15vNI1m6G" src="/js/wz/dddolly.jpg" alt="Drag & Drop Image" title="Drag & Drop Image" width="160" height="111"></div><div id="detachbuoydIi15v" style="position: absolute; left: 94px; top: 1346px; width: 1px; height: 1px; z-index: 1; cursor: auto;"><img name="detachbuoydIi15vNI1m6G" src="/js/wz/transparentpixel.gif" alt="" title="" width="1" height="1"></div><div id="deddiedIi15v" style="position: absolute; left: 94px; top: 1690px; width: 90px; height: 62px; z-index: 1; cursor: move;"><img name="deddiedIi15vNI1m6G" src="/js/wz/deddie.jpg" alt="Drag Drop Image" title="Drag Drop Image" width="90" height="62"></div><div id="chameleondIi15v" style="position: absolute; left: 94px; top: 3308px; width: 155px; height: 95px; z-index: 1; cursor: move;"><img name="chameleondIi15vNI1m6G" src="/js/wz/ddcham.jpg" alt="JavaScript, DHTML: Drag&Drop Images" title="JavaScript, DHTML: Drag&Drop Images" width="155" height="95"></div><div id="ccanvasdIi15v" style="position: absolute; left: 182px; top: 1901px; width: 300px; height: 120px; z-index: 1; cursor: move;"><img name="ccanvasdIi15vNI1m6G" src="/js/wz/transparent_300_120.gif" alt="" title="" width="300" height="120"></div><div id="biggrinyesdIi15v" style="position: absolute; left: 371px; top: 1297px; width: 15px; height: 15px; z-index: 1; cursor: move;"><img name="biggrinyesdIi15vNI1m6G" src="/js/wz/wz_biggrin.gif" alt="" title="" width="15" height="15"></div><div id="biggrinnodIi15v" style="position: absolute; left: 187px; top: 1297px; width: 15px; height: 15px; z-index: 1; cursor: move; visibility: visible;"><img name="biggrinnodIi15vNI1m6G" src="/js/wz/wz_biggrin.gif" alt="" title="" width="15" height="15"></div><div id="azcatdIi15v" style="position: absolute; left: 94px; top: 2471px; width: 110px; height: 106px; z-index: 1; cursor: move;"><img name="azcatdIi15vNI1m6G" src="/js/wz/azcat.jpg" width="110" height="106"></div>
</body></html>
//
koh5_pano
Drag mouse to navigate.
Navigation
- Left/Right Mouse drag: Changes camera heading.
- Up/Sown Mouse drag: Changes camera pitch.
- Scroll wheel: Changes camera field of view.
- I-Key: Displays Info panel with canvas size, image size and FPS.
17.Aug.2010, Martin Wengenmayer