www.dhteumeuleu.com

image-3D.html

Donation

Do you like this code ? Is it worth one or two dollars ? Any donation is appreciated !
Thank you for your support :)
Source Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>mandatory upgrade - interactive DHTML</title>
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com">
<meta http-equiv="imagetoolbar" content="no">
<style type="text/css">
	html {
		overflow: hidden;
	}
	body {
		margin: 0px;
		padding: 0px;
		background: #111;
		width: 100%;
		height: 100%;
		cursor: default;
	}
	#screen {
		position:absolute;
		left: 0%;
		top: 10%;
		width: 100%;
		height: 80%;
		background: #000;
		overflow: hidden;
	}
	#screen img {
		position: absolute;
		visibility: hidden;
		left: -10000px;
		filter: alpha(opacity=100);
		-ms-interpolation-mode:nearest-neighbor;
	}
	#screen div {
		position: absolute;
		top: -10000px;
		font-family: verdana, arial, helvetica, sans-serif;
		font-weight: bold;
		text-align: center;
		filter: alpha(opacity=100);
		color: #FFF;
	}
	#screen .texturl {
		color: #FF8000;
	}
</style>

<script type="text/javascript">
/*
   ========================================================
        script: image3D engine
        author: Gerard Ferrandez - [Ge1doot]
          date: April 16, 2008
          site: http://www.dhteumeuleu.com
       license: CC-BY-NC - do not remove this notice
   ========================================================
*/

var i3D = function() {
	/* ==== private variables and methods ==== */
	var O   = new Array(100);
	var N   = 0;
	var scr = false;
	var xm  = 0;
	var ym  = 0;
	var cx  = 0;
	var cy  = -2000;
	var cz  = 0;
	var zm  = 0;
	var cr  = 0;
	var nx  = 0;
	var ny  = 0;
	var nw  = 0;
	var nh  = 0;
	var cg  = false;
	var mo  = false;
	var path, FL, FS, Z, omob, hlb;
	/* ===== crossbrowsers events ==== */
	function addEvent (o, e, f) {
		var r = false;
		if (window.addEventListener) { o.addEventListener(e, f, false); r = true; }
		else if (window.attachEvent) { r = o.attachEvent('on' + e, f); }
		return r;
	}
	/* ===== append HTML Element ==== */
	function Append (tag, att, css) {
		var object = document.createElement(tag);
		for( var i in att) object[i] = att[i];
		for( var i in css) object.style[i] = css[i];
		this.appendChild(object);
		return object;
	}
	/* ===== window resize ==== */
	function resize () {
		var o = scr;
		for (nx = 0, ny = 0; o != null; o = o.offsetParent) {
			nx += o.offsetLeft;
			ny += o.offsetTop;
		}
		nw = scr.offsetWidth;
		nh = scr.offsetHeight;
	}
	/* ==== cache xbrowser opacity ==== */
	function initOpacity (o) {
		if (o.filters && o.filters.alpha) {
			o.alpha = o.filters.alpha;
			o.opacity = function (alpha) { this.alpha.opacity = Math.round(alpha); }
		} else {
			o.alpha = o.style;
			o.opacity = function (alpha) { this.alpha.opacity = alpha / 100; }
		}
	}
	/* ==== Image3D Constructor ==== */
	function Image3D (param) {
		var options = param[4] || {};
		/* ---- image Element ---- */
		this.img = scr.append('img', {
				'src' : path + param[0],
				'onclick' : this.click,
				'onmouseover' : this.mover,
				'parent' : this
			}
		);
		this.loaded = false;
		this.X      = param[1];
		this.Y      = -param[2];
		this.Z      = param[3];
		this.SX     = options['zx'] || 1;
		this.SY     = options['zy'] || this.SX;
		this.xb     = 0;
		this.yb     = 0;
		this.zb     = 0;
		this.ab     = 0;
		this.w2D    = 0;
		this.h2D    = 0;
		this.x2D    = 0;
		this.y2D    = 0;
		this.r      = 0;
		/* ---- link ---- */
		this.url = options['url'] || false;
		var txt  = options['txt'] || '';
		if (this.url) {
			txt += '<br><span class="texturl">'
				+ this.url.replace('http://','')
				+ '</span>';
			this.img.style.cursor = 'pointer';
		}
		this.icss = this.img.style;
		initOpacity(this.img);
		/* ---- text element ---- */
		if (txt) {
			this.txt = scr.append('div', {
					'innerHTML' : txt,
					'onclick' : this.click,
					'parent' : this
				},
				{'width' : '1000px'}
			);
			this.tp   = -10000;
			this.tf   = true;
			this.tcss = this.txt.style;
			initOpacity(this.txt);
		}
		O[N++] = this;
	}
	/* ==== prototype images functions ==== */
	Image3D.prototype = {
		/* ---- hide non moving images ---- */
		hide : function () {
			if (this.visible) {
				this.visible = false;
				this.img.style.width = '0px';
				this.tp = -10000;
			}
		},
		/* ---- hide text ---- */
		txthide : function () {
			if (this.txtvisible) {
				this.txtvisible = false;
				this.txt.style.top = '-10000px';
				this.tp = -10000;
				this.tf = true;
			}
		},
		/* ---- images onmouseover ---- */
		mover : function () {
			var that = this.parent;
			/* ---- hover ---- */
			if (mo != this) {
				if (mo) mo.style.border = "";
				mo = this;
				this.style.border = that.url ? hlb : omob;
			}
			/* ---- start animation text ---- */
			if (that.tf && Math.abs(zm - cz) < 50) {
				that.tp = 0;
				that.tf = false;
				that.tcss.fontSize = (that.r * nh / FS) + 'px'
			}
			return false;
		},
		/* ---- images onclick ---- */
		click : function() {
			var that = this.parent;
			if (that.url) {
				/* ---- jump to hyperlink ---- */
				window.location.href = that.url;
			}
			/* ---- go to image ---- */
			zm = that.Z + 5;
			cg = true;
			return false;
		},
		/* ==== main rendering function ==== */
		display : function () {
			if (this.loaded) {
				/* ---- 3D coordinates ---- */
				var x = this.X - cx;
				var y = this.Y - cy;
				var z = this.Z - cz;
				/* ---- animate text ---- */
				if(this.tp > -200) {
					this.txtvisible = true;
					this.tp         -= 2;
					this.tcss.left   = Math.round(this.x2D + this.w2D * .5 - 500) + 'px';
					this.tcss.top    = (this.y2D + this.tp + this.h2D * .5) + 'px';
					this.tcss.zIndex = Math.round(10000 - z);
					this.txt.opacity(200 + this.tp);
				} else this.txthide();
				/* ---- image visible ---- */
				if (z > 0) {
					/* ---- 3D to 2D transform ---- */
					this.r = FL / (FL + (z * Z));
					this.w2D = this.W * this.r * Z * this.SX;
					this.h2D = this.H * this.r * Z * this.SY;
					this.x2D = Math.floor((nw * .5) + (x * this.r * Z) - (this.w2D * .5));
					this.y2D = Math.floor((nh * .5) + (y * this.r * Z) - this.h2D);
					/* ---- image in screen ---- */
					if (this.x2D + this.w2D > 0 && this.x2D < nw) {
						this.visible = true;
						/* ---- image is moving ---- */
						if (this.x2D != this.xb || this.y2D != this.yb || z != this.zb) {
							this.xb    = this.x2D;
							this.yb    = this.y2D;
							this.zb    = z;
							/* ---- html rendering ---- */
							this.icss.left   = this.x2D + 'px';
							this.icss.top    = this.y2D + 'px';
							this.icss.width  = Math.ceil(this.w2D)  + 'px';
							this.icss.height = Math.ceil(this.h2D)  + 'px';
							this.icss.zIndex = Math.round(10000 - z);
							/* ---- fade in/out ---- */
							var a = Math.max(0, Math.min(100, z));
							if (a != this.ab) {
								this.ab = a;
								this.img.opacity(a);
							}
						}
					} else this.hide();
				} else this.hide();
			} else {
				/* ==== image onload ==== */
				if (this.img.complete && this.img.width) {
					/* ---- get size image ---- */
					this.W      = this.img.width;
					this.H      = this.img.height;
					this.loaded = true;
					this.img.style.visibility = 'visible';
				}
			}
		}
	}
	/* ==== public methods ==== */
	return {
		/* ---- initialize script ---- */
		init : function (container, imagepath, focalLength, zoom, fontSize, onmouseover_border, hyperlink_border, structure) {
			/* ---- container ---- */
			scr = document.getElementById(container);
			scr.append = Append;
			if (!scr) return false;
			/* ---- init ---- */
			resize();
			path = imagepath;
			FL   = focalLength;
			FS   = fontSize;
			Z    = zoom;
			omob = onmouseover_border;
			hlb  = hyperlink_border;
			xm   = nx - (document.body.offsetWidth) + nw;
			ym   = -ny - nh * .5;
			/* ---- camera xy position ---- */
			addEvent(window.document, 'mousemove', function(e) {
				e = e || window.event;
				xm = nx - (e.clientX * 2) + nw;
				ym = -ny + (e.clientY * 2) - nh * 2;
				return false;
			});
			/* ---- image onclick ---- */
			addEvent(scr, 'click', function() {
				if (!cg) zm = 0;
				cg = false;
				return false;
			});
			/* ---- window resize ---- */
			addEvent(window, 'resize', resize);
			/* ---- mouse wheel - camera z position ---- */
			if (window.addEventListener) scr.addEventListener('DOMMouseScroll', function(e) {
				zm += (e.detail * 40);
				return false;
			}, false);
			scr.onmousewheel = function () {
				zm += (-event.wheelDelta);
				return false;
			}
			/* ---- create objects ---- */
			for (var i = 0, n = structure.length; i < n; i++)  {
				var s = structure[i];
				var options = s[4];
				/* ---- repeat ---- */
				var r = options ? options['repeat'] : false;
				if (r) {
					for (var j = 0, m = r[1]; j < m; j++) {
						var ok = new Image3D(s);
						s[r[0]] += r[2];
					}
				}  else var ok = new Image3D(s);
			}
			/* ---- launch script ---- */
			setInterval(i3D.run, 16);
		},
		/* ---- main loop ---- */
		run : function () {
			/* ---- camera ease ---- */
			cx -= Math.round((xm + cx) * .1);
			cy += Math.round((ym - cy) * .1);
			cz += Math.round((zm - cz) * .1);
			/* ---- display loop ---- */
			var i = N;
			while (i--) O[i].display();
		}
	}
}();


/* ==== global onload ==== */
onload = function () {
	/* ---- build structure ----
	i3D.init(container, path, focalLength, globalZoom, fontSize, onmouseover_border, hyperlink_border
		[image, x,y,z, {options}], ...
	);
	options { 'zx':zoom x, 'xy': zoom y, 'url':hyperlink, 'txt':text
		'repeat':[axis(1,2,3), number, increment]
	}
	*/
	i3D.init("screen", "", 300, 1, 12, '#666 solid 1px', '#fff dotted 1px', [
		['bim.jpg', 0,20,1020, {'zx':9, 'zy':.5}],
		['r4.gif', -1200,0,1000, {'txt':'duplicated'}],
		['r29.gif', 700,0,1000, {'txt':'mechanomorphism'}],
		['r15a.gif', -1100,0,900, {'txt':'amniocentetic'}],
		['r59.gif', 600,0,500, {'txt':'asphericity'}],
		['r39a.gif', -1000,0,200, {'txt':'onomatopoeia'}],
		['r65.gif', -400,0,150, {'txt':'therianthrope'}],
		['r39c.gif', 400,0,150, {'txt':'arboretum'}],
		['r14.gif', 1200,0,250, {'txt':'heliotrope'}],
		['r13.gif', 0,0,900, {'txt':'', 'url':'http://www.dhteumeuleu.com'}],
		['r74.gif', -400,0,950, {'txt':'santorum'}],
		['r74.gif', 400,0,950, {'txt':'taphephobia'}],
		['r58c.gif', 700,0,800],
		['r58c.gif', 1100,0,800],
		['r46a.gif', 900,220,800, {'txt':'philatelical'}],
		['r58b.gif', 900,-20,740, {'txt':'salmagundi'}],
		['r8.gif', -600,0,800, {'txt':'diverticulectomy'}],
		['r67.gif', -750,0,900, {'zx':0.8, 'txt':'cerebrotonic'}],
		['r69.gif', -900,0,750, {'txt':'compersion'}],
		['r69.gif', -300,0,750, {'txt':'epicaricacy'}],
		['r72.gif', -600,0,600],
		['r72.gif', -620,0,580, {'txt':'endomorphy'}],
		['r22.gif', 0,0,600, {'txt':'rhamphorhynchus'}],
		['r24.gif', 0,0,400, {'txt':'verisimilitudinous'}],
		['r62.gif', 0,700,800, {'repeat':[3, 2, -400]}],
		['r60.jpg', 0,900,1000, {'zx':3, 'zy':1, 'repeat':[3, 3, -400]}],
		['r70.gif', 1100,0,600, {'txt':'lollygagger'}],
		['r5.gif', -1200,300,600, {'txt':'homophilian'}],
		['r6.gif', 1200,300,600, {'txt':'bysectamy'}],
		['r54.gif', 0,0,100, {'txt':'iterator'}],
		['r64.gif', 500,300,100],
		['r38.gif', -900,0,350, {'txt':'protease'}],
		['r51.gif', -600,0,400, {'txt':'gallipot'}],
		['r52.gif', -300,0,250, {'txt':'temerarious'}],
		['r50a.gif', -550,0,300, {'txt':'encyclopedia'}],
		['r41.gif', -400,200,1000, {'txt':'paranoid'}],
		['r43.gif', 300,400,1000, {'txt':'emboldened'}],
		['r48.gif', 900,0,300, {'txt':'somnambulist'}],
		['r58b.gif', 900,-20,250, {'txt':'miraculous'}],
		['r63.gif', -1000,0,300, {'txt':'sufficiency'}],
		['r63.gif', 650,0,320, {'txt':'biometric'}],
		['r63.gif', 1000,0,980, {'txt':'baglady'}],
		['Bush2.gif', -300,0,-200, {'repeat':[3, 3, -400]}],
		['Bush2.gif', 300,0,-200, {'repeat':[3, 3, -400]}]
	]);
}
</script>
</head>

<body>

<div id="screen"></div>

</body>
</html>