I have the following script from www.bratta.com for a circle menu - it runs well, but I want to change a few things -
I want to have submenus - they shall be shown after having clicked a button and the buttons have gone in the center and the submenus shall be shown and they shall be links - open in the same page - menu shall not be removed
And when the buttons are clicked and go in the center , they shall change (p.ex. form webkmu in home) are in the circle, the move und mout - functions shall not work - more exactly - the background-image shall stay! Please help, it's really important and urgent for me - if you don't know the whole solution, please give me some tips!!!

I have succedded in making "circles" that are the starting points for submenus, but I don't know how to place them so, that it looks good and how to make them into links and third - how to combine the buttons and the submenus - if I click on a button (which is a main link like services) the submenus shall be and link p.ex. to kmu, web,....

It would also be fine to have different numbers of submenus - according to the buttons

Please tell me, if it isn't clear what I want, then I will try to be more exactly!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
<title>webkmu - mit Ihrer Website zum Erfolg</title>
<link href="stylesheet.css" rel=stylesheet type="text/css">
<style type="text/css">
DIV.clButtons{position:absolute; width:22; height:22; left:98; top:6; visibility:inherit}
#divCont{position:absolute;width:220; height:220; clip:rect(0,220,220,0); z-index:30; visibility:hidden}
#divCenter{position:absolute; width:220; height:220; left:10; top:10; visibility:inherit}
</style>
<script language="JavaScript" type="text/javascript">
/**********************************************************************************
CircleMenu
* Copyright (C) 2001 Thomas Brattli
* This script was released at DHTMLCentral.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*
* Made by Thomas Brattli
*********************************************************************************/

function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=this.agent.indexOf("Opera 5")>-1
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
bw=new lib_bwcheck()


/***************************************************************************
Object constructors; making Cross-browser object of the buttons
****************************************************************************/
//Debug function ******************
function lib_message(txt){alert(txt); return false}

//Lib objects ********************
function lib_obj(obj,nest,o){
if(!bw.bw) return lib_message('Old browser')
nest=(!nest) ? "":'document.'+nest+'.'
if(o&&bw.ns4) this.evnt=o;
else this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+"document.layers." +obj):0;
if(!this.evnt) return lib_message('The layer does not exist ('+obj+') - \nIf your using Netscape please check the nesting of your tags!')
this.css=bw.dom||bw.ie4?this.evnt.style:this.evnt; this.ref=bw.dom||bw.ie4?document:this.css.document;
this.x=this.css.left||this.css.pixelLeft||this.evnt.offsetLeft||0; this.y=this.css.top||this.css.pixelTop||this.evnt.offsetTop||0
this.w=this.evnt.offsetWidth||this.css.clip.width||this.ref.width||this.css.pixelWidth||0; this.h=this.evnt.offsetHeight||this.css.clip.height||this.ref.height||this.css.pixelHeight||0
this.c=0 //Clip values
if((bw.dom || bw.ie4) && this.css.clip) {
this.c=this.css.clip; this.c=this.c.slice(5,this.c.length-1);
this.c=this.c.split(' '); for(var i=0;i<4;i++){this.c[i]=parseInt(this.c[i])}
}
this.ct=this.css.clip.top||this.c[0]||0; this.cr=this.css.clip.right||this.c[1]||this.w||0
this.cb=this.css.clip.bottom||this.c[2]||this.h||0; this.cl=this.css.clip.left||this.c[3]||0
this.obj = obj + "Object"; eval(this.obj + "=this")
return this
}
//Moving object to **************
lib_obj.prototype.moveIt = function(x,y){this.x=x;this.y=y; this.css.left=x;this.css.top=y}

//Showing object ************
lib_obj.prototype.showIt = function(){this.css.visibility="visible"}

//Document size object ********
function lib_doc_size(){
this.x=0;this.x2=bw.ie && document.body.offsetWidth-20||innerWidth||0;
this.y=0;this.y2=bw.ie && document.body.offsetHeight-5||innerHeight||0;
if(!this.x2||!this.y2) return message('Document has no width or height')
this.x50=this.x2/2;this.y50=this.y2/2;
return this;
}

/***************************************************************************
Main variables
****************************************************************************/
//The radius for the circle
radius=96
//Start angle
startAngle=90
//Speed in milliseconds
circleSpeed=20
//angle to move per timeout
moveAngle=5


/***************************************************************************
Initiating the buttons and starts the circlemove
****************************************************************************/
var xcenter,ycenter,menuState,circleGoing;
function init(num){
page=new lib_doc_size()
//Making a simple object for the divCont
oCont=new lib_obj('divCont')
oCenter=new lib_obj('divCenter','divCont')
//Moving the divCont to the center of the page.page.x2/3-110
oCont.moveIt(page.x2/2-110,page.y2/2-110)
//Takes care of the resizing.
window.onresize=resized;
//Making an array to hold the button objects
oBut=new Array()

//Making button objects, arguments: divName,nested div,anglestop
for(i=0;i<6;i++){
oBut[i]=new lib_obj('div'+i,'divCont')
}
//Setting stop angles for each button
oBut[0].stop=0
oBut[1].stop=30
oBut[2].stop=-30
oBut[3].stop=-90
oBut[4].stop=-150
oBut[5].stop=-210
//Moves the button; ie5 bugfix
oBut[0].moveIt(98,6)
//Starts the circlemove
xcenter = oBut[0].x - radius*Math.cos(startAngle*Math.PI/180)
ycenter = oBut[0].y + radius*Math.sin(startAngle*Math.PI/180)
oCont.showIt() //Showing cont layer
circleGo(radius,-moveAngle,startAngle,oBut[5].stop,xcenter,ycenter,'menuState=1')

}
/***************************************************************************
Moves the buttons in a circle
****************************************************************************/
function circleGo(radius,angleinc,angle,endangle,xcenter,ycenter,fn,lnk) {
//if angleinc < endangle-angle (no matter if it's positive or negative numbers)
if ((Math.abs(angleinc)<Math.abs(endangle-angle))) {
circleGoing=true
angle += angleinc
var x = xcenter + radius*Math.cos(angle*Math.PI/180)
var y = ycenter - radius*Math.sin(angle*Math.PI/180)
for(i=1;i<oBut.length;i++){
//if angle are bigger then the stop angle of each button
if(angle>=oBut[i].stop) oBut[i].moveIt(x,y)
}
setTimeout("circleGo("+radius+","+angleinc+","+angle+","+endangle+","+xcenter+","+ycenter+",'"+fn+"','"+lnk+"')",circleSpeed)
}else{
circleGoing=false
eval(fn)
}
}
function resized(){
page2=new lib_doc_size()
if(page2.x2!=page.x2 || page2.y2!=page.y2){
if(bw.ns4) location.reload() //If the width or height have changed we reload the page.
else init()
}
}
/***************************************************************************
When click on the buttons
****************************************************************************/
var zIndex=5
target='content'
function mclick(num,lnk){
//If it's not moving already
if(!circleGoing){
//Added feature; the clicked buttons stays on top!
zIndex++
oBut[num].css.zIndex=zIndex
//Checks the state of the menu and circles it the right way
if(menuState) circleGo(radius,moveAngle,oBut[5].stop,startAngle+5,xcenter,ycenter,'moveCenter("'+lnk+'")')
else moveFromCenter(lnk)
}
}
//Moving the buttons to the center
function moveCenter(lnk){
if(oBut[0].y<95){
for(i=0;i<oBut.length;i++){
oBut[i].moveIt(oBut[i].x+(i-2.5),oBut[i].y+3)
}
setTimeout("moveCenter('"+lnk+"')",30)
}else{
menuState=0
if(lnk && String(lnk)!="undefined") top[target].location.href=lnk

//HERE GOES CODE TO MAKE IT DO SOMETHING WHEN IT REACHES CENTER!
}
}
//Moving the buttons from center
function moveFromCenter(lnk){
if(oBut[0].y>6){
for(i=0;i<oBut.length;i++){
oBut[i].moveIt(oBut[i].x-(i-2.5),oBut[i].y-3)
}
setTimeout("moveFromCenter('"+lnk+"')",30)
}else{
circleGo(radius,-moveAngle,startAngle,oBut[5].stop,xcenter,ycenter,'menuState=1',lnk)
menuState=0
if(lnk && String(lnk)!="undefined") top[target].location.href=lnk
}
}
/***************************************************************************
Mouseover and out on the buttonsoCenter.ref["imgCenter"].src=preCenter[num].srcoCenter.ref["imgCenter"].src='bilder/logo.gif'
****************************************************************************/
function preLoad(num,path,path2){
for(i=0; i<=num; i++){
this[i]=new Image()
this[i].src='bilder/'+path+(i+1)+path2+'.gif'
}
return this
}
preCenter=new preLoad(5,'center',''); pre=new preLoad(5,'','');
preb=new preLoad(5,'','_b'); prec=new preLoad(5,'','_c')



function mover(num){
oBut[num].ref["img"+num].src=prec[num].src
oCenter.ref["imgCenter"].src=preCenter[num].src
}
function mout(num){
oBut[num].ref["img"+num].src='bilder/'+(num+1)+'.gif'
oCenter.ref["imgCenter"].src='bilder/logo-back.gif'

}
//Starting the menu on pageload.
onload=init;
</script>

</head>

<body marginleft="0" marginheight="0">

<br><br><br>


<div id="divCont">
<!-- Circle image -->
<div id="divCenter"><a href="content.html" target="content" border=0><img src="bilder/logo.gif" name="imgCenter" width="200" height="200" border=0 alt=""></a></div>
<!-- Buttons -->
<div id="div0" class="clButtons"><a href="#" onclick="mclick(0,'technical/technical.html'); parent.focus(); return false" onmouseover="mover(0)" onmouseout="mout(0)"><img src="bilder/1.gif" name="img0" width=22 height=22 border=0 alt="Technical Info"></a></div>
<div id="div1" class="clButtons"><a href="#" onclick="mclick(1,'customers.html'); parent.focus(); return false" onmouseover="mover(1)" onmouseout="mout(1)"><img src="bilder/2.gif" name="img1" width=22 height=22 border=0 alt="Our Customers"></a></div>
<div id="div2" class="clButtons"><a href="#" onclick="mclick(2,'retail.html'); parent.focus(); return false" onmouseover="mover(2)" onmouseout="mout(2)"><img src="bilder/3.gif" name="img2" width=22 height=22 border=0 alt="Retail Products"></a></div>
<div id="div3" class="clButtons"><a href="#" onclick="mclick(3,'queries.html'); parent.focus(); return false" onmouseover="mover(3)" onmouseout="mout(3)"><img src="bilder/4.gif" name="img3" width=22 height=22 border=0 alt="Questions, quotes & links"></a></div>
<div id="div4" class="clButtons"><a href="#" onclick="mclick(4,'aboutus.html'); parent.focus(); return false" onmouseover="mover(4)" onmouseout="mout(4)"><img src="bilder/5.gif" name="img4" width=22 height=22 border=0 alt="About us"></a></div>
<div id="div5" class="clButtons"><a href="#" onclick="mclick(5,'eshop.html'); parent.focus(); return false" onmouseover="mover(5)" onmouseout="mout(5)"><img src="bilder/6.gif" name="img5" width=22 height=22 border=0 alt="e-commerce shop"></a></div>
</div>

</body>
</html>