nicht angemeldet
Slidemenü macht Probleme
Hallo,
ich habe folgendes Problem, wenn ich auf den 4. Menüpunkt gehe und dann einen unterpunkt auswählen möchte kappt das menü immer zusammen. ich vermute das hat mit dem wert ab 50 zu tun. kann mir jemand helfen? Ich bin nicht der Crack in Javascript und bin hier an meine Grenzen gestossen.
so definiere ich die bilder:
<div id='m41' style="position:absolute; top:-20px; left:300px"><a href="javascript:void(0)" onMouseover="rollout(49)" onmouseout="rollin(49)"><img SRC="images/m41-0.gif" NAME="b41" NOSAVE BORDER=0 height=20 width=89></a></div>
nun kommen die menüpunkte:
<div id='m40' style="position:absolute; top:-20px; left:300px"><img SRC="images/m40-0.gif" NAME="b40" NOSAVE BORDER=0 height=14 width=120 onMouseover="rollout(40)" onmouseout="rollin(40)"></div>
<div id='m10' style="position:absolute; top: 100px; left:0px"><img SRC="images/m10-0.gif" NAME="b10" NOSAVE BORDER=0 height=14 width=120 onMouseover="rollout(10)" onmouseout="rollin(10)"></div>
<div id='m20' style="position:absolute; top:-20px; left:100px"><img SRC="images/m20-0.gif" NAME="b20" NOSAVE BORDER=0 height=14 width=120 onMouseover="rollout(20)" onmouseout="rollin(20)"></div>
<div id='m30' style="position:absolute; top:-20px; left:200px"><img SRC="images/m30-0.gif" NAME="b30" NOSAVE BORDER=0 height=14 width=120 onMouseover="rollout(30)" onmouseout="rollin(30)"></div>
und hier das script:
<p><script language="javascript">
var ns4up = (document.layers) ? 1 : 0; // Browseridentifizierung
var ie4up = (document.all) ? 1 : 0;
rc=3
x=new Array()
y=new Array()
xp=new Array()
yp=new Array()
x1=new Array()
y1=new Array()
x2=new Array()
y2=new Array()
nc=new Array()
ani=0
ani1=0
set1()
setTimeout("pull()",10)
function pull() {
ani=ani+1
for (u=1; u<15; u++) {
for (i=0; i<4; i++) {
xs=xp[u*10+i]-x[u*10+i]+(Math.sin(u+i+ani)*10*ani1)
ys=yp[u*10+i]-y[u*10+i]+(Math.cos(i+u+ani)*10*ani1)
x[u*10+i]=x[u*10+i]+xs/5
y[u*10+i]=y[u*10+i]+ys/5
if ((Math.abs(xs)>0.1 || Math.abs(ys)>0.1) && (nc[u*10+i]==1)) {
if (ns4up) {
document.layers["m"+((i+1)*10+(u-1))].left=x[u*10+i]
document.layers["m"+((i+1)*10+(u-1))].top=y[u*10+i]
}
if (ie4up) {
document.all["m"+((i+1)*10+(u-1))].style.pixelLeft = x[u*10+i]
document.all["m"+((i+1)*10+(u-1))].style.pixelTop = y[u*10+i];
}
}
}}
setTimeout("pull()",10)
}
function rollout(nr) {
if (ns4up) {
document["m"+nr].document["b"+nr].src="images/m"+nr+"-1.gif"
nr=Math.floor(nr/10)
document["m"+nr+0].document["b"+nr+0].src="images/m"+nr+"0-1.gif"
}
if (ie4up) {
document.images["b"+nr].src="images/m"+nr+"-1.gif"
nr=Math.floor(nr/10)
document.images["b"+nr+0].src="images/m"+nr+"0-1.gif"
}
for (u=0; u<15; u++) {
xp[u*10+nr-1]=x2[u*10+nr-1]
yp[u*10+nr-1]=y2[u*10+nr-1]
}
}
function rollin(nr) {
if (ns4up) {
document["m"+nr].document["b"+nr].src="images/m"+nr+"-0.gif"
nr1=Math.floor(nr/10)
document["m"+nr1+0].document["b"+nr1+0].src="images/m"+nr1+"0-0.gif"
}
if (ie4up) {
document.images["b"+nr].src="images/m"+nr+"-0.gif"
nr1=Math.floor(nr/10)
document.images["b"+nr1+0].src="images/m"+nr1+"0-0.gif"
}
if ((rc==0 && nr/10>Math.floor(nr/10)) || (rc==1 && nr/10==Math.floor(nr/10)) || (rc==3)){
for (u=0; u<15; u++) {
xp[u*10+nr1-1]=x1[u*10+nr1-1]
yp[u*10+nr1-1]=y1[u*10+nr1-1]
}
}
if (rc==2 && nr/10==Math.floor(nr/10)) {
for (u=1; u<14; u++) {
for (i=0; i<4; i++) {
xp[u*10+i]=x1[u*10+i]
yp[u*10+i]=y1[u*10+i]
}}
for (u=0; u<15; u++) {
xp[u*10+nr1-1]=x2[u*10+nr1-1]
yp[u*10+nr1-1]=y2[u*10+nr1-1]
}
}
}
function init() {
for (u=1; u<15; u++) {
for (i=0; i<4; i++) {
x[u*10+i]=x1[u*10+i]
y[u*10+i]=y1[u*10+i]
xp[u*10+i]=x1[u*10+i]
yp[u*10+i]=y1[u*10+i]
if (nc[u*10+i]==1) {
if (ns4up) {
document.layers["m"+((i+1)*10+(u-1))].left=x[u*10+i]
document.layers["m"+((i+1)*10+(u-1))].top=y[u*10+i]
}
if (ie4up) {
document.all["m"+((i+1)*10+(u-1))].style.pixelLeft = x[u*10+i]
document.all["m"+((i+1)*10+(u-1))].style.pixelTop = 443;
}
}
}}
}
function animation() {
for (u=1; u<15; u++) {
for (i=0; i<4; i++) {
}}
}
function set1() {
x1[10]=111, x2[10]=111 ;//m10
y1[10]=0, y2[10]=0, nc[10]=1
x1[11]=247, x2[11]=247 ;//m20
y1[11]=0, y2[11]=0, nc[11]=1
x1[12]=382, x2[12]=382 ;//m30
y1[12]=0, y2[12]=0, nc[12]=1
x1[13]=517, x2[13]=517 ;//m40
y1[13]=0, y2[13]=0, nc[13]=1
x1[20]=128, x2[20]=128 ;//m11
y1[20]=443, y2[20]=463, nc[20]=1
x1[21]=263,x2[21]=263 ;//m21
y1[21]=443, y2[21]=463, nc[21]=1
x1[22]=398,x2[22]=398 ;//m31
y1[22]=443, y2[22]=463, nc[22]=1
x1[23]=533,x2[23]=533 ;//m41
y1[23]=443, y2[23]=463, nc[23]=1
x1[30]=128, x2[30]=128 ;//m12
y1[30]=443, y2[30]=483, nc[30]=1
x1[31]=263,x2[31]=263 ;//m22
y1[31]=443, y2[31]=483, nc[31]=1
x1[32]=398,x2[32]=398 ;//m32
y1[32]=443, y2[32]=483, nc[32]=1
x1[33]=533,x2[33]=533 ;//m42
y1[33]=443, y2[33]=483, nc[33]=1
x1[40]=128, x2[40]=128 ;//m13
y1[40]=443, y2[40]=503, nc[40]=1
x1[41]=263,x2[41]=263 ;//m23
y1[41]=443, y2[41]=503, nc[41]=1
x1[42]=382,x2[42]=382 ;//m33
y1[42]=443, y2[42]=463, nc[42]=1
x1[43]=533,x2[43]=533 ;//m43
y1[43]=443, y2[43]=503, nc[43]=1
x1[50]=128, x2[50]=128 ;//m14
y1[50]=443, y2[50]=523, nc[50]=1
x1[51]=247,x2[51]=247 ;//m24
y1[51]=443, y2[51]=463, nc[51]=1
x1[52]=382,x2[52]=382 ;//m34
y1[52]=443, y2[52]=483, nc[52]=1
x1[53]=533,x2[53]=533 ;//m44
y1[53]=443, y2[53]=523, nc[53]=1
x1[60]=112, x2[60]=112 ;//m15
y1[60]=443, y2[60]=463, nc[60]=1
x1[61]=247,x2[61]=247 ;//m25
y1[61]=443, y2[61]=483, nc[61]=1
x1[62]=200,x2[62]=200 ;//m35
y1[62]=0, y2[62]=0, nc[62]=0
x1[63]=533,x2[63]=533 ;//m45
y1[63]=443, y2[63]=543, nc[63]=1
x1[70]=112, x2[70]=112 ;//m16
y1[70]=443, y2[70]=483, nc[70]=1
x1[71]=247,x2[71]=247 ;//m26
y1[71]=443, y2[71]=503, nc[71]=1
x1[72]=200,x2[72]=200 ;//m36
y1[72]=0, y2[72]=0, nc[72]=0
x1[73]=517,x2[73]=517 ;//m46
y1[73]=443, y2[73]=563, nc[73]=1
x1[80]=112, x2[80]=112 ;//m17
y1[80]=443, y2[80]=503, nc[80]=1
x1[81]=100,x2[81]=100 ;//m27
y1[81]=0, y2[81]=0, nc[81]=0
x1[82]=200,x2[82]=200 ;//m37
y1[82]=0, y2[82]=0, nc[82]=0
x1[83]=533,x2[83]=533 ;//m47
y1[83]=443, y2[83]=583, nc[83]=1
x1[90]=112, x2[90]=112 ;//m18
y1[90]=443, y2[90]=523, nc[90]=1
x1[91]=100,x2[91]=100 ;//m28
y1[91]=0, y2[91]=0, nc[91]=0
x1[92]=200,x2[92]=200 ;//m38
y1[92]=0, y2[92]=0, nc[92]=0
x1[93]=517,x2[93]=517 ;//m48
y1[93]=443, y2[93]=603, nc[93]=1
x1[100]=112, x2[100]=112 ;//m19
y1[100]=443, y2[100]=523, nc[100]=0
x1[101]=100,x2[101]=100 ;//m29
y1[101]=0, y2[101]=0, nc[101]=0
x1[102]=200,x2[102]=200 ;//m39
y1[102]=0, y2[102]=0, nc[102]=0
x1[103]=517,x2[103]=517 ;//m49
y1[103]=443, y2[103]=463, nc[103]=1
x1[110]=112, x2[110]=112 ;//m20
y1[110]=443, y2[110]=523, nc[110]=0
x1[111]=100,x2[111]=100 ;//m30
y1[111]=0, y2[111]=0, nc[111]=0
x1[112]=200,x2[112]=200 ;//m40
y1[112]=0, y2[112]=0, nc[112]=0
x1[113]=517,x2[113]=517 ;//m50
y1[113]=443, y2[113]=483, nc[113]=1
x1[120]=112, x2[120]=112 ;//m21
y1[120]=443, y2[120]=523, nc[120]=0
x1[121]=100,x2[121]=100 ;//m31
y1[121]=0, y2[121]=0, nc[121]=0
x1[122]=200,x2[122]=200 ;//m41
y1[122]=0, y2[122]=0, nc[122]=0
x1[123]=517,x2[123]=517 ;//m51
y1[123]=443, y2[123]=503, nc[123]=1
x1[130]=112, x2[130]=112 ;//m21
y1[130]=443, y2[130]=523, nc[130]=0
x1[131]=100,x2[131]=100 ;//m31
y1[131]=0, y2[131]=0, nc[131]=0
x1[132]=200,x2[132]=200 ;//m41
y1[132]=0, y2[132]=0, nc[132]=0
x1[133]=517,x2[133]=517 ;//m51
y1[133]=443, y2[133]=523, nc[133]=1
x1[140]=112, x2[140]=112 ;//m21
y1[140]=443, y2[140]=523, nc[140]=0
x1[141]=100,x2[141]=100 ;//m31
y1[141]=0, y2[141]=0, nc[141]=0
x1[142]=200,x2[142]=200 ;//m41
y1[142]=0, y2[142]=0, nc[142]=0
x1[143]=517,x2[143]=517 ;//m51
y1[143]=443, y2[143]=543, nc[143]=1
init()
}
function modus(m) {
rc=m
}
</script>
-
hier der teil vor dem script nochmal ganz:
<div id='m18' style="position:absolute; top: 100px; left:0px"><a href="javascript:void(0)" onMouseover="rollout(18)" onmouseout="rollin(18)"><img SRC="images/m18-0.gif" NAME="b18" NOSAVE BORDER=0 height=20 width=16></a></div>
<div id='m17' style="position:absolute; top: 100px; left:0px"><a href="javascript:void(0)" onMouseover="rollout(17)" onmouseout="rollin(17)"><img SRC="images/m17-0.gif" NAME="b17" NOSAVE BORDER=0 height=20 width=16></a></div>
<div id='m16' style="position:absolute; top: 100px; left:0px"><a href="javascript:void(0)" onMouseover="rollout(16)" onmouseout="rollin(16)"><img SRC="images/m16-0.gif" NAME="b16" NOSAVE BORDER=0 height=20 width=16></a></div>
<div id='m15' style="position:absolute; top: 100px; left:0px"><a href="javascript:void(0)" onMouseover="rollout(15)" onmouseout="rollin(15)"><img SRC="images/m15-0.gif" NAME="b15" NOSAVE BORDER=0 height=20 width=16></a></div>
<div id='m14' style="position:absolute; top: 100px; left:0px"><a href="javascript:void(0)" onMouseover="rollout(18)" onmouseout="rollin(18)"><img SRC="images/m14-0.gif" NAME="b14" NOSAVE BORDER=0 height=20 width=89></a></div>
<div id='m13' style="position:absolute; top: 100px; left:0px"><a href="javascript:void(0)" onMouseover="rollout(17)" onmouseout="rollin(17)"><img SRC="images/m13-0.gif" NAME="b13" NOSAVE BORDER=0 height=20 width=89></a></div>
<div id='m12' style="position:absolute; top: 100px; left:0px"><a href="javascript:void(0)" onMouseover="rollout(16)" onmouseout="rollin(16)"><img SRC="images/m12-0.gif" NAME="b12" NOSAVE BORDER=0 height=20 width=89></a></div>
<div id='m11' style="position:absolute; top: 100px; left:0px"><a href="javascript:void(0)" onMouseover="rollout(15)" onmouseout="rollin(15)"><img SRC="images/m11-0.gif" NAME="b11" NOSAVE BORDER=0 height=20 width=89></a></div>
<div id='m26' style="position:absolute; top:-20px; left:100px"><a href="javascript:void(0)" onMouseover="rollout(26)" onmouseout="rollin(26)"><img SRC="images/m26-0.gif" NAME="b26" NOSAVE BORDER=0 height=20 width=16></a></div>
<div id='m25' style="position:absolute; top:-20px; left:100px"><a href="javascript:void(0)" onMouseover="rollout(25)" onmouseout="rollin(25)"><img SRC="images/m25-0.gif" NAME="b25" NOSAVE BORDER=0 height=20 width=16></a></div>
<div id='m24' style="position:absolute; top:-20px; left:100px"><a href="javascript:void(0)" onMouseover="rollout(24)" onmouseout="rollin(24)"><img SRC="images/m24-0.gif" NAME="b24" NOSAVE BORDER=0 height=20 width=16></a></div>
<div id='m23' style="position:absolute; top:-20px; left:100px"><a href="javascript:void(0)" onMouseover="rollout(26)" onmouseout="rollin(26)"><img SRC="images/m23-0.gif" NAME="b23" NOSAVE BORDER=0 height=20 width=89></a></div>
<div id='m22' style="position:absolute; top:-20px; left:100px"><a href="javascript:void(0)" onMouseover="rollout(25)" onmouseout="rollin(25)"><img SRC="images/m22-0.gif" NAME="b22" NOSAVE BORDER=0 height=20 width=89></a></div>
<div id='m21' style="position:absolute; top:-20px; left:100px"><a href="javascript:void(0)" onMouseover="rollout(24)" onmouseout="rollin(24)"><img SRC="images/m21-0.gif" NAME="b21" NOSAVE BORDER=0 height=20 width=89></a></div>
<div id='m34' style="position:absolute; top:-20px; left:200px"><a href="javascript:void(0)" onMouseover="rollout(34)" onmouseout="rollin(34)"><img SRC="images/m34-0.gif" NAME="b34" NOSAVE BORDER=0 height=20 width=16></a></div>
<div id='m33' style="position:absolute; top:-20px; left:200px"><a href="javascript:void(0)" onMouseover="rollout(33)" onmouseout="rollin(33)"><img SRC="images/m33-0.gif" NAME="b33" NOSAVE BORDER=0 height=20 width=16></a></div>
<div id='m32' style="position:absolute; top:-20px; left:200px"><a href="javascript:void(0)" onMouseover="rollout(34)" onmouseout="rollin(34)"><img SRC="images/m32-0.gif" NAME="b32" NOSAVE BORDER=0 height=20 width=89></a></div>
<div id='m31' style="position:absolute; top:-20px; left:200px"><a href="javascript:void(0)" onMouseover="rollout(33)" onmouseout="rollin(33)"><img SRC="images/m31-0.gif" NAME="b31" NOSAVE BORDER=0 height=20 width=89></a></div>
<div id='m53' style="position:absolute; top:-20px; left:300px"><a href="javascript:void(0)" onMouseover="rollout(53)" onmouseout="rollin(53)"><img SRC="images/m53-0.gif" NAME="b53" NOSAVE BORDER=0 height=20 width=16></a></div>
<div id='m52' style="position:absolute; top:-20px; left:300px"><a href="javascript:void(0)" onMouseover="rollout(52)" onmouseout="rollin(52)"><img SRC="images/m52-0.gif" NAME="b52" NOSAVE BORDER=0 height=20 width=16></a></div>
<div id='m51' style="position:absolute; top:-20px; left:300px"><a href="javascript:void(0)" onMouseover="rollout(51)" onmouseout="rollin(51)"><img SRC="images/m51-0.gif" NAME="b51" NOSAVE BORDER=0 height=20 width=16></a></div>
<div id='m50' style="position:absolute; top:-20px; left:300px"><a href="javascript:void(0)" onMouseover="rollout(50)" onmouseout="rollin(50)"><img SRC="images/m50-0.gif" NAME="b50" NOSAVE BORDER=0 height=20 width=16></a></div>
<div id='m49' style="position:absolute; top:-20px; left:300px"><a href="javascript:void(0)" onMouseover="rollout(49)" onmouseout="rollin(49)"><img SRC="images/m49-0.gif" NAME="b49" NOSAVE BORDER=0 height=20 width=16></a></div>
<div id='m48' style="position:absolute; top:-20px; left:300px"><a href="javascript:void(0)" onMouseover="rollout(48)" onmouseout="rollin(48)"><img SRC="images/m48-0.gif" NAME="b48" NOSAVE BORDER=0 height=80 width=106></a></div>
<div id='m47' style="position:absolute; top:-20px; left:300px"><a href="javascript:void(0)" onMouseover="rollout(47)" onmouseout="rollin(47)"><img SRC="images/m47-0.gif" NAME="b47" NOSAVE BORDER=0 height=20 width=89></a></div>
<div id='m46' style="position:absolute; top:-20px; left:300px"><a href="javascript:void(0)" onMouseover="rollout(46)" onmouseout="rollin(46)"><img SRC="images/m46-0.gif" NAME="b46" NOSAVE BORDER=0 height=15 width=120></a></div>
<div id='m45' style="position:absolute; top:-20px; left:300px"><a href="javascript:void(0)" onMouseover="rollout(53)" onmouseout="rollin(53)"><img SRC="images/m45-0.gif" NAME="b45" NOSAVE BORDER=0 height=20 width=89></a></div>
<div id='m44' style="position:absolute; top:-20px; left:300px"><a href="javascript:void(0)" onMouseover="rollout(52)" onmouseout="rollin(52)"><img SRC="images/m44-0.gif" NAME="b44" NOSAVE BORDER=0 height=20 width=89></a></div>
<div id='m43' style="position:absolute; top:-20px; left:300px"><a href="javascript:void(0)" onMouseover="rollout(51)" onmouseout="rollin(51)"><img SRC="images/m43-0.gif" NAME="b43" NOSAVE BORDER=0 height=20 width=89></a></div>
<div id='m42' style="position:absolute; top:-20px; left:300px"><a href="javascript:void(0)" onMouseover="rollout(50)" onmouseout="rollin(50)"><img SRC="images/m42-0.gif" NAME="b42" NOSAVE BORDER=0 height=20 width=89></a></div>
<div id='m41' style="position:absolute; top:-20px; left:300px"><a href="javascript:void(0)" onMouseover="rollout(49)" onmouseout="rollin(49)"><img SRC="images/m41-0.gif" NAME="b41" NOSAVE BORDER=0 height=20 width=89></a></div>
<div id='m40' style="position:absolute; top:-20px; left:300px"><img SRC="images/m40-0.gif" NAME="b40" NOSAVE BORDER=0 height=14 width=120 onMouseover="rollout(40)" onmouseout="rollin(40)"></div>
<div id='m10' style="position:absolute; top: 100px; left:0px"><img SRC="images/m10-0.gif" NAME="b10" NOSAVE BORDER=0 height=14 width=120 onMouseover="rollout(10)" onmouseout="rollin(10)"></div>
<div id='m20' style="position:absolute; top:-20px; left:100px"><img SRC="images/m20-0.gif" NAME="b20" NOSAVE BORDER=0 height=14 width=120 onMouseover="rollout(20)" onmouseout="rollin(20)"></div>
<div id='m30' style="position:absolute; top:-20px; left:200px"><img SRC="images/m30-0.gif" NAME="b30" NOSAVE BORDER=0 height=14 width=120 onMouseover="rollout(30)" onmouseout="rollin(30)"></div>
-
Sorry, hab keine Zeit für langwierige analysen, aber:
<p><script language="javascript">
var ns4up = (document.layers) ? 1 : 0; // Browseridentifizierung
var ie4up = (document.all) ? 1 : 0;Damit bist du ca. 3-4 Jahren der Javascriptzeit hinterher. Mal abgesehen, das ich JS Menüs für abwegig halte.
Struppi.
-
Sorry, aber ich habe keine ahnung wie man ein solches menü macht und deswegen habe ich im netz geschaut und das war das einzige was ich gefunden habe was das macht was ich wollte. aber vielleicht hast du ja mal zeit und schickst mir ne mail...
gruss
meik
Sorry, hab keine Zeit für langwierige analysen, aber:
<p><script language="javascript">
var ns4up = (document.layers) ? 1 : 0; // Browseridentifizierung
var ie4up = (document.all) ? 1 : 0;Damit bist du ca. 3-4 Jahren der Javascriptzeit hinterher. Mal abgesehen, das ich JS Menüs für abwegig halte.
Struppi.
-