Hi there,
I am sending you the example for this, have a look at this...
<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Family Tree Maker</title>
<link rel=stylesheet type ="text/css" href="../website.css">
<style type="text/css">
.level0 {position:relative; font:bold 12pt Arial; left:20; color:navy; display:block}
.level1 {position:relative; font:10pt Arial; left:40; color:teal; display:block}
.level2 {position:relative; font:10pt Arial; left:40; color:navy; display:none}
.level3 {position:relative; font:10pt Arial; left:40; color:teal; display:none}
.level4 {position:relative; font:10pt Arial; left:40; color:navy; display:none}
.level5 {position:relative; font:10pt Arial; left:40; color:teal; display:none}
.level6 {position:relative; font:10pt Arial; left:40; color:navy; display:none}
.level7 {position:relative; font:10pt Arial; left:40; color:teal; display:none}
.level8 {position:relative; font:10pt Arial; left:40; color:navy; display:none}
.level9 {position:relative; font:10pt Arial; left:40; color:teal; display:none}
</style>
<script type="text/javascript">
<!--
///////////////////////////////////////////////////////////////////////////
// Family Tree Maker by Patrick Brennan 10/12/2000 revised 20/12/2000 //
///////////////////////////////////////////////////////////////////////////
////////////////////////////////////////////////////////
// Section 1 - creating the entries for the tree //
////////////////////////////////////////////////////////
function person(fullname, name, parent, children, level){
this.fullname = fullname
this.id = name
this.parent = parent
this.children = children
this.className = "level" + level
}
var TreeArray = new Array()
///////////////////////////////////////////////////////////////////////////////////////
// Each entry in the following array is in the following format: //
// Full name : Short name (this becomes the element id) : Parent ("root" for the //
// root element), children ( 0 if no, 1 if yes) : level (root = 0) //
///////////////////////////////////////////////////////////////////////////////////////
function makeArray(){
TreeArray[0] = new person("Parent", "parent", "root", "1", "0")
TreeArray[1] = new person("Child 1", "child1", "parent", "0", "1")
TreeArray[2] = new person("Child 2", "child2", "parent", "0", "1")
TreeArray[3] = new person("Child 3", "child3", "parent", "1", "1")
TreeArray[4] = new person("Grandchild 1", "gchild1", "child3", "0", "2")
TreeArray[5] = new person("Grandchild 2", "gchild2", "child3", "1", "2")
TreeArray[6] = new person("Great grandchild 1", "ggchild1", "gchild2", "1", "3")
TreeArray[7] = new person("Great-great grandchild 2", "gggchild2", "ggchild1", "0", "4")
TreeArray[8] = new person("Great grandchild 2", "ggchild2", "gchild2", "0", "3")
TreeArray[9] = new person("Grandchild 3", "gchild3", "child3", "0", "2")
TreeArray[10] = new person("Child 4", "child4", "parent", "0", "1")
TreeArray[11] = new person("Child 5", "child5", "parent", "2", "1")
TreeArray[12] = new person("Grandchild 4", "gchild4", "child5", "1", "2")
TreeArray[13] = new person("Great grandchild 3", "ggchild3", "gchild4", "0", "3")
for (i = 0; i <= TreeArray.length-1; i++){
TreeArray[i].index = i}
}
makeArray()
posbox = new Image
posbox.src = "images/posbox.gif"
negbox = new Image
negbox.src = "images/negbox.gif"
nullbox = new Image
nullbox.src = "images/nullbox.gif"
function swapImage(img){
if(img.src==nullbox.src)
{return false}
if(img.src==posbox.src)
{img.src=negbox.src}
else{img.src=posbox.src}
}
////////////////////////////////////////////////////////
// Section 2 - writing and displaying content //
////////////////////////////////////////////////////////
var content = ""
content += "<h1>Family Tree Maker</h1>"
content += "<span class='level0' id='parent'>" + TreeArray[0].fullname + "</span>"
document.write(content)
var newElem, newText, newImg
for (var i = 1; i <= TreeArray.length-1 ; i++){
newImg = document.createElement("img")
newImg.src = TreeArray[i].children == 0 ? "images/nullbox.gif" : "images/posbox.gif"
newElem = document.createElement("span")
newElem.id = TreeArray[i].id
newElem.className = TreeArray[i].className
newText = document.createTextNode(" " + TreeArray[i].fullname)
newElem.appendChild(newImg)
newElem.appendChild(newText)
document.getElementById(TreeArray[i].parent).appendChild(newElem)
navigator.appName == "Netscape" ? newImg.setAttribute("onclick", "swapImage(this); toggle(this)") : newImg.onclick = respond
}
function toggle(x){
for (var i = 2; i <= x.parentNode.childNodes.length-1; i++){
x.parentNode.childNodes[i].style.display == "block" ? x.parentNode.childNodes[i].style.display = "none" : x.parentNode.childNodes[i].style.display = "block"
}}
function respond(event){ // This function required for IE5
swapImage(window.event.srcElement)
toggle(window.event.srcElement)
}
// -->
</script>
</head>
<body>
<p class=main>This demo shows how the W3C Document Object Model can be used to create an
expanding family tree. The script is compatible with Internet Explorer 5 and Netscape 6,
with only three lines of cross-browser scripting. It is not compatible with Netscape 4.</p>
<p class=main>Clicking on a box will expand the level beneath. The script has up to 10 levels;
in this demo data has been entered in only the first five. Although presented here as a Family
Tree the script can be used for any type of folding-tree menu.</p>
<p class=main>Three images are used by this script - posbox.gif, negbox.gif and nullbox.gif.
The latter is transparent, of the same dimensions as the former, and is there simply for spacing.
They can be saved directly from the screen by right-clicking with the mouse.</p>
<p class=center>
<a href="../index.html">Home</a>
</p>
</body>
</html>
I this there are 3 images posbox.gif,nullbox.gif,negbox.gif replace it with your images. Cauze i cant send the files...
These files are like:
posbox.gif--- just like +ve sign near folder.
negbox.gif--- just like -ve sign near folder.
nullbox.gif--- just like nothing/noImage like a child/file in windows.
