DIR : /home/kozerus/public_html/wz/wz_frame_right.htm
/home/kozerus/public_html/wz
<!DOCTYPE html>
<html><head>
<span id="line2"></span></span><span><<span class="start-tag">html</span>></span><span>
<span id="line3"></span></span><span><<span class="start-tag">head</span>></span><span>
<span id="line4"></span></span><span><<span class="start-tag">meta</span> <span class="attribute-name">http-equiv</span>="<a class="attribute-value">expires</a>" <span class="attribute-name">content</span>="<a class="attribute-value">0</a>"></span><span>
<span id="line5"></span></span><span><<span class="start-tag">meta</span> <span class="attribute-name">http-equiv</span>="<a class="attribute-value">content-type</a>" <span class="attribute-name">content</span>="<a class="attribute-value">text/html; charset=iso-8859-1</a>"></span><span>
<span id="line6"></span></span><span><<span class="start-tag">META</span> <span class="attribute-name">HTTP-EQUIV</span>="<a class="attribute-value">imagetoolbar</a>" <span class="attribute-name">CONTENT</span>="<a class="attribute-value">no</a>"></span><span>
<span id="line7"></span></span><span><<span class="start-tag">title</span>></span><span>JavaScript: DHTML Library, Drag <span class="entity"><span>&</span>amp;</span> Drop for Images and Layers</span><span></<span class="end-tag">title</span>></span><span>
<span id="line8"></span></span><span><<span class="start-tag">link</span> <span class="attribute-name">rel</span>="<a class="attribute-value">stylesheet</a>" <span class="attribute-name">type</span>="<a class="attribute-value">text/css</a>" <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/newwalterzorn.css">../../../newwalterzorn.css</a>"></span><span>
<span id="line9"></span></span><span></<span class="end-tag">head</span>></span><span>
<span id="line10"></span></span><span><<span class="start-tag">body</span> <span class="attribute-name">bgcolor</span>="<a class="attribute-value">#ffffff</a>"></span><span>
<span id="line11"></span> </span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/scripts/wz_dragdrop.js">../../../scripts/wz_dragdrop.js</a>"></span><span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line12"></span> </span><span><<span class="start-tag">table</span> <span class="attribute-name">cellpadding</span>="<a class="attribute-value">6</a>"></span><span>
<span id="line13"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line14"></span> </span><span><<span class="start-tag">th</span>></span><span>
<span id="line15"></span> </span><span><<span class="start-tag">big</span>></span><span>
<span id="line16"></span> Cross-Frame Communication with wz_dragdrop.js
<span id="line17"></span> </span><span></<span class="end-tag">big</span>></span><span>
<span id="line18"></span> </span><span></<span class="end-tag">th</span>></span><span>
<span id="line19"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line20"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line21"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line22"></span> Click (repeatedly) on images...
<span id="line23"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line24"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line25"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line26"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line27"></span> </span><span><<span class="start-tag">img</span> <span class="attribute-name">name</span>="<a class="attribute-value">prairiedog</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/dragdrop/ddprairiedog.jpg">../../../images/dragdrop/ddprairiedog.jpg</a>" <span class="attribute-name">width</span>="<a class="attribute-value">135</a>" <span class="attribute-name">height</span>="<a class="attribute-value">148</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>"></span><span>
<span id="line28"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line29"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line30"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line31"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line32"></span> </span><span><<span class="start-tag">img</span> <span class="attribute-name">name</span>="<a class="attribute-value">chameleon</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/dragdrop/ddcham.jpg">../../../images/dragdrop/ddcham.jpg</a>" <span class="attribute-name">width</span>="<a class="attribute-value">155</a>" <span class="attribute-name">height</span>="<a class="attribute-value">95</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>"></span><span>
<span id="line33"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line34"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line35"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line36"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line37"></span> </span><span><<span class="start-tag">img</span> <span class="attribute-name">name</span>="<a class="attribute-value">einstein</a>" <span class="attribute-name">src</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/images/dragdrop/einstrec.gif">../../../images/dragdrop/einstrec.gif</a>" <span class="attribute-name">width</span>="<a class="attribute-value">150</a>" <span class="attribute-name">height</span>="<a class="attribute-value">96</a>" <span class="attribute-name">alt</span>="<a class="attribute-value"></a>"></span><span>
<span id="line38"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line39"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line40"></span> </span><span><<span class="start-tag">tr</span>></span><span>
<span id="line41"></span> </span><span><<span class="start-tag">td</span>></span><span>
<span id="line42"></span> Access to drag<span class="entity"><span>&</span>amp;</span>drop items in a different frame is feasible via a statement like
<span id="line43"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line44"></span> </span><span><<span class="start-tag">tt</span>></span><span>parent.FrameName.dd.elements['ItemName']</span><span></<span class="end-tag">tt</span>></span><span>
<span id="line45"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line46"></span> (look at the source code of this frame).
<span id="line47"></span> On the </span><span><<span class="start-tag">b</span>></span><span></span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/api_e.htm">../../api_e.htm</a>" <span class="attribute-name">target</span>="<a class="attribute-value">_top</a>"></span><span>API reference of wz_dragdrop.js</span><span></<span class="end-tag">a</span>></span><span></span><span></<span class="end-tag">b</span>></span><span> you'll find more details about how to do scripting with drag<span class="entity"><span>&</span>amp;</span>drop items.
<span id="line48"></span> </span><span><<span class="start-tag">br</span>></span><span><span class="entity"><span>&</span>nbsp;</span></span><span><<span class="start-tag">br</span>></span><span>
<span id="line49"></span> </span><span><<span class="start-tag">a</span> <span class="attribute-name">href</span>="<a class="attribute-value" href="view-source:http://www.walterzorn.de/en/dragdrop/demos/demos.htm">../demos.htm</a>" <span class="attribute-name">target</span>="<a class="attribute-value">_top</a>"></span><span>Back, Zur<span class="entity"><span>&</span>uuml;</span>ck</span><span></<span class="end-tag">a</span>></span><span>
<span id="line51"></span> </span><span></<span class="end-tag">td</span>></span><span>
<span id="line52"></span> </span><span></<span class="end-tag">tr</span>></span><span>
<span id="line53"></span> </span><span></<span class="end-tag">table</span>></span><span>
<span id="line54"></span></span><span><<span class="start-tag">script</span> <span class="attribute-name">type</span>="<a class="attribute-value">text/javascript</a>"></span><span>
<span id="line55"></span></span><span><!</span><span>--
<span id="line56"></span>SET_DHTML(CURSOR_CROSSHAIR, "prairiedog"+VERTICAL+HORIZONTAL, "chameleon"+VERTICAL+HORIZONTAL, "einstein"+VERTICAL+HORIZONTAL);
<span id="line57"></span>// Combining VERTICAL and HORIZONTAL is the easiest way to fix elements
<span id="line58"></span>
<span id="line59"></span>function my_PickFunc() // This function overrides it's namesake in wz_dragdrop.js
<span id="line60"></span>{
<span id="line61"></span> if (parent.left && parent.left.dd) // does the left frame exist?
<span id="line62"></span> {
<span id="line63"></span> parent.left.dd.elements[dd.obj.name].copy();
<span id="line64"></span> // Creates a copy of the clicked image's match (same name!) in the left frame
<span id="line65"></span>
<span id="line66"></span> var copieslength = parent.left.dd.elements[dd.obj.name].copies.length;
<span id="line67"></span> // Current number of copies
<span id="line68"></span>
<span id="line69"></span> parent.left.dd.elements[dd.obj.name].copies[copieslength-1].moveTo (parent.left.dd.elements[dd.obj.name].x + 10*copieslength, parent.left.dd.elements[dd.obj.name].y + 10*copieslength);
<span id="line70"></span> // Offsets the current copy by 10 px from the previous.
<span id="line71"></span>
<span id="line72"></span> var comment = parent.left.dd.elements.comment;
<span id="line73"></span> if (!comment.visible) comment.show(); // Show the initially hidden comment DIV in the left frame
<span id="line74"></span> }
<span id="line75"></span>}
<span id="line76"></span>
<span id="line77"></span>
<span id="line78"></span>//-->
<span id="line79"></span></span><span></<span class="end-tag">script</span>></span><span>
<span id="line80"></span></span><span></<span class="end-tag">body</span>></span><span>
<span id="line81"></span></span><span></<span class="end-tag">html</span>></span><span>
<span id="line82"></span>
<span id="line83"></span>
<span id="line84"></span></span></pre></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