Supportnet / Forum / Skripte(PHP,ASP,Perl...)
Klappmenue
Frage
Hallo, hab bei google ein ganz brauchbares script gefunden für ein navigationsmenue, jetzt würd nur gern wissen, was ich ändern muss um buttons statt der links einzusetzen?gruß
<script language="JavaScript">
<!--
var stayFolded=false
var exImg=new Image(); exImg.src=´dsmh.gif´
var unImg=new Image(); unImg.src=´usm.gif´
var n = (document.layers) ? 1:0;
var ie = (document.all) ? 1:0;
var browser=((n || ie) && parseInt(navigator.appVersion)>=4)
function makeMenu(obj,nest){
nest=(!nest) ? ´´:´document.´+nest+´.´
this.css=(n) ? eval(nest+´document.´+obj):eval(´document.all.´+obj+´.style´)
this.ref=(n) ? eval(nest+´document.´+obj+´.document´):eval(´document´);
this.height=n?this.ref.height:eval(obj+´.offsetHeight´)
this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop;
this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt
return this
}
function b_showIt(){this.css.visibility="visible"}
function b_hideIt(){this.css.visibility="hidden"}
function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}
function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}
function init(){
oTop=new Array()
oTop[0]=new makeMenu(´divTop1´,´divCont´)
oTop[1]=new makeMenu(´divTop2´,´divCont´)
oTop[2]=new makeMenu(´divTop3´,´divCont´)
oTop[3]=new makeMenu(´divTop4´,´divCont´)
oTop[4]=new makeMenu(´divTop5´,´divCont´)
oTop[5]=new makeMenu(´divTop6´,´divCont´)
oTop[6]=new makeMenu(´divTop7´,´divCont´)
oSub=new Array()
oSub[0]=new makeMenu(´divSub1´,´divCont.document.divTop1´)
oSub[1]=new makeMenu(´divSub2´,´divCont.document.divTop2´)
oSub[2]=new makeMenu(´divSub3´,´divCont.document.divTop3´)
oSub[3]=new makeMenu(´divSub4´,´divCont.document.divTop4´)
oSub[4]=new makeMenu(´divSub5´,´divCont.document.divTop5´)
oSub[5]=new makeMenu(´divSub6´,´divCont.document.divTop6´)
oSub[6]=new makeMenu(´divSub7´,´divCont.document.divTop7´)
for(i=0;i<oSub.length;i++){ oSub[i].hideIt() }
for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) }
}
function menu(num){
if(browser){
if(!stayFolded){
for(i=0;i<oSub.length;i++){
if(i!=num){
oSub[i].hideIt()
oTop[i].ref["imgA"+i].src=unImg.src
}
}
for(i=1;i<oTop.length;i++){
oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
}
}
if(oSub[num].vis()){
oSub[num].showIt()
oTop[num].ref["imgA"+num].src=exImg.src
}else{
oSub[num].hideIt()
oTop[num].ref["imgA"+num].src=unImg.src
}
for(i=1;i<oTop.length;i++){
if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height)
else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)
}
}
}
// -->
</script>
<body onload="init()"><style>
DIV.clTop {position:absolute; width:300;} /*oben ausrichten*/
DIV.clSub {position:absolute; left:15; width:300;} /*Untermenue ausrichten*/
#divCont {position:relative; left:10; height:100; width:170;} /*Menue links ausrichten*/
A.clMain {font-family:Verdana, Arial, Helvetica, Helv; font-size:8pt; text-decoration:none; font-weight:bold; color:black;} /*Hauptmenueformatierung*/
A.clSubb {font-family:Verdana, Arial,Helvetica, Helv; font-size:8pt; text-decoration:none; color:black;} /*Untermenueformatierung*/
#divMain {position:absolute;}
</style>
<div id="divCont">
<div id="divTop1" class="clTop"><a href="#" target="_self" onclick="menu(0); return false" class="clMain">
<img src="usm.gif" name="imgA0" alt="" border="0" width="11" height="11"> Übersicht</a><br>
<div id="divSub1" class="clSub">
<p style="margin-top: 2; margin-bottom: 2">
<a href="#" target="Hauptframe" class="clSubb"> Objektverwaltung</a><br>
Antwort 1 von rfb
wenn ich das richtig interpretiere, sind hier die Grafiken, die als Button dienen sollen, referenziert (da mein Mozilla bei dem Script streikt kann ich es nicht nachprüfen, du solltest den Kram mal auf DOM-Syntax umschreiben):
var exImg=new Image(); exImg.src=´dsmh.gif´
var unImg=new Image(); unImg.src=´usm.gif´