<HTML> <head> <title>DOM Level 1 Demo, 3D can - 3D resize / clip</title> <script type="text/javascript"> //////////////////////////////////////////////////////////////////////////////// // 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. // // 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 // /////////////////////////////////////////////////////////////////////////////////// //// /// Creating multiple images based on the same URL. // For each image, make a fine clipping and position it to simulate // a distortion effect. Also change the width and height of the images. // function gen(urls) { // Get the object for the dd_area div element. All the images will be // created as a child of dd_area, inside div elements. // var node=document.getElementById("dd_area"); // Since gen function 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 before starting // to generate the images. // for(var i=0;i < node.childNodes.length;i++) { var mycelnode=node.childNodes.item(i); node.removeChild(mycelnode); } // Internal variables used for the positioning, clipping and width/height resize. // var clipright=399; // Right margin clipped area. var clipleft=0; // Left margin clipper area. var posleft=2; // Left position of the div. var postop=40; // Top position of the div. var pi=3.141516; // Approximate PI value. var clipdx=0; // width for the clipped area. // Loop creating all images inside div elements. for(var i=0;i<29;i++) { // Creates the div element where an image will be included. // var beforediv=document.createElement("DIV"); // qq value ranges from 0 to 1 and then to zero again. It's based on // sin function and also on the number of steps in this for statement. // var qq=Math.sin((i/29)*pi); // The div element's top position is a fixed value (40) plus a variable value. // Note that the variable value is qq value (0-1) times 15, so it produces // a value which is based on the sin function and ranges from 0-15). // postop=40+(qq*15); // This way, the pair (postop,posleft) makes a curve // effect based on sin function. var clipright2=clipright-clipdx; // clipright2 is a fine variation over clipright // it's the value of the clipright plus an extra // clipping value (clipdx) that is the same // as the width value of the clipped area. clipright2=clipleft+clipdx; // Setting all style properties necessary.. beforediv.setAttribute("style","position:absolute;top:"+postop+"px;left:"+posleft+"px;width:400px;height:350px;clip:rect(0px,"+clipright2+"px,400px,"+clipleft+"px);overflow:hidden;"); // Setting the name of the div in the id attribute. beforediv.setAttribute("id","image"+i); // Creating the image... var insidediv=document.createElement("img"); // Setting src, width and height attributes. insidediv.setAttribute("src",urls); insidediv.setAttribute("width",400); insidediv.setAttribute("height",295); // Appending the img as a child of the div element. beforediv.appendChild(insidediv); // Appending the div element as a child of the dd_area div element. node.appendChild(beforediv); // Incrementing variables. clipdx=1+qq*10; clipright-=clipdx; clipleft+=clipdx; posleft-=0.8; } } </script> </head> <body onload="" bgcolor="#aaaaaa"> <!-- This is the area in which the images will be created --> <div id="dd_area" style="position:absolute;left:200px;top:100px;"> </div> <!-- this is the top of the can --> <div id="c1" style="position:absolute;left:200px;top:105px;"> <img src="tamp.gif"></img> </div> <!-- this is the png with shadow and light effect--> <div id="light" style="position:absolute;left:183px;top:130px;"> <img src="light.png"> </div> <!-- this is the bottom of the can --> <div id="c1" style="position:absolute;left:200px;top:425px;"> <img src="tamp2.gif"></img> </div> <!-- The form and the button that calls gen function pass the text field value as an argument. --> <div id="fields"> <form> <input type=text name="namef" value="image1.jpg"></input> <input type=button onclick="gen(document.forms[0].namef.value)" value="fetch image url"></input> </form> </div> </body> </HTML>