Further caveats

On October 18, 2009, in demo, by ge1doot Maximize  Maximize Page : PreviousNext

Direct Link

Main Script

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>Further caveats - interactive DHTML</title> 
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> 
<meta http-equiv="Content-type" content="text/html;charset=UTF-8"> 
<meta http-equiv="imagetoolbar" content="no"> 
<style type="text/css"> 
	html { 
		overflow: hidden; 
	} 
	body { 
		position: absolute; 
		margin: 0px; 
		padding: 0px; 
		background: #1c1c1c; 
		width: 100%; 
		height: 100%; 
	} 
	#screen { 
		position: absolute; 
		background: #000; 
		left: 50%; 
		top: 50%; 
		margin-left: -440px; 
		margin-top: -340px; 
		width: 880px; 
		height: 680px; 
		overflow: hidden; 
		visibility: hidden; 
	} 
	#b1 { 
		position: absolute; 
		background: #1c1c1c url(../images/b1.jpg) bottom no-repeat; 
		z-index: 100; 
		outline: #000 solid 12px; 
		border-bottom: #2d2d2d solid 1px; 
	} 
	#b2 { 
		position: absolute; 
		background: #1c1c1c url(../images/b2.jpg) top  no-repeat; 
		z-index: 100; 
		outline: #000 solid 12px; 
		border-top: #2d2d2d solid 1px; 
		color: #898989; 
		font-family: arial, helvetica, sans-serif; 
		font-size: 11px; 
	} 
 
	#b2 a {text-decoration: none;color:#4a4a4a;} 
	#b2 a:hover	{text-decoration: none;color:#4a4a4a;} 
	#b2 a:visited {text-decoration: none;color:#4a4a4a;} 
	#b2 a:visited:hover {text-decoration: none;color:#4a4a4a;} 
	#b3 { 
		position: absolute; 
		background: #000; 
		z-index: 110; 
		border-left: #2d2d2d solid 1px; 
	} 
	#b4 { 
		position: absolute; 
		background: #000; 
		z-index: 110; 
		border-right: #2d2d2d solid 1px; 
	} 
	#screen .divs { 
		position: absolute; 
		left: -9999px; 
		background: #000; 
		overflow: hidden; 
		outline: #000 solid 12px; 
	} 
	#screen img { 
		position: absolute; 
		cursor: pointer; 
		filter: alpha(opacity=100); 
		z-index: 1; 
	} 
	.html { 
		visibility: hidden; 
	} 
	#screen h1 { 
		position: absolute; 
		font-weight: bold; 
		font-size: 1.5em; 
		color: #dfdfdf; 
		font-family: arial, helvetica, sans-serif; 
		margin-left: 40px; 
		margin-top: 18px; 
		z-index: 1; 
	} 
	#screen .title { 
		width: 100%; 
		height: 60px; 
		background: #000 url(../images/fond_carre_titre.png) bottom no-repeat; 
	} 
	#screen .text { 
		margin: 10px; 
		font-size: 0.8em; 
		color: #9f9f9f; 
		font-family: arial, helvetica, sans-serif; 
		text-align: left; 
		margin-top: 10px; 
	} 
	#screen .bul { 
		position: absolute; 
		left: -12px; 
		z-index: 0; 
	} 
	#screen .bkgh { 
		width: 100%; 
		height: 100%; 
		background: #000 url(../images/fond_horizontal.png) bottom no-repeat; 
	} 
	#screen .bkgc { 
		width: 100%; 
		height: 100%; 
		background: #000 url(../images/fond_carre.png) bottom no-repeat; 
	} 
	#screen .bkgv { 
		width: 100%; 
		height: 100%; 
		background: #000 url(../images/fond_vertical.png) bottom no-repeat; 
	} 
	#loader { 
		position: absolute; 
		left: 50%; 
		top: 50%; 
		margin-left: -16px; 
		margin-top: -16px; 
		outline:#000 solid 5px; 
		z-index: 2000; 
		display: none; 
	} 
 
</style> 
 
<!----------- dhteumeuleu tweens mini-engine ------------------> 
<script type="text/javascript" src="library/tweens.js"></script> 
<!-------------------------------------------------------------> 
<script type="text/javascript"> 
// =================================================================== 
// script by Gerard Ferrandez | October 18, 2009 
// Design by Gabriel Uribe    | http://www.gabrieluribe.com/ 
// --------------------------------------------------------------- 
// http://www.dhteumeuleu.com | http://www.twitter.com/ge1doot 
// work licensed under CC-BY-NC - Do not remove this notice 
// --------------------------------------------------------------- 
// tweens engine doc: http://www.dhteumeuleu.com/lab/tweens-doc.html 
// =================================================================== 
 
 
var res = function () { 
	/* ---- private vars ---- */ 
	var imagesPath = "../images/", 
	    scr, dLoad, tre, sto, moving, 
	    compo, prevCompo = "0", 
	    nw = 0, 
	    nh = 0, 
	    wu = 0, 
	    hu = 0, 
	    sc = 0, 
	    ct = []; 
	/* ---- Compositions ---- */ 
	var content = { 
		borderWidth : 12, 
		duration : 600, 
		coord : { 
			C01:[[1,3,[-1,1],,0],[1,4,[1,0],,0],[1,6,[5,1],,0],[1,5,[0,3],,1]], 
			C12:[[1,5,,[0,3],0],[1,3,,[-1,1],1],[1,4,,[0,1],1],[1,6,,[1,1],0],[1,4,,[0,3],1],[2,3,[0,-1],,0],[1,6,,[1,-1],1],[2,6,[1,3],,0],[2,5,[5,1],,0],[2,4,[5,2],,1]], 
			C13:[[1,3,,[0,0],1],[1,4,,[1,0],1],[1,5,,[0,3],0],[1,6,,[0,1],0],[3,3,[5,1],,0],[3,5,[4,0],,1],[3,4,[4,3],,0],[1,6,,[-3,1],1],[3,6,[3,1,0,2],,1]], 
			C23:[[2,5,,[4,-1],1],[2,4,,[4,3],0],[3,3,[5,1],[4,1],0],[2,6,,[1,3],1],[3,6,[1,-1],[1,1],0],[2,3,,[-1,1],1],[3,6,[1,1],[0,1],1],[3,3,[4,1],[3,1],0],[3,5,[4,0],,0],[3,4,[4,3],,0]], 
			C24:[[2,3,,[0,3],0],[2,6,,[2,1,2,2],0],[4,5,[-2,1],,0],[4,3,[-2,2],,0],[2,6,,[2,3,2,2],1],[4,6,[2,-1],,0],[2,5,,[3,1],1],[2,4,,[3,2],1],[4,4,[5,1],,1]], 
			C34:[[3,3,,[3,-1],0],[3,6,,[2,1,2,2],0],[4,3,[0,3],,1],[4,5,[0,0],,0],[3,5,,[5,1],0],[3,4,,[5,2],0],[3,6,,[5,1],0],[4,6,[2,3],,0],[4,4,[5,1],,1]], 
			C35:[[3,3,,[2,1],0],[3,5,,[3,1],0],[3,4,,[3,2],0],[3,6,,[0,-1],1],[5,4,[4,-1],,0],[5,6,[-2,1],,0],[3,5,,[3,0],1],[3,4,,[3,3],0],[3,3,,[3,1],0],[3,3,,[3,-1],1],[5,3,[3,3],,1],[5,5,[2,-1],,1]], 
			C41:[[4,4,,[5,1],0],[4,5,,[0,0],1],[4,3,,[0,3],0],[4,6,,[0,1],0],[1,6,[5,1],[2,1],0],[4,6,,[0,3],0],[1,5,[-2,2],[0,2],0],[1,4,[1,0],[1,1],0],[1,3,[0,0],[0,1],0]], 
			C42:[[4,5,,[-1,1],1],[4,3,,[-1,2],1],[4,6,,[1,1,3,2],0],[4,5,,[-1,0],1],[4,3,,[-1,3],0],[2,3,[-1,1],,0],[4,4,,[4,3],1],[2,5,[4,-1],,1],[4,6,,[1,-1,3,2],1],[2,6,[1,3],,1]], 
			C45:[[4,5,,[0,-1],1],[4,3,,[0,3],0],[5,6,[-2,1],,0],[4,6,,[2,1],1],[5,4,[5,1],,1],[4,6,,[2,1,1,2],1],[4,4,,[3,1],0],[4,6,,[2,-1,1,2],1],[5,5,[2,3],,0],[5,3,[3,1],,1],[4,4,,[3,-1],1]], 
			C51:[[5,4,,[4,3],0],[5,3,,[3,3],0],[5,5,,[2,3],0],[1,6,[5,1],,0],[1,3,[0,3],,1],[1,4,[1,3],,1],[5,6,,[0,-1],0],[1,5,[-2,2],,1]], 
			C52:[[5,4,,[5,1],0],[5,3,,[5,1],0],[5,5,,[0,1],1],[5,6,,[-2,1],0],[5,5,,[0,-1],1],[2,3,[0,3],,0],[2,6,[5,1],,0],[2,5,[5,1],,0],[2,4,[5,2],,0]] 
		}, 
		C1 : { 
			divs : { 
				"3" : { image: "crea_2v.jpg", goto:2, x:0,y:1,w:1,h:1,dx:0,dy:-.5 }, 
				"4" : { image: "crea_3v.jpg", goto:3, x:1,y:1,w:1,h:1,dx:.5,dy:0 }, 
				"5" : { text: "text1", x:0,y:2,w:2,h:1 }, 
				"6" : { image: "crea_1.jpg",x:2,y:1,w:3,h:2,ox:.5,oy:.5 } 
			} 
		}, 
		C2 : { 
			divs : { 
				"3" : { image: "crea_4v.jpg", goto:4, x:0,y:1,w:1,h:2,dx:-.5,dy:0 }, 
				"4" : { image: "crea_3h.jpg", goto:3, x:4,y:2,w:1,h:1,dx:0,dy:.5 }, 
				"5" : { text : "text2", x:4,y:1,w:1,h:1 }, 
				"6" : { image : "crea_2.jpg",x:1,y:1,w:3,h:2,ox:.7,oy:.7 } 
			} 
		}, 
		C3 : { 
			divs : { 
				"3" : { image: "crea_4v.jpg", goto:4, x:3,y:1,w:1,h:2,dx:-.5,dy:0 }, 
				"4" : { image: "crea_5v.jpg", goto:5, x:4,y:2,w:1,h:1,dx:0,dy:-.5 }, 
				"5" : { text : "text3", x:4,y:1,w:1,h:1 }, 
				"6" : { image : "crea_3.jpg", x:0,y:1,w:3,h:2,ox:.2,oy:.8 } 
			} 
		}, 
		C4 : { 
			divs : { 
				"3" : { image: "crea_5h.jpg", goto:5, x:0,y:2,w:2,h:1,dx:0,dy:.5 }, 
				"4" : { image: "crea_1v.jpg", goto:1, x:4,y:1,w:1,h:2,dx:-.5,dy:0 }, 
				"5" : { text : "text4", x:0,y:1,w:2,h:1 }, 
				"6" : { image : "crea_4.jpg", x:2,y:1,w:2,h:2,ox:.2,oy:.5 } 
			} 
		}, 
		C5 : { 
			divs : { 
				"3" : { image: "crea_1v.jpg", goto:1, x:3,y:1,w:1,h:2,dx:-.5,dy:0 }, 
				"4" : { image: "crea_2v.jpg", goto:2, x:4,y:1,w:1,h:2,dx:-.5,dy:0 }, 
				"5" : { text : "text5", x:2,y:1,w:1,h:2 }, 
				"6" : { image : "crea_5.jpg", x:0,y:1,w:2,h:2,ox:.9,oy:.9 } 
			} 
		} 
	}; 
	//////////////////////////////////////////////////////////////////////////// 
	/* ==== init screen position and dimensions ==== */ 
	function resize() { 
		/* --- resize --- */ 
		nw = scr.offsetWidth; 
		nh = scr.offsetHeight; 
		wu = (nw - (6 * content.borderWidth)) / 5; 
		hu = (nh - (5 * content.borderWidth)) / 4; 
	} 
	//////////////////////////////////////////////////////////////////////////// 
	/* ==== decode transition ==== */ 
	var pushTrans = function (c0, c1, p) { 
		var i = p, t; 
		while( t = content.coord["C" + c0 + c1][i++] ) { 
			/* ---- init origin ---- */ 
			if (t[2]) { 
				var d = ct[sc][t[1]]; 
				d.style.zIndex = 40 - i; 
				tweens.add(d, { 
					init: getPixels(t[0], t[1], t[2], 1) 
				}); 
			} else { 
				var d = ct[(sc + 1) % 2][t[1]]; 
				d.style.zIndex = 40 - i; 
			} 
			/* ---- target ---- */ 
			tweens.add(d, { 
				duration: content.duration, 
				target : getPixels(t[0], t[1], t[3]), 
				onFinish : nextTrans, 
				params : [c0, c1 ,i, d, t[4], t[5]] 
			}); 
			if (!t[4]) break; 
		} 
	} 
	/* ==== next tweens serie ==== */ 
	var nextTrans = function (t) { 
		if (!t[4]) pushTrans(t[0], t[1], t[2]); 
		if (t[2] == content.coord["C" + t[0] + t[1]].length) moving = false; 
	} 
	/* ==== coordinates ==== */ 
	var getPixels = function (c, n, div) { 
		var b = content.borderWidth; 
		/* ---- default size ---- */ 
		if (c) { 
			var c = content["C" + c].divs[n]; 
			if (!div) div = [c.x, c.y, c.w, c.h]; 
			else if (div.length == 2) { 
				div[2] = c.w; 
				div[3] = c.h; 
			} 
		} 
		/* ---- return css ---- */ 
		return { 
			left: div[0] * wu + (b + div[0] * b), 
			top: div[1] * hu + (b + div[1] * b), 
			width: Math.max(0, (div[2] * wu) + (-b + div[2] * b)), 
			height: Math.max(0, (div[3] * hu) +(-b + div[3] * b)) 
		}; 
	} 
	/* ==== start transitions ==== */ 
	var compoIn = function (compo) { 
		if (tweens.running) { 
			if (sto) clearTimeout(sto); 
			sto = setTimeout(function() { compoIn(compo); }, 128); 
			return; 
		} 
		sto = false; 
		tre = false; 
		moving = true; 
		/* ---- display loader ---- */ 
		dLoad = setTimeout(function () { 
			document.getElementById('loader').style.display = "block"; 
		}, 150); 
		/* ---- swap containers ---- */ 
		sc = (sc + 1) % 2; 
		var c = content["C" + compo]; 
		/* ---- reset compo ---- */ 
		c.nbi = c.nbl = 0; 
		for (var k in c.divs) { 
			ct[sc][k].innerHTML = ""; 
			for (var i in c.divs[k]) if (i == "image") c.nbi++; 
		} 
		/* ---- for each containers ---- */ 
		for (var k in c.divs) { 
			var d = c.divs[k]; 
			for (var i in d) { 
				if (i == "image") { 
					/* ---- preload image ---- */ 
					d.img = document.createElement('img'); 
					d.img.compo = c; 
					d.img.c = compo; 
					d.img.d = d; 
					d.img.onload = function () { 
						this.compo.nbl++; 
						/* ---- all images loaded ---- */ 
						if (this.compo.nbi == this.compo.nbl) { 
							clearTimeout(dLoad); 
							document.getElementById('loader').style.display = "none"; 
							/* ---- for each container ---- */ 
							for (var k in c.divs) { 
								var o = ct[sc][k]; 
								o.style.left = '-9999px'; 
								var d = c.divs[k]; 
								/* ---- for each attribute ---- */ 
								for (var i in d) { 
									if (i == "goto") { 
										d.img.goto = d[i]; 
										/* ---- onclick ---- */ 
										d.img.onclick = function () { compoIn(this.goto); } 
									} else if (i == "image") { 
										/* ---- image loaded - update DOM ---- */ 
										o.appendChild(d.img); 
										/* ---- center image ---- */ 
										var x = d.xy(false); 
										tweens.add(d.img, { 
											init: { left: x[0], top:  x[1] } 
										}); 
									} else if (i == "text") { 
										/* ---- HTML text ---- */ 
										if (document.getElementById(d[i])) 
											o.innerHTML = document.getElementById(d[i]).innerHTML; 
									} 
								} 
							} 
							/* ---- start transition ---- */ 
							pushTrans(prevCompo, compo, 0); 
							prevCompo = compo; 
						} 
					}; 
					/* ---- roll over ---- */ 
					d.xy = function (s) { 
						return [ 
							(!this.dx) ? (((this.w * wu + (this.w - 1) * content.borderWidth) - this.img.width)  * (this.ox || .5)) : (s ? ((this.dx > 0) ? 0 : wu * this.dx) : ((this.dx > 0) ? -wu * this.dx : 0)), 
							(!this.dy) ? (((this.h * hu + (this.h - 1) * content.borderWidth) - this.img.height) * (this.oy || .5)) : (s ? ((this.dy > 0) ? 0 : hu * this.dy) : ((this.dy > 0) ? -hu * this.dy : 0)) 
						]; 
					} 
					if (k != "6"){ 
						d.img.imgOver = function (x, y) { 
							tweens.kill(this.overTween); 
							this.overTween = tweens.add(this, { 
								duration: 300, target : {left : x, top: y} 
							}); 
						}; 
						d.img.onmousemove = function() { 
							if (!this.over && !moving) { 
								var x = this.d.xy(true); 
								this.imgOver(x[0], x[1]); 
								this.over = true; 
							} 
						}; 
						d.img.onmouseout  = function() { 
							if (this.over && !moving) { 
								var x = this.d.xy(false); 
								this.imgOver(x[0], x[1]); 
								this.over = false; 
							} 
						}; 
					} else { 
						/* ---- zoom ---- */ 
						d.img.onclick = function() { zoomIn(this); }; 
					} 
					/* ---- source ---- */ 
					d.img.src = imagesPath + d[i]; 
					d.n = k; 
				} 
			} 
		} 
	} 
	/* ==== zoom in main image ==== */ 
	var zoomIn = function (img) { 
		if (moving) return; 
		if (tweens.running) { 
			if (sto) clearTimeout(sto); 
			sto = setTimeout(function() { zoomIn(img); }, 128); 
			return; 
		} 
		sto = false; 
		ct[sc][6].style.zIndex = 50; 
		img.onclick = function() { zoomOut(img); }; 
		tweens.add(ct[sc][6], { 
			duration: 1000, 
			target: { 
				left: content.borderWidth, 
				top:  content.borderWidth, 
				width:  nw - content.borderWidth * 2, 
				height: nh - content.borderWidth * 2 
			}, 
			onFinish : function () { 
				tweens.add(['b1','b2'], { 
					duration: 1000, target: { height: 0 } 
				}); 
				tweens.add(['b3','b4'], { 
					duration: 1000, target: { height: nh - 2, top: 1 } 
				}); 
			} 
		}); 
		tweens.add(img, { 
			duration: 1000, 
			target: { 
				left: ((nw - content.borderWidth * 2) - img.width)  * .5, 
				top:  ((nh - content.borderWidth * 2) - img.height) * .5 
			} 
		}); 
	} 
	/* ==== zoom out main image ==== */ 
	var zoomOut = function (img) { 
		if (tweens.running) { 
			if (sto) clearTimeout(sto); 
			sto = setTimeout(function() { zoomOut(img); }, 128); 
			return; 
		} 
		var d = img.d; 
		img.onclick = function() { zoomIn(img); }; 
		sto = false; 
		tweens.add(['b3','b4'], { 
			duration: 1000, 
			target: { height: hu * 2 + content.borderWidth * 3 - 2, top: hu + content.borderWidth + 1 } 
		}); 
		tweens.add(['b1','b2'], { 
			duration: 1000, 
			target: { height: hu + content.borderWidth }, 
			onFinish : function () { 
				tweens.add(ct[sc][6], { 
					duration: 1000, target: getPixels(img.c, "6", [d.x, d.y, d.w, d.h]) 
				}); 
				tweens.add(d.img, { 
					duration: 1000, 
					target: { 
						left: ((d.w * wu) - d.img.width) * (d.ox || .5), 
						top: ((d.h * hu) - d.img.height) * (d.oy || .5) 
					} 
				}); 
			} 
		}); 
	} 
	/* ==== intro ==== */ 
	var intro = function() { 
		scr.style.visibility = "visible"; 
		tweens.add('b1', { init: { 
			width: nw, height: 2 * hu + 2 * content.borderWidth, top: 0, left: 0 } 
		}); 
		tweens.add('b2', { init: { 
			width: nw, height: 2 * hu + 2 * content.borderWidth, bottom: 0, left: 0 } 
		}); 
		tweens.add('b3', { init: { 
			width: content.borderWidth, height: content.borderWidth-2, top: 2 * hu + 2 * content.borderWidth + 1, left: 0 } 
		}); 
		tweens.add('b4', { init: { 
			width: content.borderWidth, height: content.borderWidth-2, top: 2 * hu + 2 * content.borderWidth + 1, right: 0 } 
		}); 
		tweens.add(['b1','b2'], { 
			duration: 1000, 
			target: { height: hu + content.borderWidth } 
		}); 
		tweens.add(['b3','b4'], { 
			duration: 1000, 
			target: { height: hu * 2 + content.borderWidth * 3 - 2, top:hu + content.borderWidth + 1 }, 
			onFinish: compoIn, 
			params : 1 
		}); 
	} 
	/* ==== init script ==== */ 
	var init = function () { 
			scr = document.getElementById('screen'); 
			for (var i = 0; i <= 1; i++) { 
				ct[i] = []; 
				for (var j = 3; j < 7; j++) { 
					var o = ct[i][j] = document.createElement('div'); 
					o.className = "divs"; 
					scr.appendChild(o); 
				} 
			} 
			resize(); 
			setTimeout(function() { 
				intro(); 
			}, 100); 
		} 
	return { 
		/* ==== public ==== */ 
		init : init, 
		goto : function (compo) { compoIn(compo); } 
	} 
}(); 
 
/* ==== start script ==== */ 
onload = function() { 
	res.init(); 
} 
 
</script> 
</head> 
 
<body> 
 
<div id="screen"> 
	<div id="b1"></div><div id="b2"><span>Home: <a target="_blank" href="http://www.dhteumeuleu.com/">www.dhteumeuleu.com</a></span><span style="position:absolute;right:1em;">Design: <a target="_blank" href="http://www.gabrieluribe.com/">Gabriel Uribe.com</a></span></div> 
	<div id="b3"></div><div id="b4"></div> 
</div> 
<img id="loader" src="../images/ajax-loader-3.gif" alt=""> 
 
<div class="html"> 
	<div id="text1"> 
		<div class="bkgh"> 
			<div class="title"><img class="bul" src="../images/bul.png" alt="" onclick="res.goto(2);"><h1>Low dispersion</h1></div> 
			<div class="text">The newest beam splitter allowed us to derive a very low surface dispersion plasma from the radiation.</div> 
		</div> 
	</div> 
	<div id="text2"> 
		<div class="bkgc"> 
			<div class="title"><img class="bul" src="../images/bul.png" alt="" onclick="res.goto(3);"><h1>The macro</h1></div> 
			<div class="text">Quantum teleportation of macro units was out of order at this time.</div> 
		</div> 
	</div> 
	<div id="text3"> 
		<div class="bkgc"> 
			<div class="title"><img class="bul" src="../images/bul.png" alt="" onclick="res.goto(4);"><h1>Random</h1></div> 
			<div class="text">A restriction imposed by random numbers led us to achieve a reproduction of the disappeared bases.</div> 
		</div> 
	</div> 
	<div id="text4"> 
		<div class="bkgh"> 
			<div class="title"><img class="bul" src="../images/bul.png" alt="" onclick="res.goto(5);"><h1>Incertitude</h1></div> 
			<div class="text">Now, even determining the scalars elementary couplings would still not improve the existing standard.</div> 
		</div> 
	</div> 
	<div id="text5"> 
		<div class="bkgv"> 
			<div class="title"><img class="bul" src="../images/bul.png" alt="" onclick="res.goto(1);"><h1>Masses</h1></div> 
			<div class="text">One pattern of dynamical constraints on the masses at the prototype surface significantly diminished the deformation of the angular distribution of positrons.</div> 
		</div> 
	</div> 
</div> 
 
</body> 
</html>

Tagged with:
 
16 Comments
Digg Delicious StumbleUpon Digg

Feed updates subscription

Enter your email address:

Delivered by FeedBurner

Donate

Want to give me some extra encouragement ?

License

Creative Commons License

Except where otherwise noted, all Javascript code on this site is licensed under a Creative Commons License.