javascript oo: passing object

I want to create a button where you can choose for 5 possibilities.(1-5)
see attach. When onover the choosen 'subbutton'  lights up and when you click the 'light' stays on.

I've created a object button with three objects. the object nfo keeps the onover en clicked situation
With these 2 properties the object rbutton shows een gif (03.gif)

problem: in the function onover I can't change any property of the nfo object or read it.

I know the code is a little messy but I tried a lot of things.

Any ideas?

// JavaScript Document
 
var knop1 = new button('a',100,100)
 
function button(nm,x,y){
		
	this.name = nm
	
	bg = new rbutton(this,x,y)
 
	nm1 = new sbutton(this,nm+'1',1,x+59,y+12,bg);
	nm2 = new sbutton(this,nm+'2',2,x+71,y+50,bg);
	nm3 = new sbutton(this,nm+'3',3,x+41,y+73,bg);
	nm4 = new sbutton(this,nm+'4',4,x+10,y+50,bg);
	nm5 = new sbutton(this,nm+'5',5,x+21,y+12,bg);
 
	nfo = new info()
}
 
function  info(){
	
	this.clicked = 0
	this.over = 0
	
	}
 
function rbutton(nm,x,y){
	
    var newNode = document.createElement("div");
    newNode.setAttribute("id", nm);
    newNode.setAttribute("style", "visibility: visible;");
    document.body.appendChild(newNode);
	var deknop = document.getElementById(nm);
  	deknop.style.position = "absolute";
  	deknop.style.left = x + "px";
  	deknop.style.top = y + "px";
 
	onover(nm,0,0)
 
}	
 
	info.prototype.setclicked = function(res) {
	nfo.clicked = res
 
}	
 
 
info.prototype.setover = function(res) {
 
	alert("res: "+res)
	
	nfo.over = res
	
	alert("FGGGGG")
	
}
 
 
	info.prototype.alertClass = function() {
	alert(this.clicked + " " + this.over);
}
	
function sbutton(prnt,nm,nr,a,b,bg_){
 
	//alert(nfo.clicked)
	//alert("bg_.name: " + bg_.clicked)
	//p = prnt.getparent(nm)
    var newNode = document.createElement("div");
    newNode.setAttribute("id", nm);
    newNode.setAttribute("style", "visibility: visible;");
	newNode.setAttribute("onmouseover", "onover('" +prnt+"',"+ nr +")");
	newNode.setAttribute("onmouseout", "onover('" +prnt+"',0)");
	newNode.setAttribute("onmousedown","clickit('" +prnt+"',"+nr+")");
    document.body.appendChild(newNode);
	var deknop = document.getElementById(nm);
	
	deknop.style.backgroundColor = "";
  	deknop.style.position = "absolute";
  	deknop.style.left = a + "px";
	deknop.style.top = b + "px";
	deknop.style.width = "20px";
	deknop.style.height = "20px";
	deknop.innerHTML = "<span align='center'>&nbsp;&nbsp;"+nr+"&nbsp;&nbsp;</span>";
	deknop.style.cursor='pointer'
	
  }
  
function clickit(nm,nr){
	
	alert("nr: " +nfo.clicked)
	nfo.setclicked(nr)
	alert("bg.clicked: " + nfo.clicked)
	nfo.setover(nr)
	alert("over: " +nfo.over)
	onover(nm,nr)
	
 
 }
 
function onover(nm,nr){
	
	//alert(nfo.clicked)
	document.getElementById(nm).innerHTML= "<img border='0px' src='"+ nr + nr + ".png'>"
	}

Select allOpen in new window

13.gif