속으로 점점 들어가면서 내용을 찾아감
페이지 정보
작성자 서방님 댓글 0건 조회 103회 작성일 07-08-08 16:08본문
<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">
body {cursor:crosshair;margin:0; padding:0; position:absolute; overflow:hidden; background:#000; left:0; top:0; width:100%; height:100%;}
.menuSpan {position:absolute;background:#FFF;overflow:hidden;}
.labSpan {position:absolute;color:#FFF;font-family:tahoma;margin:2%;}
.textSpan {position:absolute;color:#666;font-family:tahoma;font-size:.8em;background:#FFF;text-align:center;overflow:hidden;}
.textPath {position:absolute;color:#FFF;font-family:tahoma;font-size:.8em;text-align:center;}
.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
// ============================================================
window.onerror = new Function("return true");
// ===== global var ======
var m,menuSpan,textSpan,textPath,W,H;
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;
// ===== reset this.spa =====
function resetSpa(o){
if(o.spa){
o.spa="";
for(i in o.m)resetSpa(o.m[i]);
}
}
// ===== insert HTML elements =====
function createHTML(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;
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);
}
function animHTML(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);
o.spa.style.height = Math.floor(h);
// ==== font size
fs = w/8;
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){
for(i in o.m)o.m[i].oX=x+W;
x=-W;
} else for(i in o.m)o.m[i].oX=0;
y += o.oY;
if(y<-W){
for(i in o.m)o.m[i].oY=y+W;
y=-W;
} else for(i in o.m)o.m[i].oY=0;
o.spa.style.left = Math.round(x);
o.spa.style.top = Math.round(y);
}
// ==== recursive call
function animateChildren(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);
for(i in o.m) animateChildren(o.m[i],w/3,h/3);
}
}
function doZoom(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("doZoom("+x+","+y+","+z+");",16);
// ==== animHTML
animHTML(m, -W*xB, -H*yB, W*3*zB, H*3*zB);
for(i in m.m) animateChildren(m.m[i], W*zB, H*zB);
}
// ===== create menu element =====
function createMenu(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 ====
this.createNode = function(c,b,h) {
this.m[this.m.length] = newItem = 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 =====
this.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)/10;
xP = ((z*this.obj.px)-xB)/10;
yP = ((z*this.obj.py)-yB)/10;
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;
}
}
// ===== resize window ====
function resize(){
nx = document.body.offsetWidth;
ny = document.body.offsetHeight;
W = Math.round(nx * .4);
H = Math.round(ny * .8);
if (H > W) H = W;
if (W > H) W = H;
with(textSpan.style){
width = W;
height = H;
left = 0;
top = -H/2;
fontSize = W/24+"px";
}
with(menuSpan.style){
width = W;
height = H;
left = -W;
top = -H/2;
}
with(textPath.style){
width = W*2;
height = 18;
left = -W;
top = H/2;
fontSize = W/24+"px";
}
animHTML(m, -W*xB, -H*yB, W*3*zB, H*3*zB);
for(var i in m.m) animateChildren(m.m[i], W*zB, H*zB);
}
onresize = resize;
// ===== yo! zyva ! =====
onload = function() {
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();
}
//-->
</script>
</head>
<body>
<span style="position:absolute;left:50%;top:50%">
<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="hand3.jpg" class="img">
</div>
<div id="reuse">
is.so.hard.
<img src="head6.jpg" class="img">
</div>
<div id="enforcement">
efforts.have.been.weak.
<img src="head5.jpg" class="img">
</div>
<div id="have">
been.working.on.it.
<img src="head3.jpg" class="img">
</div>
<div id="never">
be.certain.
<img src="head4.jpg" class="img">
</div>
<div id="believe">
in.God.
<img src="head8.jpg" class="img">
</div>
<div id="detest">
menus.
<img src="head4.jpg" class="img">
</div>
<div id="love">
DHTML.
<img src="head3.jpg" class="img">
</div>
<div id="after">
a.few.hours.on.JavaScript.
<img src="head5.jpg" class="img">
</div>
<div id="on">
booze.
<img src="head7.jpg" class="img">
</div>
<div id="home">
base.
<img src="head1.jpg" class="img">
</div>
<div id="with">
serious.issues.
<img src="head8.jpg" class="img">
</div>
<div id="where">
significant.doubts.have.been.raised.
<img src="head4.jpg" class="img">
</div>
<div id="idea!">
<img src="head5.jpg" class="img">
</div>
<div id="DHTML">
site.
<img src="head7.jpg" class="img">
</div>
<div id="for ">
help!
<img src="head1.jpg" class="img">
</div>
<div id="and">
we.are.unable.to.transcribe.it.precisely.phonetically.
<img src="head3.jpg" class="img">
</div>
<div id="apology">
she.promised.to.give
<img src="head6.jpg" class="img">
</div>
<div id="first">
time.it.had.been.done.
<img src="head5.jpg" class="img">
</div>
<div id="correct">
answer.
<img src="head7.jpg" class="img">
</div>
<div id="intelligent">
decision.
<img src="head1.jpg" class="img">
</div>
<div id="error">
by.the.translators.
<img src="head3.jpg" class="img">
</div>
<div id="happen">
<img src="head4.jpg" class="img">
</div>
<div id="much">
further.
<img src="head8.jpg" class="img">
</div>
<div id="well">
until.a.few.minutes.ago.
<img src="head7.jpg" class="img">
</div>
<div id="the">
signal.coming.from.your.real.senses.
<img src="head1.jpg" class="img">
</div>
<div id="your ">
system.in.five.minutes.
<img src="head3.jpg" class="img">
</div>
<div id="any">
active.connection.
<img src="head4.jpg" class="img">
</div>
<div id="Firefox">
users.up.once.and.for.all.
<img src="head5.jpg" class="img">
</div>
<div id="gate">
leading.to.the.previous.stage and.open.a.gate.to.the.next.
<img src="head7.jpg" class="img">
</div>
<div id="cry">
<img src="head3.jpg" class="img">
</div>
<div id="feel">
like.a.respectable.man.
<img src="head4.jpg" class="img">
</div>
<div id="think.of">
you.as.a.pro.
<img src="head6.jpg" class="img">
</div>
<div id="smile">
<img src="head7.jpg" class="img">
</div>
<div id="program">
down.and.return.you.to.the.desktop.screen.
<img src="head1.jpg" class="img">
</div>
<div id="mind">
and.wake.you.up.
<img src="head3.jpg" class="img">
</div>
<div id="away">
<img src="head4.jpg" class="img">
</div>
<div id="down">
into.the.next.section.
<img src="head5.jpg" class="img">
</div>
<div id="her">
<img src="head8.jpg" class="img">
</div>
<div id="me">
to.do.
<img src="head1.jpg" class="img">
</div>
<div id="she">
had.waited.for.years.
<img src="head3.jpg" class="img">
</div>
<div id="I">
had.to.know.the.answer.
<img src="head4.jpg" class="img">
</div>
<div id="had ">
to.happen.
<img src="head5.jpg" class="img">
</div>
<div id="could">
have.been.avoided.
<img src="head7.jpg" class="img">
</div>
<div id="really">
think.about.
<img src="head6.jpg" class="img">
</div>
<div id="worried">
about.
<img src="head3.jpg" class="img">
</div>
<div id="liked">
to.do.
<img src="head4.jpg" class="img">
</div>
<div id="more">
work.
<img src="head8.jpg" class="img">
</div>
<div id="some">
time.
<img src="head7.jpg" class="img">
</div>
<div id="longer">
than.I.had.expected.
<img src="head1.jpg" class="img">
</div>
<div id="was">
requested.to.do.
<img src="head6.jpg" class="img">
</div>
<div id="to.join">
this.winning.team.
<img src="head1.jpg" class="img">
</div>
<div id="to.fight">
for.revolutionary.change.
<img src="head3.jpg" class="img">
</div>
<div id="planned">
to.leave.
<img src="head4.jpg" class="img">
</div>
<div id="put">
together.the.pieces.of.her.adventure.
<img src="head8.jpg" class="img">
</div>
<div id="do">
this.menu.
<img src="head7.jpg" class="img">
</div>
<div id="create">
this.web.site.
<img src="head1.jpg" class="img">
</div>
<div id="before">
you.act.
<img src="head8.jpg" class="img">
</div>
<div id="where ">
reality.lies.
<img src="head3.jpg" class="img">
</div>
<div id="how">
strong.your.program.is.
<img src="head1.jpg" class="img">
</div>
<div id="about">
pulling.the.plug.
<img src="head4.jpg" class="img">
</div>
<div id="next">
time.someone.smiles.
<img src="head5.jpg" class="img">
</div>
<div id="in">
a.different.way.
<img src="head5.jpg" class="img">
</div>
<div id="that">
there.is.a.hope.
<img src="head5.jpg" class="img">
</div>
</div>
</body>
</html>
댓글목록
등록된 댓글이 없습니다.
