// Die im Beispiel verwendete Bilddatei "bvmenue_leer.gif"
//befindet sich im Beispiel-Archiv und ist eine 1x1px große transparente Grafik
//diese wird benötigt um die Mouseover/out-events flüssig darzustellen
//bitte Kopiere dies Datei in das gleiche Verzeichnis wie die HTML-datei
//wenn du in mehreren verzeichnissen arbeitest,mußt du die Datei entweder
//in jedes Verzeichnis hineienkopieren oder die änderst im Quellcode
//die URL in eine absolute Adresse(http://)

leer=new Image()
leer.src="../images/bvmenue_leer.gif"

//Ab hier Deine Parameter fürs Menue:

startpunktx=538  //linke Ecke des Menues
startpunkty=471  //obereEcke des Menues

umenuebg="#0F1B2B"    //Hintergrund der Untermenuepunkte normal
umenuebgaktiv="#00274F"  //Hintergrund der Untermenuepunkte mouseover
umenuebreite=90         //Breite der Untermenuepunkte
umenuehoehe=20          //Hoehe der Hauptmenuepunkte
untermenueschriftart="Arial"   //Schriftart der Untermenuepunkte
untermenueschriftgroesse="12" //Schriftgrösse der Untermenuepunkte
untermenueschriftstil="normal"   //Schriftstil der Untermenuemenuepunkte
untermenueschriftfarbenormal="#FFFFFF" //Schriftfarbe der Untermenuepunkte normal
untermenueschriftfarbeaktiv="#FFFFFF"  //Schriftfarbe der Untermenuepunkte mousover
untermenueschriftausrichtung="left" //Erlaubt: center/right/left
menuerahmen=1   //Rahmen für die Menuepunkte (in pixel , 0=kein Rahmen

// Ab hier definierst du deine Menues:
hmnupunkte=new Array()

//jedes Arrayelement enthält folgende Einträge:
//URL eines Bildes für den Normalzustand
//URL eines Bildes für den Mouseover-Zustand 
//Beschriftung,Eintrag für einen Link, eine fortlaufende Nummer
//der Eintrag für den Link folgt folgendem Schema:
//Entweder die Angabe eines links-- seite wird beim Klick aufgerufen
//oder der Function "javascript:void(0)" -- beim klick geschieht nichts
//Enthält ein Menuepunkt kein Untermenue ist der 4. Eintrag eine 0(wie im Beispiel HOME)


hmnupunkte=new Array()
hmnupunkte[0]=new Array("../images/buttons/buttons_01.gif","../images/buttons/buttons_01_over.gif","../home/index.php",0)
hmnupunkte[1]=new Array("../images/buttons/buttons_02.gif","../images/buttons/buttons_02_over.gif","../infos/index.php",1)
hmnupunkte[2]=new Array("../images/buttons/buttons_03.gif","../images/buttons/buttons_03_over.gif","../fotos/index.php",0)
hmnupunkte[3]=new Array("../images/buttons/buttons_04.gif","../images/buttons/buttons_04_over.gif","../erfolge/index.php",0)
hmnupunkte[4]=new Array("../images/buttons/buttons_05.gif","../images/buttons/buttons_05_over.gif","../medien/index.php",1)
hmnupunkte[5]=new Array("../images/buttons/buttons_06.gif","../images/buttons/buttons_06_over.gif","../gb/index.php",0)
hmnupunkte[6]=new Array("../images/buttons/buttons_07.gif","../images/buttons/buttons_07_over.gif","../kontakt/index.php",0)
hmnupunkte[7]=new Array("../images/buttons/buttons_08.gif","../images/buttons/buttons_08_over.gif","../impressum/index.php",0)
hmnupunkte[8]=new Array("../images/buttons/buttons_09.gif","../images/buttons/buttons_09_over.gif","../links/index.php",0)

//Ab hier definierst Du die Untermenues
// Für jedes Untermenue ein neues Array (durchnummeriert mit der Nummer aus
//hmnupunkte. Für Hauptmenuepunkte ohne Untermenue kein Array erzeugen.
// Jedes Array-Element bekommt wie im oberen Array folgende Einträge
// Menuebezeichner und Url der zu linkenden Seite
//Arbeitest du mit Unterverzeichnissen benutze Absolute Adressen (Http://www.verzeichnis/seite.htm)
//Das ganze machst du für jeden Hauptmenuepunkt der Untermenues enthält.
umnupunkte1=new Array()
umnupunkte1[0]=new Array("sina privat","../infos/sina_privat.php")
umnupunkte1[1]=new Array("sina sportlich","../infos/sina_sportlich.php")
umnupunkte1[2]=new Array("sinas buch","../infos/sina_buch.php")

umnupunkte4=new Array()
umnupunkte4[0]=new Array("interviews","../medien/interviews.php")
umnupunkte4[1]=new Array("bilder","../medien/bilder.php")
umnupunkte4[2]=new Array("berichte","../medien/berichte.php")

// Hier steht die Function für das Springen
//hlink wird aufgerufen wenn ein Hauptmenuepunkt geklickt wird
//Hier im Beispiel wird dann die Seite im gleichen Fenster geladen.

function hlink(obj)
{
self.location.href=hmnupunkte[obj][2]
}


// Hier steht die Function für das Springen
//ulink wird aufgerufen wenn ein Untermenuepunkt geklickt wird

function ulink(obj,obj1)
{
x=eval("umnupunkte"+obj)
self.location.href=x[obj1][1]
}


//******* Ab hier werden die Stylesheets fürs Menue geschrieben****************
//***********Hier brauchst du normaler Weise nichts ändern*********************

document.write('<style type="text/css">')
document.write('p.umnunorm {font-family:'+untermenueschriftart+';font-size:'+untermenueschriftgroesse+';font-weight:'+untermenueschriftstil+';color:'+untermenueschriftfarbenormal+';text-decoration:none;margin:2px;line-height:'+(umenuehoehe/2)+'px}')
document.write('p.umnuaktiv {font-family:'+untermenueschriftart+';font-size:'+untermenueschriftgroesse+';font-weight:'+untermenueschriftstil+';color:'+untermenueschriftfarbeaktiv+';text-decoration:none;margin:2px;line-height:'+(umenuehoehe/2)+'px}')
document.write('.umenue{border-width:0px 1px 1px 1px;border-color: #193658;border-style:solid;margin:4px 1px 1px ;padding-top: 5px; text-valign:'+untermenueschriftausrichtung+'}')

document.write('</style>')




ypunkt=0
timer=0
altenr=null
ualtenr=null
hmenarray=new Array()
umenarray=new Array()

//****************Ab hier brauchst Du im Scripteil eigentlich nicht mehr verändern*****  





//*****************************Hauptmenueteil********************

function hmnuerstellen()
{

if(document.layers)
{

for(nr=0;nr<=hmnupunkte.length-1;nr++)
{

document.write('<layer name="hmnumain'+nr+'" top="0" visibility="hide" z-index="100"><a href="javascript:hlink('+nr+')" onfocus="blur()" onmouseover="hmnuschreiben('+nr+',true);"  onmouseout="timer=setTimeout(\'loeschen()\',500);altenr='+nr+'"><img src="'+hmnupunkte[nr][0]+'" border="0" name="b'+nr+'"></a></layer>')
hmenarray[hmenarray.length]=nr
}

}
else
{
for(nr=0;nr<=hmnupunkte.length-1;nr++)
{

document.write('<div  id="hmnumain'+nr+'" style="position:absolute;top:0;visibility:hidden;z-index:100"><a href="javascript:hlink('+nr+')" onfocus="blur()" onmouseover="hmnuschreiben('+nr+',true)"  onmouseout="timer=setTimeout(\'loeschen()\',500);altenr='+nr+'"><img src="'+hmnupunkte[nr][0]+'" border="0" name="b'+nr+'" ></a></div>')
hmenarray[hmenarray.length]=nr
}

}

}


function hmnuschreiben(nr,logo)
{
if(logo)
zustand=1
else
zustand=0
clearTimeout(timer)
ualtenr=null
if(document.layers)
{
if(altenr!=null)
{
objx=eval("document.hmnumain"+altenr+".document")
objx.images['b'+altenr].src=hmnupunkte[altenr][0]
lstring(altenr,false)

}
objx=eval("document.hmnumain"+nr+".document")
objx.images['b'+nr].src=hmnupunkte[nr][zustand]
lstring(nr,logo)
if(hmnupunkte[nr][3]>0)
{
for(xnr=0;xnr<=eval("umnupunkte"+nr).length-1;xnr++)
{
umnuschreiben(nr,xnr,false)
}
}
}
else 
{
if(altenr!=null)
{
document.images['b'+altenr].src=hmnupunkte[altenr][0]
lstring(altenr,false)
}
document.images['b'+nr].src=hmnupunkte[nr][zustand]
lstring(nr,logo)
if(hmnupunkte[nr][3]>0)
{
for(xnr=0;xnr<=eval("umnupunkte"+nr).length-1;xnr++)
{
umnuschreiben(nr,xnr,false)
}
}
}

}


function lstring(nr,aktiv)
{
if(document.layers)
{
if(aktiv==false)
{
if(hmnupunkte[nr][3]>0)
eval("document.umnu"+nr+".visibility='hide'")
}
else
{
if(hmnupunkte[nr][3]>0)
eval("document.umnu"+nr+".visibility='show'")
}
}
else if(document.all)
{
if(aktiv==false)
{
if(hmnupunkte[nr][3]>0)
eval("document.all.umnu"+nr+".style.visibility='hidden'")
}
else
{
if(hmnupunkte[nr][3]>0)
eval("document.all.umnu"+nr+".style.visibility='visible'")
}
}
else if(document.getElementById)
{
if(aktiv==false)
{

if(hmnupunkte[nr][3]>0)
{
document.getElementById("umnu"+nr).style.visibility='hidden'
for(ix=0;ix<=eval("umnupunkte"+nr).length-1;ix++)
{
document.getElementById("umnumain_im"+nr+"_"+ix).style.visibility='hidden'
document.getElementById("umnumain"+nr+"_"+ix).style.visibility='hidden'
}
}
}
else
{

if(hmnupunkte[nr][3]>0)
{
document.getElementById("umnu"+nr).style.visibility='visible'
for(ix=0;ix<=eval("umnupunkte"+nr).length-1;ix++)
{
document.getElementById("umnumain_im"+nr+"_"+ix).style.visibility='visible'
document.getElementById("umnumain"+nr+"_"+ix).style.visibility='visible'
}

}
}
}
ualtnr=null
}
//*************Hauptmenueteil Ende*****************

//********************Untermenues*******************

function umnuerstellen()
{
for (i=0;i<=hmnupunkte.length-1;i++)
{
///*******************
if(document.layers)
{
if(hmnupunkte[i][3]>0)
{

document.write("<layer name='umnu"+i+"'   visibility='hide' z-index='101'>")
for(nr=0;nr<=eval("umnupunkte"+i).length-1;nr++)
{
ypunkt=nr*umenuehoehe
document.write('<layer name="umnumain'+i+'_'+nr+'" height="'+umenuehoehe+'" width='+umenuebreite+'  top="'+ypunkt+'" >')
document.write(ulstring(i,nr,false)+"</layer>")
document.write('<layer  name="umnumain_im'+i+'_'+nr+'" height="'+umenuehoehe+'" width="'+umenuebreite+'"  top="'+ypunkt+'" ><a href="javascript:ulink('+i+','+nr+')" onfocus="blur()"  onmouseover="umnuschreiben('+i+','+nr+',true)"  onmouseout="timer=setTimeout(\'loeschen()\',500);ualtenr=\''+i+'_'+nr+'\'"><img src="'+leer.src+'" border="0" width="'+umenuebreite+'" height="'+(umenuehoehe+(menuerahmen*2))+'"></a></layer>')
}
document.write('</layer>')
umenarray[umenarray.length]=i
}
}
else
{
if(hmnupunkte[i][3]>0)
{

document.write("<div id='umnu"+i+"' style='position:absolute;visibility:hidden;z-index:101'>")
for(nr=0;nr<=eval("umnupunkte"+i).length-1;nr++)
{

ypunkt=nr*umenuehoehe
document.write('<div id="umnumain'+i+'_'+nr+'" style="position:absolute;height:'+umenuehoehe+';width:'+umenuebreite+';top:'+ypunkt+';left:0">')
document.write(ulstring(i,nr,false)+"</div>")
document.write('<div  id="umnumain_im'+i+'_'+nr+'" style="position:absolute;height:'+umenuehoehe+';width:'+umenuebreite+';top:'+ypunkt+';left:0"><a href="javascript:ulink('+i+','+nr+')" onfocus="blur()"  onmouseover="umnuschreiben('+i+','+nr+',true)"  onmouseout="timer=setTimeout(\'loeschen()\',500);ualtenr=\''+i+'_'+nr+'\'"><img src="'+leer.src+'" border="0" width="'+umenuebreite+'" height="'+(umenuehoehe)+'"></a></div>')
}
document.write('</div>')
umenarray[umenarray.length]=i
}
}
}
}

function umnuschreiben(hnr,nr,logo)
{
clearTimeout(timer)
if(ualtenr!=null)
teilnr=ualtenr.split("_")

if(document.layers)
{
if(ualtenr!=null)
{
objx=eval("document.umnu"+teilnr[0]+".document.umnumain"+teilnr[0]+"_"+teilnr[1]+".document")
objx.open()
objx.write(ulstring(teilnr[0],teilnr[1],false))
objx.close()
}
objx=eval("document.umnu"+hnr+".document.umnumain"+hnr+"_"+nr+".document")
objx.open()
objx.write(ulstring(hnr,nr,logo))
objx.close()
}
else if(document.all)
{
if(ualtenr!=null)
{
objx=eval("document.all.umnumain"+teilnr[0]+"_"+teilnr[1])
objx.innerHTML=ulstring(teilnr[0],teilnr[1],false)
}
objx=eval("document.all.umnumain"+hnr+"_"+nr)
objx.innerHTML=ulstring(hnr,nr,logo)

}
else if(document.getElementById)
{
if(ualtenr!=null)
{
document.getElementById("umnumain"+teilnr[0]+"_"+teilnr[1]).innerHTML=ulstring(teilnr[0],teilnr[1],false)
}

document.getElementById("umnumain"+hnr+"_"+nr).innerHTML=ulstring(hnr,nr,logo)
}
}
function ini()
{
for(i=0;i<=hmnupunkte.length-1;i++)
{
hmnuschreiben(i,false)
}
startposition()
}

function ulstring(hnr,nr,aktiv)
{
if(document.layers)
{

if(aktiv==false)

txt='<layer class="umenue" name="umnumain_d'+hnr+'_'+nr+'" height="100%" width="100%"  bgColor="'+umenuebg+'"><p class="umnunorm" >'+eval("umnupunkte"+hnr+"["+nr+"][0]")+'</p></layer>'
else
txt='<layer class="umenue" name="umnumain_d'+hnr+'_'+nr+'" height="100%" width="100%"  bgColor="'+umenuebgaktiv+'" ><p class="umnuaktiv" >'+eval("umnupunkte"+hnr+"["+nr+"][0]")+'</p></layer>'
}
else
{
if(aktiv==false)
txt='<div class="umenue" id="umnumain_d'+hnr+'_'+nr+'" style="position:absolute;height:100%;width:100%;left:0;top:0;background-color:'+umenuebg+';" ><p class="umnunorm" >'+eval("umnupunkte"+hnr+"["+nr+"][0]")+'</p></div>'
else
txt='<div class="umenue" id="umnumain_d'+hnr+'_'+nr+'" style="position:absolute;height:100%;width:100%;left:0;top:0;background-color:'+umenuebgaktiv+';" ><p class="umnuaktiv" >'+eval("umnupunkte"+hnr+"["+nr+"][0]")+'</p></div>'
}
return txt
}

//****************Untermenues Ende*********************

//***************Allgemeine Functionen
function loeschen()
{
if(document.layers)
{
for(i=0;i<=hmenarray.length-1;i++)
{
x=eval("document.hmnumain"+hmenarray[i]+".document")
x.images['b'+hmenarray[i]].src=hmnupunkte[hmenarray[i]][0]
lstring(i,false)

}
for(i=0;i<=umenarray.length-1;i++)
{
eval("document.umnu"+umenarray[i]+".visibility='hide'")
}
}
else if(document.all)
{
for(i=0;i<=hmenarray.length-1;i++)
{
document.images['b'+hmenarray[i]].src=hmnupunkte[hmenarray[i]][0]
lstring(i,false)
}
for(i=0;i<=umenarray.length-1;i++)
{

eval("document.all.umnu"+umenarray[i]+".style.visibility='hidden'")
}
}
else if(document.getElementById)
{
for(i=0;i<=hmenarray.length-1;i++)
{
document.images['b'+hmenarray[i]].src=hmnupunkte[hmenarray[i]][0]
lstring(i,false)
}

for(i=0;i<=umenarray.length-1;i++)
{

document.getElementById("umnu"+umenarray[i]).style.visibility='hidden'
for(ix=0;ix<=eval("umnupunkte"+umenarray[i]).length-1;ix++)
{
document.getElementById("umnumain"+umenarray[i]+"_"+ix).style.visibility='hidden'
document.getElementById("umnumain_im"+umenarray[i]+"_"+ix).style.visibility='hidden'
//document.getElementById("umnu"+umenarray[i]).style.visibility='hidden'
}
}
}
altenr=null
ualtenr=null

}






function startposition()
{
xposi=0
yposi=0
for (i=0;i<=hmnupunkte.length-1;i++)
{
if(document.layers)
{
if(i==0)
eval("document.hmnumain"+i+".left="+startpunktx)
else
eval("document.hmnumain"+i+".left=parseInt(document.hmnumain"+(i-1)+".left)+parseInt(document.hmnumain"+(i-1)+".document.width)")
eval("document.hmnumain"+i+".top="+startpunkty)
eval("document.hmnumain"+i+".visibility='show'")


}
else if(document.all)
{
if(i==0)
eval("document.all.hmnumain"+i+".style.left="+startpunktx)
else
eval("document.all.hmnumain"+i+".style.left=parseInt(document.all.hmnumain"+(i-1)+".style.left)+parseInt(document.all.hmnumain"+(i-1)+".offsetWidth)")
eval("document.all.hmnumain"+i+".style.top="+startpunkty)
eval("document.all.hmnumain"+i+".style.visibility='visible'")
}
else if(document.getElementById&&!document.all)
{
if(i==0)
document.getElementById("hmnumain"+i).style.left=startpunktx
else
document.getElementById("hmnumain"+i).style.left=parseInt(document.getElementById("hmnumain"+(i-1)).style.left)+parseInt(document.getElementById("hmnumain"+(i-1)).offsetWidth)
document.getElementById("hmnumain"+i).style.top=startpunkty
document.getElementById("hmnumain"+i).style.visibility='visible'
}
}
for (i=0;i<=umenarray.length-1;i++)
{
if(document.layers)
{
eval("document.umnu"+umenarray[i]+".left=parseInt(document.hmnumain"+umenarray[i]+".left)")
eval("document.umnu"+umenarray[i]+".top=parseInt(document.hmnumain"+umenarray[i]+".document.height)+"+startpunkty)
}

else if(document.all)
{
eval("document.all.umnu"+umenarray[i]+".style.left=parseInt(document.all.hmnumain"+umenarray[i]+".style.left)")
eval("document.all.umnu"+umenarray[i]+".style.top=parseInt(document.all.hmnumain"+umenarray[i]+".offsetHeight)+"+startpunkty)

}
if(document.getElementById&&!document.all)
{
document.getElementById("umnu"+umenarray[i]).style.left=parseInt(document.getElementById("hmnumain"+umenarray[i]).style.left)
document.getElementById("umnu"+umenarray[i]).style.top=parseInt(document.getElementById("hmnumain"+umenarray[i]).offsetHeight)+startpunkty
}
}

}

//************Aufruf zum schreiben der Menues

hmnuerstellen()

umnuerstellen()