Jojoxx.net logotyp

 

 

Användare ikonAnvändare
Besökare just nu: 108
Snabblänkar ikonSnabblänkar
JavaScript-arkivet
Perl
FAQ

Sök på Jojoxx.net


Släktträd

Exempel

Kod


<script type="text/javascript">
var height=500; // Höjd på släktträdet.
var boxwidth=120; // Bredd på rutor.
var boxheight=50; // Höjd på rutor.
var space=20; // Avstånd mellan rutor.
var levels=3; // Antal nivåer på trädet.
var content=new Object(); // Innehållet i trädet.
content["1-1"]="Jag";
content["2-1"]="Far";
content["2-2"]="Mor";
content["3-1"]="Farfar";
content["3-2"]="Farmor";
content["3-3"]="Morfar";
content["3-4"]="Mormor";


// ----------
var lvlparts=1; var html="";
for(var l=0;l<levels;l++){
	lheight=height/lvlparts;
	for(var lp=0;lp<lvlparts;lp++){
		if(l<levels-1){
			html+=drawHorizontal(l*(boxwidth+space)+boxwidth,lp*lheight+(lheight/2),space/2,"black");
			html+=drawVertical(l*(boxwidth+space)+boxwidth+(space/2),lp*lheight+(lheight/4),lheight/2,"black")
			html+=drawHorizontal(l*(boxwidth+space)+boxwidth+(space/2),lp*lheight+(lheight/4),space/2,"black")
			html+=drawHorizontal(l*(boxwidth+space)+boxwidth+(space/2),lp*lheight+(lheight/4*3),space/2,"black")
		}
		var text=(content[(l+1)+"-"+(lp+1)])?content[(l+1)+"-"+(lp+1)]:"";
		html+='<div style="border-radius:5px;position:absolute;top:'+((lp*lheight)+lheight/2-boxheight/2)+'px;left:'+(l*(boxwidth+space))+'px;width:'+boxwidth+'px;height:'+boxheight+'px;border:solid black 1px;font-family:Verdana;">'+text+'</div>';
	}
	lvlparts*=2;
}
document.write('<div style="position:relative;">'+html+'</div>');
function drawHorizontal(x,y,length,color,width){
	width=(width)?width:1;
	return '<div style="position:absolute;border-top:'+width+'px solid transparent;background-color:transparent;height:'+width+'px; border-top-color:'+color+';width:'+length+'px;left:'+x+'px;top:'+y+'px;"></div>'
}
function drawVertical(x,y,length,color,width){
	width=(width)?width:1;
	return '<div style="position:absolute;border-top:'+width+'px solid transparent;width:'+width+'px;border:none; height:'+length+'px; background-color:'+color+';left:'+x+'px;top:'+y+'px;"></div>'
}
</script>
<div style="height:500px;"></div> <!-- Platshållare -->


,