<HTML> <head> <title>DOM demonstration, the 3d resize effect</title> <script> //////////////////////////////////////////////////////////////////////////////// // Produced by Marcio Galli for Netscape Communications. // Uses DOM 1 to dynamically create a set of text elements using // the same content for all the texts, but with different sizes. // // Uses DOM Level 1 to create the text elements dynamically and // to change style property. References: // // http://www.mozilla.org/docs/dom/technote/tn-dom-table/index.html // http://dmoz.org/Computers/Programming/Languages/JavaScript/W3C_DOM/ // http://www.geckonnection.com // //////////////////////////////////////////////////////////////////////////////// // start function // // This function is called when the page is loaded. See the onload="start()" attribute // in the body tag. // function start() { door=document.getElementById("door"); door.addEventListener("mousedown",beginDrag, false); gorender('geckosmic.jpg'); } /////////////////////////////////////////////////////////////////////////////////// //// /// Creates multiple images based on the same URL. For each image, makes a // fine clipping and positions it to simulate a perspective effect. Also // changes the width and height of the images. // function gorender(urlimage) { // Since gorender can be called many times (see the onclick attribute of // the form button in the HTML section of this page), the following script // removes all child nodes of the dd_area div element. // node=document.getElementById("dd_area"); for(i=0;i<node.childNodes.length;i++) { mycelnode=node.childNodes.item(i); node.removeChild(mycelnode); } // These variables are necessary for the next for statement, which produces the // first wall in the left side. These are internal variables used for the // positioning, clipping and width/height resize. // var clipright=555; // Right margin clipped area. var cliptop=30; // Top margin clipped area. var clipbottom=5; // Bottom margin clipped area. var clipleft=40; // Left margin clipped area. var posleft=-160; // Left position of the div. var postop=-45; // Top position of the div. var ww=210; // Aux value for width and height. var www=0; // Aux value for width and height. // Unfortunately, the comments here do not explain the theory used // to make the distort effect illusion in any detail. 30 Images are created, each one // with its own clipping, positioning, width and height. // // Loop creating all images inside div elements. for(i=30;i>0;i--) { // Creates the div element where an image will be included. // beforediv=document.createElement("DIV"); // Sets all styles properties necessary.. beforediv.setAttribute("style","position:absolute;top:"+postop+"px;left:"+posleft+"px;width:600px;height:400px;clip:rect("+cliptop+"px,"+clipright+"px,"+clipbottom+"px,"+clipleft+"px);overflow:hidden;"); // Sets the name of the div in the id attribute. beforediv.setAttribute("id","image"+i); // Creates the image... insidediv=document.createElement("img"); // Sets src, width and height attributes. insidediv.setAttribute("src",urlimage); www=ww+(8*i); insidediv.setAttribute("width",""+www+""); www=ww+(8*i); insidediv.setAttribute("height",""+www+""); // Appends the img as a child of the div element. beforediv.appendChild(insidediv); // Appends the div element as a child of the dd_area div element. node.appendChild(beforediv); // Increments variables to ensure the effect. clipright-=4; clipleft+=4; postop+=4; clipbottom+=8; } // Internal variables used for the positioning, clipping and width/height resize. // var clipright=575; // Right margin clipped area. var cliptop=30; // Top margin clipped area. var clipbottom=235; // Bottom margin clipped area. var clipleft=20; // Left margin clipped area. var posleft=170; // Left position of the div. var postop=70; // Top position of the div. var ww=220; // Aux value for width and height. var www=0; // Aux value for width and height. // Loop creates all images inside div elements. for(i=1;i<30;i++) { // Creates the div element where an image will be included. // beforediv=document.createElement("DIV"); // Sets all styles properties necessary.. beforediv.setAttribute("style","position:absolute;top:"+postop+"px;left:"+posleft+"px;width:600px;height:400px;clip:rect("+cliptop+"px,"+clipright+"px,"+clipbottom+"px,"+clipleft+"px);overflow:hidden;"); // Sets the name of the div in the id attribute. beforediv.setAttribute("id","image2 "+i); // Creates the image... insidediv=document.createElement("img"); // Sets src, width and height attributes. insidediv.setAttribute("src",urlimage); www=ww+(8*i); insidediv.setAttribute("width",""+www+""); www=ww+(8*i); insidediv.setAttribute("height",""+www+""); // Appends the img as a child of the div element. beforediv.appendChild(insidediv); // Appends the div element as a child of the dd_area div element. node.appendChild(beforediv); // Increments variables in keeping with the effect. clipright-=8; clipleft+=8; postop-=4; posleft-=4; clipbottom-=8; } // Creates a single image in the center without effect. Just one image // with correct clipping and resize to match with positioning of all // elements in the page. // beforediv=document.createElement("DIV"); beforediv.setAttribute("style","position:absolute;top:80px;left:-40px;width:265px;height:300px;clip:rect(20px,35px,146px,40px);overflow:hidden;"); beforediv.setAttribute("id","image3"+i); insidediv=document.createElement("img"); insidediv.setAttribute("src",urlimage); insidediv.setAttribute("width",300); insidediv.setAttribute("height",180); beforediv.appendChild(insidediv); node.appendChild(beforediv); } //------------------------------------------------------------------------------------- // DOM2/Event Model - Drag Support for the Dynamic Table // These three methods are event handlers: // doDrag(e), beginDrag(e) and endDrag(e) // // beginDrag was registered in the start function. // doDrag and endDrag are registered in beginDrag function. // // NOTE: You can "copy and paste" this "drag and drop"-based piece of code. Just // remember to change the ID of the "door" element to the ID of the element you // want to drag. // //------------------------------------------------------------------------------------- // doDrag event - called when dragging // function doDrag(e) { // Calculates the difference from the last stored position to // the current position. // var difX=e.clientX-window.lastX; var difY=e.clientY-window.lastY; // Retrieves the X and Y position (left and top style properties) // of door div element. // var newX = parseInt(document.getElementById("door").style.left)+difX; var newY = parseInt(document.getElementById("door").style.top)+difY; // Sets the new position for the door div element. // document.getElementById("door").style.left=newX+"px"; document.getElementById("door").style.top=newY+"px"; // Stores the current mouse position as last position. // window.lastX=e.clientX; window.lastY=e.clientY; } //---------------------------------------------------------------------------- // When drag begins, this function is called. // This event handler was registered in the table constructor function (dd_dynatable). // function beginDrag(e) { // Stores the current mouse position window.lastX=e.clientX; window.lastY=e.clientY; // Register doDrag event handler to receive onmousemove events. window.onmousemove=doDrag; // Register endDrag event handler to receive onmouseup events. window.onmouseup=endDrag; } //---------------------------------------------------------------------------- // Called when the mouse button is released. // This event handler was registered in beginDrag function. // function endDrag(e) { // Release doDrag event handler assignment. window.onmousemove=null; } </script> </head> <body onload="start();"> <!-- Just another other image element - piece of the house --> <div id="lbt2" style="position:absolute;left:13px;top:49px;"> <img src="top4.gif"> </div> <!-- Just another other image element - piece of the house --> <div id="lbt2" style="position:absolute;left:2px;top:120px;"> <img src="top3.gif"> </div> <!-- Just other image element - piece of the house --> <div id="left" style="position:absolute;left:57px;top:139px;"> <img src="top1.gif"> </div> <!-- This is the area in which all images are created. --> <div id="dd_area" style="position:absolute;left:240px;top:170px;"> </div> <!-- Just another other image element - piece of the house --> <div id="left" style="position:absolute;left:103px;top:155px;"> <img src="tleft.gif"> </div> <!-- Just another other image element - piece of the house --> <div id="right" style="position:absolute;left:548px;top:155px;"> <img src="tright.gif"> </div> <!-- Just another other image element - piece of the house --> <div id="top" style="position:absolute;left:124px;top:160px;"> <img src="t01.gif"> </div> <!-- Just another other image element - piece of the house --> <div id="bottom" style="position:absolute;left:124px;top:400px;"> <img src="t02.gif"> </div> <!-- --> <div id="lbt" style="position:absolute;left:57px;top:139px;"> <img src="top2.gif"> </div> <!-- this is the front wall of the house -- the one with a window and a door --> <div id="door" style="position:absolute;left:120px;top:159px;"> <img src="door.gif"> <div id="comment" style="position:absolute;left:2px;top:2px;"> you can drag this wall </div> </div> <!-- The form with the URL text field and the button. --> <!-- Note that onclick event of the text field calls gorender function to generate all images --> <form> <input type=text name="urlimage" value=""> <input type=button onclick="gorender(document.forms[0].urlimage.value)" value="fetch image"> </form> </body> </HTML>