the holon

On April 13, 2005, in demo, by ge1doot Maximize  Maximize Page : PreviousNext


Direct Link

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>the holon - Interactive DHTML art-demos</title> 
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> 
<style type="text/css"> 
	html { 
		overflow: hidden; 
	} 
	body { 
		margin: 0px; 
		padding: 0px; 
		background: #eee; 
		position: absolute; 
		width: 100%; 
		height: 100%; 
		filter: alpha(opacity=100); 
	} 
	#screen { 
		position:absolute; 
		left: 50%; 
		top: 50%; 
		width: 800px; 
		height: 400px; 
	} 
	#screen .menuSpan { 
		position:absolute; 
		background:#FFF; 
		overflow:hidden; 
	} 
	#screen .labSpan { 
		position:absolute; 
		color:#fff; 
		font-family:tahoma; 
		margin:2%; 
	} 
	#screen .textSpan { 
		position:absolute; 
		color:#666; 
		font-family:tahoma; 
		font-size:.8em; 
		background:#FFF; 
		text-align:center; 
		overflow:hidden; 
	} 
	#screen .textPath { 
		position:absolute; 
		color:#333; 
		font-family:tahoma; 
		font-size:.8em; 
		text-align:center; 
	} 
	#screen .img { 
		position:relative; 
		width:100%; 
		height:100%; 
		z-index:0; 
	} 
</style> 
 
<script type="text/javascript"> 
 
// ============================================================ 
//      ========== Hierarchical SPAN Menu ============= 
// SCRIPT by Gerard Ferrandez - Ge-1-doot - APRIL 2005 
// http://www.dhteumeuleu.com 
// updated: February 2010 - namespaced 
// ============================================================ 
 
var menu = function () { 
	/* ---- private vars ---- */ 
	var m, scr, menuSpan, textSpan, textPath, W, H, nx, ny; 
	var textZoom = 5; 
	var dxm = [2,1,2,1,0,0,-1]; 
	var dym = [2,2,1,1,2,1,-1]; 
	var cancelBub = false; 
	var zB = 0; 
	var xB = -.5; 
	var yB = -.5; 
	var zP = 0; 
	var xP = 0; 
	var yP = 0; 
 
	// ===== resize window ==== 
	var resize = function () { 
		nx = scr.offsetWidth; 
		ny = scr.offsetHeight; 
		W  = Math.round(nx); 
		H  = Math.round(ny); 
		if (H > W) H = W; 
		if (W > H) W = H; 
		var css = textSpan.style; 
		css.width    = Math.round(W)+"px"; 
		css.height   = Math.round(H)+"px"; 
		css.left     = Math.round(0)+"px"; 
		css.top      = Math.round(-H/2)+"px"; 
		css.fontSize = W/24+"px"; 
		css = menuSpan.style; 
		css.width    = Math.round(W)+"px"; 
		css.height   = Math.round(H)+"px"; 
		css.left     = Math.round(-W)+"px"; 
		css.top      = Math.round(-H/2)+"px"; 
		css = textPath.style; 
		css.width    = Math.round(W*2)+"px"; 
		css.height   = Math.round(18)+"px"; 
		css.left     = Math.round(-W)+"px"; 
		css.top      = Math.round(H/2)+"px"; 
		css.fontSize = W / 24 + "px"; 
		animHTML(m, -W * xB, -H * yB, W * 3 * zB, H * 3 * zB); 
		var i = 0, p; 
		while (p = m.m[i++]) 
			animateChildren(p, W * zB, H * zB); 
	} 
 
	// ===== reset this.spa ===== 
	var resetSpa = function (o) { 
		if (o.spa) { 
			o.spa = ""; 
			var i = 0, p; 
			while (p = o.m[i++]) 
				resetSpa(p); 
		} 
	} 
 
	// ===== insert HTML elements ===== 
	var createHTML = function (o) { 
		o.spa                  = document.createElement("span"); 
		o.spa.style.position   = "absolute"; 
		o.spa.style.background = o.bkg; 
		o.spa.style.cursor     = o.parent == "" ? "default" : "pointer"; 
		o.spa.onmousedown      = new Function("return false"); 
		o.spa.onselectstart    = new Function("return false"); 
		o.lab                  = document.createElement("span"); 
		o.lab.className        = "labSpan"; 
		o.lab.innerHTML        = o.label; 
		var parentSPAN         = o.parent == "" ? menuSpan : o.parent.spa; 
		o.spa.obj              = o; 
		o.spa.onclick          = o.click; 
		o.spa.appendChild(o.lab); 
		parentSPAN.appendChild(o.spa); 
	} 
 
	var animHTML = function (o, x, y, w, h) { 
		// ==== create HTML tags 
		if (!o.spa) createHTML(o); 
		// ==== SPAN position & size 
		if(w < 3 * W){ 
			// ==== span size 
			o.spa.style.width  = Math.floor(w) + "px"; 
			o.spa.style.height = Math.floor(h) + "px"; 
			// ==== font size 
			var fs = w / textZoom; 
			if(fs > 4 && fs < 128){ 
				o.lab.style.visibility = "visible"; 
				o.lab.style.fontSize   = Math.round(fs) + "px"; 
			} else 
				o.lab.style.visibility = "hidden"; 
		} 
		// ==== span position 
		x += o.oX; 
		if(x < -W) { 
			var i = 0, p; 
			while (p = o.m[i++]) 
				p.oX = x + W; 
			x = -W; 
		} else { 
			var i = 0, p; 
			while (p = o.m[i++]) 
				p.oX = 0; 
		} 
		y += o.oY; 
		if(y < -W) { 
			var i = 0, p; 
			while (p = o.m[i++]) 
				p.oY = y + W; 
			y=-W; 
		} else { 
			var i = 0, p; 
			while (p = o.m[i++]) 
				p.oY = 0; 
		} 
		o.spa.style.left = Math.round(x) + "px"; 
		o.spa.style.top  = Math.round(y) + "px"; 
	} 
 
 
	// ==== recursive call 
	var animateChildren = function (o, w, h) { 
		if (w < W/28 || (-W * xB) + (o.px * W * zB) > W - 2 || 
		   (-W * xB) + (o.px * W * zB) + w < W / 6 || (-H * yB) + (o.py * H * zB) > H - 2 || 
		   (-H * yB) + (o.py * H * zB) + h < H / 6) { 
			// ===== remove invisible spans 
			if (o.spa){ 
				o.parent.spa.removeChild(o.spa); 
				resetSpa(o); 
			} 
		} else { 
			// ===== anim visible objects 
			animHTML(o, o.dx * w, o.dy * h, w, h); 
			var i = 0, p; 
			while (p = o.m[i++]) 
				animateChildren(p, w/3, h/3); 
		} 
	} 
 
	var doZoom = function (x, y, z) { 
		// ==== increment 
		zB += zP; 
		xB += xP; 
		yB += yP; 
		// ==== end zoom 
		if(Math.round(z * 1000) === Math.round(zB * 1000)){ 
			zB = z; 
			yB = y; 
			xB = x; 
			cancelBub = false; 
		} 
		// ==== loop 
		else setTimeout(function() { 
			doZoom(x, y, z); 
		}, 16); 
		// ==== animHTML 
		animHTML(m, -W*xB, -H*yB, W*3*zB, H*3*zB); 
		var i = 0, p; 
		while (p = m.m[i++]) 
			animateChildren(p, W * zB, H * zB); 
	} 
 
	// ===== create menu element ===== 
	var createMenu = function (label, bkg, parent, hlink) { 
		// ==== attributes 
		this.dx      = parent == "" ? 0 : dxm[parent.m.length]; 
		this.dy      = parent == "" ? 0 : dym[parent.m.length]; 
		this.px      = 0; 
		this.py      = 0; 
		this.lev     = 0; 
		this.parent  = parent; 
		this.m       = new Array(); 
		this.label   = label; 
		this.hlink   = hlink; 
		this.path    = ""; 
		this.zoomed  = false; 
		this.spa     = ""; 
		this.lab     = ""; 
		this.spa.obj = ""; 
		this.bkg     = bkg; 
		this.oX      = 0; 
		this.oY      = 0; 
	} 
 
	// ===== create nodes - calculate position ==== 
	createMenu.prototype.createNode = function(c, b, h) { 
		var newItem = this.m[this.m.length] = new createMenu(c, b, this, h); 
		newItem.lev = this.lev + 1; 
		p = newItem; 
		do { 
			n = Math.pow(3, p.lev - 1); 
			newItem.px += p.dx / n; 
			newItem.py += p.dy / n; 
			newItem.path = p.label.replace(/ /,"") + "." + newItem.path; 
			p = p.parent; 
		} 
		while(p != ""); 
		return newItem; 
	} 
 
	// ===== node onclick event ===== 
	createMenu.prototype.click = function() { 
		if(!cancelBub){ 
			if(this.obj.zoomed && this.obj.lev > 0){ 
				// ===== zoom out 
				this.obj.zoomed = false; 
				this.obj.parent.zoomed = false; 
				this.obj.parent.spa.onclick(); 
			} else { 
				// ===== zoom in 
				cancelBub = true; 
				this.obj.zoomed = true; 
				// ===== insert right panel HTML, display path 
				if(document.getElementById(this.obj.label) != null){ 
					textSpan.innerHTML = "<div style='margin:5px'>" + 
					                     document.getElementById(this.obj.label).innerHTML + 
										 "</div>"; 
				} else 
					textSpan.innerHTML = document.getElementById("default").innerHTML; 
				textPath.innerHTML = this.obj.path; 
				// ===== run zoom 
				z  = Math.pow(3, this.obj.lev - 1); 
				zP = (z - zB) / 20; 
				xP = ((z * this.obj.px) - xB) / 20; 
				yP = ((z * this.obj.py) - yB) / 20; 
				doZoom(z * this.obj.px, z * this.obj.py, z); 
				if(this.obj.hlink){ 
					// ==== open hyperlink window 
					window.open(this.obj.hlink, "_blank"); 
				} 
			} 
		} 
		return false; 
	} 
 
	//////////////////////////////////////////////////////////////////////////// 
	var init = function () { 
 
		onresize = resize; 
		scr      = document.getElementById("screen"); 
		menuSpan = document.getElementById("menu"); 
		textSpan = document.getElementById("text"); 
		textPath = document.getElementById("path"); 
 
		// ===== create menu ====== 
		m = new createMenu("this","#CC5200",""); 
 
		m.createNode("is","#CC9600"); 
		m.m[0].createNode("why","#805E00"); 
		m.m[0].m[0].createNode("scientists","#805E00"); 
		m.m[0].m[0].m[0].createNode("have","#CC9600"); 
		m.m[0].m[0].m[0].createNode("can","#7F3300"); 
		m.m[0].m[0].m[0].m[1].createNode("never","#805E00"); 
		m.m[0].m[0].m[0].m[1].createNode("believe","#CC9600"); 
 
		m.m[0].m[0].createNode("code","#CC9600"); 
		m.m[0].m[0].m[1].createNode("reuse","#805E00"); 
		m.m[0].m[0].m[1].createNode("enforcement","#CC5200"); 
 
		m.m[0].m[0].createNode("I ","#7F3300"); 
		m.m[0].m[0].m[2].createNode("had","#CC9600"); 
		m.m[0].m[0].m[2].m[0].createNode("planned","#805E00"); 
		m.m[0].m[0].m[2].m[0].createNode("to","#CC5200"); 
		m.m[0].m[0].m[2].m[0].m[1].createNode("put","#7F3300"); 
		m.m[0].m[0].m[2].m[0].m[1].createNode("do","#805E00"); 
		m.m[0].m[0].m[2].m[0].m[1].createNode("create","#CC9600"); 
		m.m[0].m[0].m[2].m[0].createNode("decided","#7F3300"); 
		m.m[0].m[0].m[2].m[0].m[2].createNode("to.join","#CC5200"); 
		m.m[0].m[0].m[2].m[0].m[2].createNode("to.fight","#CC9600"); 
 
		m.m[0].m[0].m[2].createNode("detest","#CC5200"); 
		m.m[0].m[0].m[2].createNode("love","#805E00"); 
 
		m.m[0].createNode("your","#CC5200"); 
		m.m[0].m[1].createNode("brain","#7F3300"); 
		m.m[0].m[1].m[0].createNode("after","#CC9600"); 
		m.m[0].m[1].m[0].createNode("on","#805E00"); 
 
		m.m[0].m[1].createNode("home","#805E00","http://www.dhteumeuleu.com/"); 
 
		m.m[0].createNode("a","#7F3300"); 
		m.m[0].m[2].createNode("complex","#CC9600"); 
		m.m[0].m[2].m[0].createNode("case","#7F3300"); 
		m.m[0].m[2].m[0].m[0].createNode("with","#CC5200"); 
		m.m[0].m[2].m[0].m[0].createNode("where","#805E00"); 
 
		m.m[0].m[2].createNode("cool","#CC5200"); 
		m.m[0].m[2].m[1].createNode("idea!","#805E00"); 
		m.m[0].m[2].m[1].createNode("DHTML","#CC9600"); 
 
		m.m[0].m[2].createNode("cry ","#805E00"); 
		m.m[0].m[2].m[2].createNode("for ","#CC5200"); 
		m.m[0].m[2].m[2].createNode("and","#7F3300"); 
 
		m.createNode("will","#8456BF"); 
		m.m[1].createNode("shut","#4E3372"); 
		m.m[1].m[0].createNode("down ","#BFBFBF"); 
		m.m[1].m[0].m[0].createNode("the","#737373"); 
		m.m[1].m[0].m[0].createNode("your ","#4E3372"); 
		m.m[1].m[0].m[0].createNode("any","#8456BF"); 
 
		m.m[1].m[0].createNode("the ","#737373"); 
		m.m[1].m[0].m[1].createNode("Firefox","#4E3372"); 
		m.m[1].m[0].m[1].createNode("gate","#BFBFBF"); 
		m.m[1].m[0].m[1].createNode("program","#8456BF"); 
 
		m.m[1].createNode("make","#737373"); 
		m.m[1].m[1].createNode("you","#BFBFBF"); 
		m.m[1].m[1].m[0].createNode("think","#4E3372"); 
		m.m[1].m[1].m[0].m[0].createNode("in","#8456BF"); 
		m.m[1].m[1].m[0].m[0].createNode("that","#BFBFBF"); 
		m.m[1].m[1].m[0].m[0].createNode("before","#BFBFBF"); 
		m.m[1].m[1].m[0].m[0].createNode("twice","#737373"); 
		m.m[1].m[1].m[0].m[0].m[3].createNode("about","#8456BF"); 
		m.m[1].m[1].m[0].m[0].m[3].createNode("next","#4E3372"); 
		m.m[1].m[1].m[0].m[0].m[3].createNode("before","#4E3372"); 
 
		m.m[1].m[1].m[0].createNode("cry","#8456BF"); 
		m.m[1].m[1].m[0].createNode("feel","#737373"); 
 
		m.m[1].m[1].createNode("everyone","#4E3372"); 
		m.m[1].m[1].m[1].createNode("smile","#8456BF"); 
		m.m[1].m[1].m[1].createNode("think.of","#BFBFBF"); 
 
		m.m[1].createNode("blow","#BFBFBF"); 
		m.m[1].m[2].createNode("your","#737373"); 
		m.m[1].m[2].m[0].createNode("mind","#8456BF"); 
 
		m.m[1].m[2].createNode("you","#8456BF"); 
		m.m[1].m[2].m[1].createNode("down","#BFBFBF"); 
		m.m[1].m[2].m[1].createNode("away","#737373"); 
 
		m.createNode("was ","#859E68"); 
		m.m[2].createNode("not","#524C36"); 
		m.m[2].m[0].createNode("the ","#455236"); 
		m.m[2].m[0].m[0].createNode("apology","#859E68"); 
		m.m[2].m[0].m[0].createNode("first","#524C36"); 
		m.m[2].m[0].m[0].createNode("correct","#9E9368"); 
 
		m.m[2].m[0].createNode("an","#859E68"); 
		m.m[2].m[0].m[1].createNode("intelligent","#524C36"); 
		m.m[2].m[0].m[1].createNode("error","#9E9368"); 
 
		m.m[2].m[0].createNode("something","#9E9368"); 
		m.m[2].m[0].m[2].createNode("for","#524C36"); 
		m.m[2].m[0].m[2].m[0].createNode("which","#455236"); 
		m.m[2].m[0].m[2].m[0].m[0].createNode("she","#859E68"); 
		m.m[2].m[0].m[2].m[0].m[0].createNode("I","#524C36"); 
 
		m.m[2].m[0].m[2].m[0].createNode("her","#859E68"); 
		m.m[2].m[0].m[2].m[0].createNode("me","#9E9368"); 
 
		m.m[2].m[0].m[2].createNode("that","#859E68"); 
		m.m[2].m[0].m[2].m[1].createNode("had ","#455236"); 
		m.m[2].m[0].m[2].m[1].createNode("could","#524C36"); 
 
		m.m[2].m[0].m[2].createNode("I ","#455236"); 
		m.m[2].m[0].m[2].m[2].createNode("could ","#859E68"); 
		m.m[2].m[0].m[2].m[2].m[0].createNode("really","#455236"); 
		m.m[2].m[0].m[2].m[2].createNode("was","#9E9368"); 
		m.m[2].m[0].m[2].m[2].m[0].createNode("worried","#9E9368"); 
		m.m[2].m[0].m[2].m[2].createNode("liked","#524C36"); 
 
		m.m[2].createNode("going","#455236"); 
		m.m[2].m[1].createNode("to","#859E68"); 
		m.m[2].m[1].m[0].createNode("happen","#455236"); 
		m.m[2].m[1].m[0].createNode("take","#524C36"); 
		m.m[2].m[1].m[0].m[1].createNode("more","#9E9368"); 
		m.m[2].m[1].m[0].m[1].createNode("some","#455236"); 
		m.m[2].m[1].m[0].m[1].createNode("longer","#859E68"); 
 
		m.m[2].m[1].createNode("so","#9E9368"); 
		m.m[2].m[1].m[1].createNode("much","#524C36"); 
		m.m[2].m[1].m[1].createNode("well","#455236"); 
 
		// ===== 
		resize(); 
		m.spa.onclick(); 
	} 
	//////////////////////////////////////////////////////////////////////////// 
	return { 
		init : init 
	} 
}(); 
 
</script> 
</head> 
 
<body> 
 
 
<span id="screen"> 
	<span id="menu" class="menuSpan"></span> 
	<span id="text" class="textSpan"></span> 
	<span id="path" class="textPath"></span> 
</span> 
 
<!-- ==== HTML NODES CONTENT ==== --> 
<div style="visibility:hidden"> 
	<div id="default"> 
	<img src="../images/hand3.jpg" class="img"> 
	</div> 
	<div id="reuse"> 
	is.so.hard. 
	<img src="../images/head6.jpg" class="img"> 
	</div> 
	<div id="enforcement"> 
	efforts.have.been.weak. 
	<img src="../images/head5.jpg" class="img"> 
	</div> 
	<div id="have"> 
	been.working.on.it. 
	<img src="../images/head3.jpg" class="img"> 
	</div> 
	<div id="never"> 
	be.certain. 
	<img src="../images/head4.jpg" class="img"> 
	</div> 
	<div id="believe"> 
	in.God. 
	<img src="../images/head8.jpg" class="img"> 
	</div> 
	<div id="detest"> 
	menus. 
	<img src="../images/head4.jpg" class="img"> 
	</div> 
	<div id="love"> 
	DHTML. 
	<img src="../images/head3.jpg" class="img"> 
	</div> 
	<div id="after"> 
	a.few.hours.on.JavaScript. 
	<img src="../images/head5.jpg" class="img"> 
	</div> 
	<div id="on"> 
	booze. 
	<img src="../images/head7.jpg" class="img"> 
	</div> 
	<div id="home"> 
	base. 
	<img src="../images/head1.jpg" class="img"> 
	</div> 
	<div id="with"> 
	serious.issues. 
	<img src="../images/head8.jpg" class="img"> 
	</div> 
	<div id="where"> 
	significant.doubts.have.been.raised. 
	<img src="../images/head4.jpg" class="img"> 
	</div> 
	<div id="idea!"> 
	<img src="../images/head5.jpg" class="img"> 
	</div> 
	<div id="DHTML"> 
	site. 
	<img src="../images/head7.jpg" class="img"> 
	</div> 
	<div id="for "> 
	help! 
	<img src="../images/head1.jpg" class="img"> 
	</div> 
	<div id="and"> 
	we.are.unable.to.transcribe.it.precisely.phonetically. 
	<img src="../images/head3.jpg" class="img"> 
	</div> 
	<div id="apology"> 
	she.promised.to.give 
	<img src="../images/head6.jpg" class="img"> 
	</div> 
	<div id="first"> 
	time.it.had.been.done. 
	<img src="../images/head5.jpg" class="img"> 
	</div> 
	<div id="correct"> 
	answer. 
	<img src="../images/head7.jpg" class="img"> 
	</div> 
	<div id="intelligent"> 
	decision. 
	<img src="../images/head1.jpg" class="img"> 
	</div> 
	<div id="error"> 
	by.the.translators. 
	<img src="../images/head3.jpg" class="img"> 
	</div> 
	<div id="happen"> 
	<img src="../images/head4.jpg" class="img"> 
	</div> 
	<div id="much"> 
	further. 
	<img src="../images/head8.jpg" class="img"> 
	</div> 
	<div id="well"> 
	until.a.few.minutes.ago. 
	<img src="../images/head7.jpg" class="img"> 
	</div> 
	<div id="the"> 
	signal.coming.from.your.real.senses. 
	<img src="../images/head1.jpg" class="img"> 
	</div> 
	<div id="your "> 
	system.in.five.minutes. 
	<img src="../images/head3.jpg" class="img"> 
	</div> 
	<div id="any"> 
	active.connection. 
	<img src="../images/head4.jpg" class="img"> 
	</div> 
	<div id="Firefox"> 
	users.up.once.and.for.all. 
	<img src="../images/head5.jpg" class="img"> 
	</div> 
	<div id="gate"> 
	leading.to.the.previous.stage and.open.a.gate.to.the.next. 
	<img src="../images/head7.jpg" class="img"> 
	</div> 
	<div id="cry"> 
	<img src="../images/head3.jpg" class="img"> 
	</div> 
	<div id="feel"> 
	like.a.respectable.man. 
	<img src="../images/head4.jpg" class="img"> 
	</div> 
	<div id="think.of"> 
	you.as.a.pro. 
	<img src="../images/head6.jpg" class="img"> 
	</div> 
	<div id="smile"> 
	<img src="../images/head7.jpg" class="img"> 
	</div> 
	<div id="program"> 
	down.and.return.you.to.the.desktop.screen. 
	<img src="../images/head1.jpg" class="img"> 
	</div> 
	<div id="mind"> 
	and.wake.you.up. 
	<img src="../images/head3.jpg" class="img"> 
	</div> 
	<div id="away"> 
	<img src="../images/head4.jpg" class="img"> 
	</div> 
	<div id="down"> 
	into.the.next.section. 
	<img src="../images/head5.jpg" class="img"> 
	</div> 
	<div id="her"> 
	<img src="../images/head8.jpg" class="img"> 
	</div> 
	<div id="me"> 
	to.do. 
	<img src="../images/head1.jpg" class="img"> 
	</div> 
	<div id="she"> 
	had.waited.for.years. 
	<img src="../images/head3.jpg" class="img"> 
	</div> 
	<div id="I"> 
	had.to.know.the.answer. 
	<img src="../images/head4.jpg" class="img"> 
	</div> 
	<div id="had "> 
	to.happen. 
	<img src="../images/head5.jpg" class="img"> 
	</div> 
	<div id="could"> 
	have.been.avoided. 
	<img src="../images/head7.jpg" class="img"> 
	</div> 
	<div id="really"> 
	think.about. 
	<img src="../images/head6.jpg" class="img"> 
	</div> 
	<div id="worried"> 
	about. 
	<img src="../images/head3.jpg" class="img"> 
	</div> 
	<div id="liked"> 
	to.do. 
	<img src="../images/head4.jpg" class="img"> 
	</div> 
	<div id="more"> 
	work. 
	<img src="../images/head8.jpg" class="img"> 
	</div> 
	<div id="some"> 
	time. 
	<img src="../images/head7.jpg" class="img"> 
	</div> 
	<div id="longer"> 
	than.I.had.expected. 
	<img src="../images/head1.jpg" class="img"> 
	</div> 
	<div id="was"> 
	requested.to.do. 
	<img src="../images/head6.jpg" class="img"> 
	</div> 
	<div id="to.join"> 
	this.winning.team. 
	<img src="../images/head1.jpg" class="img"> 
	</div> 
	<div id="to.fight"> 
	for.revolutionary.change. 
	<img src="../images/head3.jpg" class="img"> 
	</div> 
	<div id="planned"> 
	to.leave. 
	<img src="../images/head4.jpg" class="img"> 
	</div> 
	<div id="put"> 
	together.the.pieces.of.her.adventure. 
	<img src="../images/head8.jpg" class="img"> 
	</div> 
	<div id="do"> 
	this.menu. 
	<img src="../images/head7.jpg" class="img"> 
	</div> 
	<div id="create"> 
	this.web.site. 
	<img src="../images/head1.jpg" class="img"> 
	</div> 
	<div id="before"> 
	you.act. 
	<img src="../images/head8.jpg" class="img"> 
	</div> 
	<div id="where "> 
	reality.lies. 
	<img src="../images/head3.jpg" class="img"> 
	</div> 
	<div id="how"> 
	strong.your.program.is. 
	<img src="../images/head1.jpg" class="img"> 
	</div> 
	<div id="about"> 
	pulling.the.plug. 
	<img src="../images/head4.jpg" class="img"> 
	</div> 
	<div id="next"> 
	time.someone.smiles. 
	<img src="../images/head5.jpg" class="img"> 
	</div> 
	<div id="in"> 
	a.different.way. 
	<img src="../images/head5.jpg" class="img"> 
	</div> 
	<div id="that"> 
	there.is.a.hope. 
	<img src="../images/head5.jpg" class="img"> 
	</div> 
</div> 
 
<script type="text/javascript"> 
	/* --- start --- */ 
	menu.init(); 
</script> 
 
</body> 
</html>

Tagged with: •
 
3 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.