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