Tree Javascript

Bonjour,
Je voudrait réaliser un classement de fichier pour mon site web à l'aide d'un arbre en javascipt. J'ai trouvé un exelent modèle ici, auquelle j'ai changé quelques icones, etc... Mais j'aurai voulu plutôt que de mettre des pointiller mettre un grand fond gris un peu comme ici (mais je crois qu'il faut etre inscirt pour le voir ) mais malgré mes recherche je n'ai rien reussi a faire car le javascript n'est vraiment pas mon fort et il me semble que tout ce passe dans le fichier .JS ! J'arrive a modifier le texte (la couleur) mais pas à mettre un <div> avec une couleur de fond En tout cas mes essaie non rien donner !
Enfin voila le code en question :

var nodes			= new Array();;
var openNodes	= new Array();
var icons			= new Array(6);


function preloadIcons() {
	icons[0] = new Image();
	icons[0].src = "http://www.temple-ewok.com/sons/img/plus.png";
	icons[1] = new Image();
	icons[1].src = "http://www.temple-ewok.com/sons/img/plus.png";
	icons[2] = new Image();
	icons[2].src = "http://www.temple-ewok.com/sons/img/minus.png";
	icons[3] = new Image();
	icons[3].src = "http://www.temple-ewok.com/sons/img/minus.png";
	icons[4] = new Image();
	icons[4].src = "http://www.temple-ewok.com/sons/img/folder.png";
	icons[5] = new Image();
	icons[5].src = "http://www.temple-ewok.com/sons/img/folderopen.png";
}

function createTree(arrName, startNode, openNode) {
		nodes = arrName;
		if (nodes.length > 0) {
		preloadIcons();
		if (startNode == null) startNode = 0;
		if (openNode != 0 || openNode != null) setOpenNodes(openNode);
	
		if (startNode !=0) {
			var nodeValues = nodes[getArrayId(startNode)].split("|");
			document.write("<a href=\"" + nodeValues[3] + "\" onmouseover=\"window.status='" + nodeValues[2] + "';return true;\" onmouseout=\"window.status=' ';return true;\"><img src=\"http://www.temple-ewok.com/sons/img/folderopen.gif\" align=\"absbottom\" alt=\"\" />" + nodeValues[2] + "</a><br />");
		} else document.write("<img src=\"http://www.temple-ewok.com/sons/img/base.gif\" align=\"absbottom\" alt=\"\" />Website<br />");
	
		var recursedNodes = new Array();
		addNode(startNode, recursedNodes);
	}
}

function getArrayId(node) {
	for (i=0; i<nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[0]==node) return i;
	}
}

function setOpenNodes(openNode) {
	for (i=0; i<nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[0]==openNode) {
			openNodes.push(nodeValues[0]);
			setOpenNodes(nodeValues[1]);
		}
	} 
}

function isNodeOpen(node) {
	for (i=0; i<openNodes.length; i++)
		if (openNodes[i]==node) return true;
	return false;
}

function hasChildNode(parentNode) {
	for (i=0; i< nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[1] == parentNode) return true;
	}
	return false;
}

function lastSibling (node, parentNode) {
	var lastChild = 0;
	for (i=0; i< nodes.length; i++) {
		var nodeValues = nodes[i].split("|");
		if (nodeValues[1] == parentNode)
			lastChild = nodeValues[0];
	}
	if (lastChild==node) return true;
	return false;
}
// Adds a new node to the tree
function addNode(parentNode, recursedNodes) {
	for (var i = 0; i < nodes.length; i++) {

		var nodeValues = nodes[i].split("|");
		if (nodeValues[1] == parentNode) {
			
			var ls	= lastSibling(nodeValues[0], nodeValues[1]);
			var hcn	= hasChildNode(nodeValues[0]);
			var ino = isNodeOpen(nodeValues[0]);


			
			if (ls) recursedNodes.push(0);
			else recursedNodes.push(1);

			
			if (hcn) {
				if (ls) {
					document.write("<a href=\"javascript: oc(" + nodeValues[0] + ", 1);\"><img id=\"join" + nodeValues[0] + "\" src=\"http://www.temple-ewok.com/sons/img/");
					 	if (ino) document.write("minus");
						else document.write("plus");
					document.write("minus.png\" align=\"absbottom\" alt=\"Open/Close node\" /></a>");
				} else {
					document.write("<a href=\"javascript: oc(" + nodeValues[0] + ", 0);\"><img id=\"join" + nodeValues[0] + "\" src=\"http://www.temple-ewok.com/sons/img/");
						if (ino) document.write("minus");
						else document.write("plus");
					document.write(".png\" align=\"absbottom\" alt=\"Open/Close node\" /></a>");
				}
			}
			
			document.write("<a href=\"" + nodeValues[3] + "\" onmouseover=\"window.status='" + nodeValues[2] + "';return true;\" onmouseout=\"window.status=' ';return true;\">");
			
			
			if (hcn) {
				document.write("<img id=\"icon" + nodeValues[0] + "\" src=\"http://www.temple-ewok.com/sons/img/folder")
					if (ino) document.write("open");
				document.write(".gif\" align=\"absbottom\" alt=\"Folder\" />");
			} else document.write("<img id=\"icon" + nodeValues[0] + "\" src=\"http://www.temple-ewok.com/sons/img/page.png\" align=\"absbottom\" alt=\"Page\" />");
			
			
			document.write(nodeValues[2]);
			
			
			document.write("</a><br />");
			
			
			if (hcn) {
				document.write("<div id=\"div" + nodeValues[0] + "\"");
					if (!ino) document.write(" style=\"display: none;\"");
				document.write(">");
				addNode(nodeValues[0], recursedNodes);
				document.write("</div>");
			}
		
						recursedNodes.pop();
		}
	}
}
		


function oc(node, bottom) {
	var theDiv = document.getElementById("div" + node);
	var theJoin	= document.getElementById("join" + node);
	var theIcon = document.getElementById("icon" + node);
	
	if (theDiv.style.display == 'none') {
		if (bottom==1) theJoin.src = icons[3].src;
		else theJoin.src = icons[2].src;
		theIcon.src = icons[5].src;
		theDiv.style.display = '';
	} else {
		if (bottom==1) theJoin.src = icons[1].src;
		else theJoin.src = icons[0].src;
		theIcon.src = icons[4].src;
		theDiv.style.display = 'none';
	}
}

if(!Array.prototype.push) {
	function array_push() {
		for(var i=0;i<arguments.length;i++)
			this[this.length]=arguments[i];
		return this.length;
	}
	Array.prototype.push = array_push;
}
if(!Array.prototype.pop) {
	function array_pop(){
		lastElement = this[this.length-1];
		this.length = Math.max(this.length-1,0);
		return lastElement;
	}
	Array.prototype.pop = array_pop;
}

Merci d'avance pour votre aide eventuel ![/i][/i][/i][/i][/i][/i][/i]
Modifié par Malf (18 Oct 2007 - 10:58)