<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>