problem bei einer funktion :(

Samuel

Samuel

Erfahrenes Mitglied
Ich würde gerne ein Menü machen das wenn ich mit der Maus über ein Link fahre das dann ein div aufgeht und das dann langsam größer wird.
ich hab gedacht das koennte so gehn:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Untitled</title>
<script language="JavaScript">
function startAnimation(DivName) {
var ref;
if (x) {
if (document.all) {
document.all[DivName].style.visibility='visible';
document.all[DivName].style.height=x;
} else if ((!document.all) && (document.getElementById)) {
ref=document.getElementBy(DivName);
ref.style.visibility='visible';
ref.style.height=x;
} else if (document.layers) {
document.layers[DivName].style.visibility='show';
document.layers[DivName].style.height=x;
}
if (x<200) { x++; }
} else { var x=0; }
timer=setTimeout(startAnimation(DivName), 100);
}
</script>
</head>
<body>
<a href="#" onmouseover="startAnimation('blub')">blub</a>
<div id="blub" style="position:absolute; left:100px; top:100px; width=100px; background-color:#CCCCCC; visibility:hidden;">
bla<br>und<br>blub
</div>
</body>
</html>



Hier bringt er mir dann immer so ein behinderte message
Stack overflow at line 22
brauch hilfe :]

thX im Voraus
 
:((

timer=setTimeout('startAnimation("'+DivName+'")', 100);

funktioniert leider auch nicht, wüsste auch nicht wieso das gehn sollte :)

ich bitte um hilfe
 
habs jetzt mal so probiert, geht aber auch nicht :((

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

<html>
<head>
<title>Untitled</title>
<script language="JavaScript">
var x=0;
function startAnimation(DivName) {
var ref;
if (document.all) {
document.all[DivName].style.visibility='visible';
if (x<300) {
document.all[DivName].style.height=x;
x++;
setTimeout("startAnimation(DivName)", 100);
}
} else if ((!document.all) && (document.getElementById)) {
ref=document.getElementById(DivName);
ref.style.visibility='visible';
if (x<300) {
ref.style.height=x;
x++;
setTimeout("startAnimation(DivName)", 100);
}
} else if (document.layers) {
document.layers[DivName].style.visibility='show';
if (x<300) {
document.layers[DivName].style.height=x;
x++;
setTimeout("startAnimation(DivName)", 100);
}}}
</script>
</head>

<body>
<a href="#" onmouseover="startAnimation('blub')">blub</a>
<div id="blub" style="position:absolute; width:100px; top:100px; left:100px; background-color:#CCCCCC; visibility:hidden;">
bla und blub
</div>


</body>
</html>
 
<html>
<head>
<title>Untitled</title>
<script language="JavaScript">
var x=0;
function startAnimation(DivName) {
var ref;
if (document.all) {
document.all[DivName].style.visibility='visible';
if (x<300) {
document.all[DivName].style.clip="rect(0, auto, "+x+", 0)";
x++;
setTimeout("startAnimation('"+DivName+"')", 100);
}
} else if ((!document.all) && (document.getElementById)) {
ref=document.getElementById(DivName);
ref.style.visibility='visible';
if (x<300) {
ref.style.clip="rect(0, auto, "+x+", 0)";
x++;
setTimeout("startAnimation('"+DivName+"')", 100);
}
} else if (document.layers) {
document.layers[DivName].style.visibility='show';
if (x<300) {
document.layers[DivName].clip.bottom=x;
x++;
setTimeout("startAnimation('"+DivName+"')", 100);
}}}
</script>
</head>

<body>
<a href="#" onmouseover="startAnimation('blub')">blub</a>
<div id="blub" style="position:absolute; width:100px; top:100px; left:100px; background-color:#CCCCCC; visibility:hidden; clip:rect(0, auto, 0, 0);">
bla und blub
</div>


</body>
</html>

;)
 
thX 4 helping dude

danke für die hilfe
eine frage hab ich aber noch
wenn ich jetzt drei menüs habe beginnen ja nicht alle von anfang an sondern bei dem wert der x gerade hat

was macht man da?
für jeden menüpunkt ne eigene funktion?
ich hoffe nicht :)
 
hier hast du eine objekt orientierte version

studiere sie...

<html>
<head>
<title>Untitled</title>
<script language="JavaScript">
<!--

function AnimationInit(DivName){
d=document;
this.ref=d.all?d.all[DivName].style:d.layers?d.layers[DivName]:d.getElementById(DivName).style;
this.x=0;
this.obj=DivName+"Object"; eval(this.obj+"=this");
}

AnimationInit.prototype.clipit=function(){
this.x+=2;
if(d.layers) this.ref.clip.bottom=this.x;
if(window.opera) this.ref.height=this.x;
else this.ref.clip="rect(0, auto, "+this.x+", 0)";
if(this.x<25) setTimeout(this.obj+".clipit()", 100);
}

onload=function(){
oblub=new AnimationInit('blub');
oblub2=new AnimationInit('blub2');
}

//-->
</script>
</head>

<body>
<a href="#" onmouseover="oblub.clipit()">blub</a><br>
<a href="#" onmouseover="oblub2.clipit()">blub2</a>
<div id="blub" style="position:absolute; width:100px; top:100px; left:100px; background-color:#CCCCCC; clip:rect(0, auto, 0, 0);">
bla und blub
</div>
<div id="blub2" style="position:absolute; width:100px; top:130px; left:100px; background-color:#CCCCCC; clip:rect(0, auto, 0, 0);">
bla und blub2
</div>


</body>
</html>

gruss
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück