Javascript: Fliegendes Image geht unter Netscape nicht - warum?

[Archilles]

Hallo,

ich habe folgendes Script meinem Vorgänger auf der alten Website übernommen. Unter IE flattert die Königskrone spiralförmig ins Browserfenster. Unter Netscape, Mozilla und Konqueror sehe ich nur das Bild aber keine Animation.
Außerdem meldet mir die Javascript-Konsole bei Netscape, dass Funktion dynAnimation() nicht definiert ist. Irgendwie funktioniert das mit index=document.layers.length-1;
nicht.

Script:


<script type="text/javascript" language="JavaScript" fptype=
"dynamicanimation">
<!--
dynamicanimAttr = "dynamicanimation"
animateElements = new Array()
currentElement = 0
speed = 0
stepsZoom = 8
stepsWord = 8
stepsFly = 12
stepsSpiral = 16
steps = stepsZoom
step = 0
outString = ""
function dynAnimation()
{
var ms = navigator.appVersion.indexOf("MSIE")
ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
if(!ie4)
{
if((navigator.appName == "Netscape") &&
(parseInt(navigator.appVersion.substring(0, 1)) >= 4))
{
for (index=document.layers.length-1; index >= 0; index--)
{
layer=document.layers[index]
if (layer.left==10000)
layer.left=0
}
}
return
}
for (index=document.all.length-1; index >= document.body.sourceIndex; index--)
{
el = document.all[index]
animation = el.getAttribute(dynamicanimAttr, false)
if(null != animation)
{
if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
{
ih = el.innerHTML
outString = ""
i1 = 0
iend = ih.length
while(true)
{
i2 = startWord(ih, i1)
if(i2 == -1)
i2 = iend
outWord(ih, i1, i2, false, "")
if(i2 == iend)
break
i1 = i2
i2 = endWord(ih, i1)
if(i2 == -1)
i2 = iend
outWord(ih, i1, i2, true, animation)
if(i2 == iend)
break
i1 = i2
}
document.all[index].innerHTML = outString
document.all[index].style.posLeft = 0
document.all[index].setAttribute(dynamicanimAttr, null)
}
if(animation == "zoomIn" || animation == "zoomOut")
{
ih = el.innerHTML
outString = "<SPAN " + dynamicanimAttr + "=\"" + animation + "\" style=\"position: relative; left: 10000;\">"
outString += ih
outString += "<\/SPAN>"
document.all[index].innerHTML = outString
document.all[index].style.posLeft = 0
document.all[index].setAttribute(dynamicanimAttr, null)
}
}
}
i = 0
for (index=document.body.sourceIndex; index < document.all.length; index++)
{
el = document.all[index]
animation = el.getAttribute(dynamicanimAttr, false)
if (null != animation)
{
if(animation == "flyLeft")
{
el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
el.style.posTop = 0
}
else if(animation == "flyRight")
{
el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
el.style.posTop = 0
}
else if(animation == "flyTop" || animation == "dropWord")
{
el.style.posLeft = 0
el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
}
else if(animation == "flyBottom")
{
el.style.posLeft = 0
el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
}
else if(animation == "flyTopLeft")
{
el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
}
else if(animation == "flyTopRight" || animation == "flyTopRightWord")
{
el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
}
else if(animation == "flyBottomLeft")
{
el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
}
else if(animation == "flyBottomRight" || animation == "flyBottomRightWord")
{
el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
}
else if(animation == "spiral")
{
el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
}
else if(animation == "zoomIn")
{
el.style.posLeft = 10000
el.style.posTop = 0
}
else if(animation == "zoomOut")
{
el.style.posLeft = 10000
el.style.posTop = 0
}
else
{
el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
el.style.posTop = 0
}
el.initLeft = el.style.posLeft
el.initTop = el.style.posTop
animateElements[i++] = el
}
}
window.setTimeout("animate();", speed)
}
function offsetLeft(el)
{
x = el.offsetLeft
for (e = el.offsetParent; e; e = e.offsetParent)
x += e.offsetLeft;
return x
}
function offsetTop(el)
{
y = el.offsetTop
for (e = el.offsetParent; e; e = e.offsetParent)
y += e.offsetTop;
return y
}
function startWord(ih, i)
{
for(tag = false; i < ih.length; i++)
{
c = ih.charAt(i)
if(c == '<')
tag = true
if(!tag)
return i
if(c == '>')
tag = false
}
return -1
}
function endWord(ih, i)
{
nonSpace = false
space = false
while(i < ih.length)
{
c = ih.charAt(i)
if(c != ' ')
nonSpace = true
if(nonSpace && c == ' ')
space = true
if(c == '<')
return i
if(space && c != ' ')
return i
i++
}
return -1
}
function outWord(ih, i1, i2, dyn, anim)
{
if(dyn)
outString += "<SPAN " + dynamicanimAttr + "=\"" + anim + "\" style=\"position: relative; left: 10000;\">"
outString += ih.substring(i1, i2)
if(dyn)
outString += "<\/SPAN>"
}
function animate()
{
el = animateElements[currentElement]
animation = el.getAttribute(dynamicanimAttr, false)
step++
if(animation == "spiral")
{
steps = stepsSpiral
v = step/steps
rf = 1.0 - v
t = v * 2.0*Math.PI
rx = Math.max(Math.abs(el.initLeft), 200)
ry = Math.max(Math.abs(el.initTop), 200)
el.style.posLeft = Math.ceil(-rf*Math.cos(t)*rx)
el.style.posTop = Math.ceil(-rf*Math.sin(t)*ry)
}
else if(animation == "zoomIn")
{
steps = stepsZoom
el.style.fontSize = Math.ceil(50+50*step/steps) + "%"
el.style.posLeft = 0
}
else if(animation == "zoomOut")
{
steps = stepsZoom
el.style.fontSize = Math.ceil(100+200*(steps-step)/steps) + "%"
el.style.posLeft = 0
}
else
{
steps = stepsFly
if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
steps = stepsWord
dl = el.initLeft / steps
dt = el.initTop / steps
el.style.posLeft = el.style.posLeft - dl
el.style.posTop = el.style.posTop - dt
}
if (step >= steps)
{
el.style.posLeft = 0
el.style.posTop = 0
currentElement++
step = 0
}
if(currentElement < animateElements.length)
window.setTimeout("animate();", speed)
}
//-->
</script>

Da ich bei Javascript noch grün bin, bin ich dankbar, Ihr könnt mir sagen, was ich ändern muß, damit Netscape und Konqueror das Spielchen auch mitmachen.

Das Image habe ich unter


<tr dynamicanimation="spiral" style=
"position: relative !important; left: 10000 !important">
<td align="center" height="425">
<div id="krone">
<img src="images/krongold.gif" width="159" height="180"
border="0">
</div>
</td>
</tr>

eingebunden.


Gruß

Archilles

[Jana]

Ehrlich gesagt ist es mir viel zuviel Arbeit mir den Code genau anzusehen.

Kannst du uns die Seite nicht mal in Action auf irgendeinem Server vorführen?

[sixfriends]

Ich seh mir auch grundsäzlich sowas nicht an, wenn es nicht in CODE, HTML oder PHP tags eingeschlossen sind, sowas hier:

<body bgcolor="#111111">

[anda_skoa]

Als nicht HTML Experte kann ich nur raten, aber ich denke es liegt daran, dass es sowas wie Layers in HTML nicht gibt (das war glaub ich eine Netscape4 Extension) und document.all eine IE Sache ist, die eventuell noch von KHTML im IE Mode unterstützt wird.

Wäre also vermutlich angebracht, den Code durch etwas zu ersetzen, was Standardkonforme DOM API benutzt, eventuell mit einem Ausnahmezweig für IE, wenn der das nicht kann.

Ciao,
_

P.S: Codetags im ersten Posting gesetzt

[Archilles]

Die Sites liegen unter http://www.linuxmaker.de/Hofapotheke

Bitte sehr, hier ist der HTML-Code:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 1st April 2002), see www.w3.org">

<title>HOF-Apotheke Stuttgart Homepage</title>
<meta name="GENERATOR" content="Quanta Plus">
<link rel="stylesheet" type="text/css" href=
"css/stylesheet.css">
<style type="text/css" media="screen">
<!--
#logo { position: absolute; z-index: 8; top: 100px; left: 250px; width: 301px; height: 62px; visibility: visible }
#krone { position: absolute; z-index: 8; top: 180px; left: 335px; width: 160px; height: 181px; visibility: visible }
#arznei { position: absolute; z-index: 8; top: 330px; left: 30px; width: 157px; height: 180px; visibility: visible }
#gras { position: absolute; z-index: 8; top: 120px; left: 580px; width: 270px; height: 389px; visibility: visible }
-->
</style>
<script type="text/javascript" language="JavaScript" fptype=
"dynamicanimation">
<!--
dynamicanimAttr = "dynamicanimation"
animateElements = new Array()
currentElement = 0
speed = 0
stepsZoom = 8
stepsWord = 8
stepsFly = 12
stepsSpiral = 16
steps = stepsZoom
step = 0
outString = ""
function dynAnimation()
{
var ms = navigator.appVersion.indexOf("MSIE")
ie4 = (ms>0) && (parseInt(navigator.appVersion.substring(ms+5, ms+6)) >= 4)
if(!ie4)
{
if((navigator.appName == "Netscape") &&
(parseInt(navigator.appVersion.substring(0, 1)) >= 4))
{
for (index=document.layers.length-1; index >= 0; index--)
{
layer=document.layers[index]
if (layer.left==10000)
layer.left=0
}
}
return
}
for (index=document.all.length-1; index >= document.body.sourceIndex; index--)
{
el = document.all[index]
animation = el.getAttribute(dynamicanimAttr, false)
if(null != animation)
{
if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
{
ih = el.innerHTML
outString = ""
i1 = 0
iend = ih.length
while(true)
{
i2 = startWord(ih, i1)
if(i2 == -1)
i2 = iend
outWord(ih, i1, i2, false, "")
if(i2 == iend)
break
i1 = i2
i2 = endWord(ih, i1)
if(i2 == -1)
i2 = iend
outWord(ih, i1, i2, true, animation)
if(i2 == iend)
break
i1 = i2
}
document.all[index].innerHTML = outString
document.all[index].style.posLeft = 0
document.all[index].setAttribute(dynamicanimAttr, null)
}
if(animation == "zoomIn" || animation == "zoomOut")
{
ih = el.innerHTML
outString = "<SPAN " + dynamicanimAttr + "=\"" + animation + "\" style=\"position: relative; left: 10000;\">"
outString += ih
outString += "<\/SPAN>"
document.all[index].innerHTML = outString
document.all[index].style.posLeft = 0
document.all[index].setAttribute(dynamicanimAttr, null)
}
}
}
i = 0
for (index=document.body.sourceIndex; index < document.all.length; index++)
{
el = document.all[index]
animation = el.getAttribute(dynamicanimAttr, false)
if (null != animation)
{
if(animation == "flyLeft")
{
el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
el.style.posTop = 0
}
else if(animation == "flyRight")
{
el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
el.style.posTop = 0
}
else if(animation == "flyTop" || animation == "dropWord")
{
el.style.posLeft = 0
el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
}
else if(animation == "flyBottom")
{
el.style.posLeft = 0
el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
}
else if(animation == "flyTopLeft")
{
el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
}
else if(animation == "flyTopRight" || animation == "flyTopRightWord")
{
el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
}
else if(animation == "flyBottomLeft")
{
el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
}
else if(animation == "flyBottomRight" || animation == "flyBottomRightWord")
{
el.style.posLeft = 10000-offsetLeft(el)+document.body.offsetWidth
el.style.posTop = document.body.scrollTop-offsetTop(el)+document.body.offsetHeight
}
else if(animation == "spiral")
{
el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
el.style.posTop = document.body.scrollTop-offsetTop(el)-el.offsetHeight
}
else if(animation == "zoomIn")
{
el.style.posLeft = 10000
el.style.posTop = 0
}
else if(animation == "zoomOut")
{
el.style.posLeft = 10000
el.style.posTop = 0
}
else
{
el.style.posLeft = 10000-offsetLeft(el)-el.offsetWidth
el.style.posTop = 0
}
el.initLeft = el.style.posLeft
el.initTop = el.style.posTop
animateElements[i++] = el
}
}
window.setTimeout("animate();", speed)
}
function offsetLeft(el)
{
x = el.offsetLeft
for (e = el.offsetParent; e; e = e.offsetParent)
x += e.offsetLeft;
return x
}
function offsetTop(el)
{
y = el.offsetTop
for (e = el.offsetParent; e; e = e.offsetParent)
y += e.offsetTop;
return y
}
function startWord(ih, i)
{
for(tag = false; i < ih.length; i++)
{
c = ih.charAt(i)
if(c == '<')
tag = true
if(!tag)
return i
if(c == '>')
tag = false
}
return -1
}
function endWord(ih, i)
{
nonSpace = false
space = false
while(i < ih.length)
{
c = ih.charAt(i)
if(c != ' ')
nonSpace = true
if(nonSpace && c == ' ')
space = true
if(c == '<')
return i
if(space && c != ' ')
return i
i++
}
return -1
}
function outWord(ih, i1, i2, dyn, anim)
{
if(dyn)
outString += "<SPAN " + dynamicanimAttr + "=\"" + anim + "\" style=\"position: relative; left: 10000;\">"
outString += ih.substring(i1, i2)
if(dyn)
outString += "<\/SPAN>"
}
function animate()
{
el = animateElements[currentElement]
animation = el.getAttribute(dynamicanimAttr, false)
step++
if(animation == "spiral")
{
steps = stepsSpiral
v = step/steps
rf = 1.0 - v
t = v * 2.0*Math.PI
rx = Math.max(Math.abs(el.initLeft), 200)
ry = Math.max(Math.abs(el.initTop), 200)
el.style.posLeft = Math.ceil(-rf*Math.cos(t)*rx)
el.style.posTop = Math.ceil(-rf*Math.sin(t)*ry)
}
else if(animation == "zoomIn")
{
steps = stepsZoom
el.style.fontSize = Math.ceil(50+50*step/steps) + "%"
el.style.posLeft = 0
}
else if(animation == "zoomOut")
{
steps = stepsZoom
el.style.fontSize = Math.ceil(100+200*(steps-step)/steps) + "%"
el.style.posLeft = 0
}
else
{
steps = stepsFly
if(animation == "dropWord" || animation == "flyTopRightWord" || animation == "flyBottomRightWord")
steps = stepsWord
dl = el.initLeft / steps
dt = el.initTop / steps
el.style.posLeft = el.style.posLeft - dl
el.style.posTop = el.style.posTop - dt
}
if (step >= steps)
{
el.style.posLeft = 0
el.style.posTop = 0
currentElement++
step = 0
}
if(currentElement < animateElements.length)
window.setTimeout("animate();", speed)
}
//-->
</script>
</head>

<body>
<table width="100%" border="0" align="center">
<tr>
<td height="30">&nbsp;</td>
</tr>

<tr>
<td align="center">
<div id="logo">
<img src="images/log_hor.gif" width="300" height="61"
border="0">
</div>

<div id="arznei">
<img src="images/arznei.gif" width="157" height="180"
border="0">
</div>

<div id="gras">
<img src="images/gras.gif" width="270" height="389"
border="0">
</div>
</td>
</tr>

<tr dynamicanimation="spiral" style=
"position: relative !important; left: 10 !important">
<td align="center" height="425">
<div id="krone">
<img src="images/krongold.gif" width="159" height="180"
border="0">
</div>
</td>
</tr>

<tr>
<td align="center">&copy; by <a href=
"http://www.it-netzwerkservice.net" target="_blank" title=
"Sie haben Fragen zu Netzwerken, Linux und Internet? Dann sind Sie hier richtig!">
IT-NETZWERKSERVICE</a>, 2004</td>
</tr>
</table>
</body>
</html>

[Archilles]

Das Original findet Ihr unter:

http://www.hofapotheke.de/homoeopa/homstart.htm

Wird aber nur vom IE durchgeführt nicht vom Netscape oder Konqueror.

Danke anda_skoa für Deinen Hinweis mit dem DOM.

Ausserdem kenne ich die Attribute
fptype="dynamicanimation",
relative !important; left: 10 !important",
dynamicanimation="spiral"

nicht. Die stehen in keinem meiner Lehrbücher, noch unter "SELFHTML: Version 8.0"

Gruß

Archilles

[BlueJay]

Auf die Schnelle:

Du bedienst den ollen NN4 und den genauso ollen IE4. IE5 macht die Spielchen vom IE4 noch mit, aber bei den etwas neueren Browsern dürften nur die DOM1-konformen Sachen greifen.

Also umdenken lernen, mit document.getElementById arbeiten und javascriptmäßig die Styles ändern (document.getElementById("krone").style.left=ix; u.s.w.)
"krone" das Id eines (,absolut positioniertes) Div.

so long,
BlueJay

[Lin728]

Die meisten (bis auf ältere) Browser sagen eh, was ihnen nicht passt.
Schau z.B. mal unter Mozilla->Tools->Web-Development-JavaScript-Console

Da bekommst du alle Fehler aufgezählt, die den jewiligen Browsern nicht passen.

[Jana]

Bei mir zeigt sich auch im IE6 keine Animation????

Schau mal bei
http://www.cross-browser.com/examples/pe4.html
Dort findest du Beispiele für elliptische Bewegungen.
Dieser Code eignet sich für fast alle Browser.

[Archilles]

Vielen Dank,

für die Hinweise. Vor allem der von Jana ist ganz fetzig. Jetzt versuche ich nur das Ganze zum Rotieren zu bekommen, wenn die Html-Datei geladen wird. Also nicht erst, wenn du irgendwo einen Startbutton drückst, sondern mit Vollendung des Ladevorgangs.

Also
<body onload="startCycle()" klappt nicht so wie ich es mir vorstelle. Jetzt löse ich das mit einem

<A onmouseover="startCycle()">
um die gesamte Tabelle.

Was aber unzufriedenstellend ist, da der Betrachter ja ohne Zutun angenehm überrascht sein sollte.:rolleyes:

Besten Dank und Gruß

Archilles

[Jana]

Probier es mal mit:
function windowOnload() {startCircle()};

Das funktioniert aber nur mit den Cross-Browser Dateien.

[Archilles]

Hallo Jana,

ich probier's wie folgt:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>HOF-Apotheke</title>
<meta name="GENERATOR" content="Quanta Plus">
<link rel="stylesheet" type="text/css" href=
"css/stylesheet.css">

<script src="cbe/cbe_core.js" type="text/javascript"></script>
<script src="cbe/cbe_event.js" type="text/javascript"></script>
<script src="cbe/cbe_slide.js" type="text/javascript"></script>
<script src="cbe/cbe_util.js" type="text/javascript"></script>
<script src="cbe/cbe_debug.js" type="text/javascript"></script>
<script type="text/javascript" language="JavaScript">
<!--

var ele1, ele2, ele3;
function windowOnload() {
init();
}
function init() {
ele1 = document.getElementById('ele1').cbe;
ele1.moveTo('center');
ele1.moveBy(-250,-50);
ele1.show();
ele1.sequence = new Array(
"ellipse(100,200,0,2000,0,-360)",
"ellipse(100,200,0,2000,0,360)",
"ellipse(100,50,2, 4000,0,1440)",
"ellipse(200,100,-2,4000,0,-1440)"
);
ele2 = document.getElementById('ele2').cbe;
ele2.moveTo('center');
ele2.moveBy(250,-50);
ele2.show();
ele2.sequence = new Array(
"ellipse(100,200,0,2000,0,-360)",
"ellipse(100,200,0,2000,0,360)",
"ellipse(100,200,0,4000,0,-720)",
"ellipse(100,200,0,4000,0,720)"
);
ele3 = document.getElementById('ele3').cbe;
ele3.moveTo('center');
ele3.show();
ele3.sequence = new Array(
"ellipse(50,100,0,5000,90,450)",
"ellipse(50,100,0,5000,-90,-450)"
);
document.forms['form1'].txtX.focus();
document.forms['form1'].txtX.select();
}
function handleSubmit() {
ele1.ellipse(
document.forms.form1.txtX.value,
document.forms.form1.
txtY.value,
document.forms.form1.txtI.value,
document.forms.form1.txtT.value,
document.forms.form1.txtS.value,
document.forms.form1.txtP.value
);
document.forms['form1'].txtX.focus();
document.forms['form1'].txtX.select();
return false;
}
function startCycle() {
ele1.startSequence();
ele2.startSequence();
ele3.startSequence();
}
//-->
</script>


</head>

<body onload="startCycle()">
<table width="100%" border="0" align="center">
<tr>
<td height="30">&nbsp;</td>
</tr>



<tr>
<td align="center" height="425">
<div id="ele1" class="clsCBE"><img src="images/krongold.gif" border="0"></div>
<div id="ele2" class="clsCBE"><img src="images/krongold.gif" border="0"></div>
<div id="ele3" class="clsCBE"><IMG src="images/log_hor.gif" border="0"></div>
</td>
</tr>


</table>
</body>
</html>

und explizit mit der Funktion

function windowOnload() {startCycle()};



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<title>HOF-Apotheke</title>
<meta name="GENERATOR" content="Quanta Plus">
<link rel="stylesheet" type="text/css" href=
"css/stylesheet.css">

<script src="cbe/cbe_core.js" type="text/javascript"></script>
<script src="cbe/cbe_event.js" type="text/javascript"></script>
<script src="cbe/cbe_slide.js" type="text/javascript"></script>
<script src="cbe/cbe_util.js" type="text/javascript"></script>
<script src="cbe/cbe_debug.js" type="text/javascript"></script>
<script type="text/javascript" language="JavaScript">
<!--

var ele1, ele2, ele3;
function windowOnload() {
init();
}
function init() {
ele1 = document.getElementById('ele1').cbe;
ele1.moveTo('center');
ele1.moveBy(-250,-50);
ele1.show();
ele1.sequence = new Array(
"ellipse(100,200,0,2000,0,-360)",
"ellipse(100,200,0,2000,0,360)",
"ellipse(100,50,2, 4000,0,1440)",
"ellipse(200,100,-2,4000,0,-1440)"
);
ele2 = document.getElementById('ele2').cbe;
ele2.moveTo('center');
ele2.moveBy(250,-50);
ele2.show();
ele2.sequence = new Array(
"ellipse(100,200,0,2000,0,-360)",
"ellipse(100,200,0,2000,0,360)",
"ellipse(100,200,0,4000,0,-720)",
"ellipse(100,200,0,4000,0,720)"
);
ele3 = document.getElementById('ele3').cbe;
ele3.moveTo('center');
ele3.show();
ele3.sequence = new Array(
"ellipse(50,100,0,5000,90,450)",
"ellipse(50,100,0,5000,-90,-450)"
);
document.forms['form1'].txtX.focus();
document.forms['form1'].txtX.select();
}
function handleSubmit() {
ele1.ellipse(
document.forms.form1.txtX.value,
document.forms.form1.
txtY.value,
document.forms.form1.txtI.value,
document.forms.form1.txtT.value,
document.forms.form1.txtS.value,
document.forms.form1.txtP.value
);
document.forms['form1'].txtX.focus();
document.forms['form1'].txtX.select();
return false;
}
function startCycle() {
ele1.startSequence();
ele2.startSequence();
ele3.startSequence();
}
function stopCycle() {
ele1.stopSequence();
ele2.stopSequence();
ele3.stopSequence();
}
//-->
</script>
<script type="text/javascript">
<!--
function windowOnload() {
startCycle();
}
// -->
</script>

</head>

<body onload="windowOnload()">
<table width="100%" border="0" align="center">
<tr>
<td height="30">&nbsp;</td>
</tr>

<tr>
<td align="center" height="425">
<div id="ele1" class="clsCBE"><img src="images/krongold.gif" border="0"></div>
<div id="ele2" class="clsCBE"><img src="images/krongold.gif" border="0"></div>
<div id="ele3" class="clsCBE"><IMG src="images/log_hor.gif" border="0"></div>
</td>
</tr>

</table>
</body>
</html>


Selbst wenn ich windowsonload() in dasselbe JavaScript-Tag setze:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<title>HOF-Apotheke</title>
<meta name="GENERATOR" content="Quanta Plus">
<link rel="stylesheet" type="text/css" href=
"css/stylesheet.css">

<script src="cbe/cbe_core.js" type="text/javascript"></script>
<script src="cbe/cbe_event.js" type="text/javascript"></script>
<script src="cbe/cbe_slide.js" type="text/javascript"></script>
<script src="cbe/cbe_util.js" type="text/javascript"></script>
<script src="cbe/cbe_debug.js" type="text/javascript"></script>
<script type="text/javascript" language="JavaScript">
<!--

var ele1, ele2, ele3;
function windowOnload() {
init();
}
function init() {
ele1 = document.getElementById('ele1').cbe;
ele1.moveTo('center');
ele1.moveBy(-250,-50);
ele1.show();
ele1.sequence = new Array(
"ellipse(100,200,0,2000,0,-360)",
"ellipse(100,200,0,2000,0,360)",
"ellipse(100,50,2, 4000,0,1440)",
"ellipse(200,100,-2,4000,0,-1440)"
);
ele2 = document.getElementById('ele2').cbe;
ele2.moveTo('center');
ele2.moveBy(250,-50);
ele2.show();
ele2.sequence = new Array(
"ellipse(100,200,0,2000,0,-360)",
"ellipse(100,200,0,2000,0,360)",
"ellipse(100,200,0,4000,0,-720)",
"ellipse(100,200,0,4000,0,720)"
);
ele3 = document.getElementById('ele3').cbe;
ele3.moveTo('center');
ele3.show();
ele3.sequence = new Array(
"ellipse(50,100,0,5000,90,450)",
"ellipse(50,100,0,5000,-90,-450)"
);
document.forms['form1'].txtX.focus();
document.forms['form1'].txtX.select();
}
function handleSubmit() {
ele1.ellipse(
document.forms.form1.txtX.value,
document.forms.form1.
txtY.value,
document.forms.form1.txtI.value,
document.forms.form1.txtT.value,
document.forms.form1.txtS.value,
document.forms.form1.txtP.value
);
document.forms['form1'].txtX.focus();
document.forms['form1'].txtX.select();
return false;
}
function startCycle() {
ele1.startSequence();
ele2.startSequence();
ele3.startSequence();
}
function stopCycle() {
ele1.stopSequence();
ele2.stopSequence();
ele3.stopSequence();
}
//-->
</script>
<script type="text/javascript">
<!--
function windowOnload() {
startCycle();
}
// -->
</script>

</head>

<body onload="windowOnload()">
<table width="100%" border="0" align="center">
<tr>
<td height="30">&nbsp;</td>
</tr>

<tr>
<td align="center" height="425">
<div id="ele1" class="clsCBE"><img src="images/krongold.gif" border="0"></div>
<div id="ele2" class="clsCBE"><img src="images/krongold.gif" border="0"></div>
<div id="ele3" class="clsCBE"><IMG src="images/log_hor.gif" border="0"></div>
</td>
</tr>

</table>
</body>
</html>


... klappt das nicht. Mal abgesehen davon, dass sich zwei windowOnload() gegenseitig stören, selbst ein Name test() statt dem zweiten windowOnload() hilft nichts. Denn in jedem dieser Fälle sehe ich nur den blanken Text und Hintergrund der HTML-Seite, aber keine der drei Grafiken.
Wohingegen folgende Version das gewünschte Ergebnis teilweise liefert. Teilweise, weil ich die Maus für den Animationsbeginn benötige.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<title>HOF-Apotheke</title>
<meta name="GENERATOR" content="Quanta Plus">
<link rel="stylesheet" type="text/css" href=
"css/stylesheet.css">

<script src="cbe/cbe_core.js" type="text/javascript"></script>
<script src="cbe/cbe_event.js" type="text/javascript"></script>
<script src="cbe/cbe_slide.js" type="text/javascript"></script>
<script src="cbe/cbe_util.js" type="text/javascript"></script>
<script src="cbe/cbe_debug.js" type="text/javascript"></script>
<script type="text/javascript" language="JavaScript">
<!--

var ele1, ele2, ele3;
function windowOnload() {
init();
}
function init() {
ele1 = document.getElementById('ele1').cbe;
ele1.moveTo('center');
ele1.moveBy(-250,-50);
ele1.show();
ele1.sequence = new Array(
"ellipse(100,200,0,2000,0,-360)",
"ellipse(100,200,0,2000,0,360)",
"ellipse(100,50,2, 4000,0,1440)",
"ellipse(200,100,-2,4000,0,-1440)"
);
ele2 = document.getElementById('ele2').cbe;
ele2.moveTo('center');
ele2.moveBy(250,-50);
ele2.show();
ele2.sequence = new Array(
"ellipse(100,200,0,2000,0,-360)",
"ellipse(100,200,0,2000,0,360)",
"ellipse(100,200,0,4000,0,-720)",
"ellipse(100,200,0,4000,0,720)"
);
ele3 = document.getElementById('ele3').cbe;
ele3.moveTo('center');
ele3.show();
ele3.sequence = new Array(
"ellipse(50,100,0,5000,90,450)",
"ellipse(50,100,0,5000,-90,-450)"
);
document.forms['form1'].txtX.focus();
document.forms['form1'].txtX.select();
}
function handleSubmit() {
ele1.ellipse(
document.forms.form1.txtX.value,
document.forms.form1.
txtY.value,
document.forms.form1.txtI.value,
document.forms.form1.txtT.value,
document.forms.form1.txtS.value,
document.forms.form1.txtP.value
);
document.forms['form1'].txtX.focus();
document.forms['form1'].txtX.select();
return false;
}
function startCycle() {
ele1.startSequence();
ele2.startSequence();
ele3.startSequence();
}
//-->
</script>


</head>

<body>
<A onmouseover="startCycle()"><table width="100%" border="0" align="center">
<tr>
<td height="30">&nbsp;</td>
</tr>
<tr>
<td align="center" height="425">
<div id="ele1" class="clsCBE"><img src="images/krongold.gif" border="0"></div>
<div id="ele2" class="clsCBE"><img src="images/krongold.gif" border="0"></div>
<div id="ele3" class="clsCBE"><IMG src="images/log_hor.gif" border="0"></div>
</td>
</tr>
</table></A>
</body>
</html>


Kann ich die Animation nicht auch starten mit



<BODY onload="windowOnload()">


und einem entsprechenden Codezusatz im JavaScript?


Archilles

[BlueJay]

Hallo Achilles,

Du suchst an der falschen Ecke.
Mozilla sagt mir, dass der Fehler in diesem Abschnitt liegt:


if((navigator.appName == "Netscape") &&
(parseInt(navigator.appVersion.substring(0, 1)) >= 4))


sollte wohl <=4 heissen!



{
for (index=document.layers.length-1; index >= 0; index--)
{
layer=document.layers[index]
if (layer.left==10000)
layer.left=0
}
}
return


Die jetzige Abfrage sammelt NN4 und *höher*, das knallt latürnich, weil die 5er-Engines den layer nicht mehr kennen.

[BlueJay]

noch was:

Abfrage auf NN4 und älter:
if (document.layers) ...

Abfrage auf IE4,5:
if (document.all) ...

Abfrage auf DOM1:
if (document.getElementById) ...

Indem du gezielt auf die zu verwendenden Elemente abfragst, hast du zusätzlich die Browser erwischt, die dir eine falsche Kennung vorspiegeln oder erst gar keine ausgeben.

so long,
BlueJay

[Archilles]

Hallo BlueJay,

ich weiß jetzt gar nicht was der Browservergleich noch soll. Obiges Script flattert prima.
Mir geht's jetzt nur noch um obiges Problem des Startens während Seitenaufrufs - siehe oben.

Mfg

Archilles

[Archilles]

Also Leute,

wenn ich folgende Seite mit dem Script aufrufe ...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>

<title>HOF-Apotheke</title>
<meta name="GENERATOR" content="Quanta Plus">
<link rel="stylesheet" type="text/css" href=
"css/stylesheet.css">

<script src="cbe/cbe_core.js" type="text/javascript"></script>
<script src="cbe/cbe_event.js" type="text/javascript"></script>
<script src="cbe/cbe_slide.js" type="text/javascript"></script>
<script src="cbe/cbe_util.js" type="text/javascript"></script>
<script src="cbe/cbe_debug.js" type="text/javascript"></script>
<script type="text/javascript" language="JavaScript">
<!--

var ele1, ele2, ele3;
function windowOnload() {
init();
}
function init() {
ele1 = document.getElementById('ele1').cbe;
ele1.moveTo('center');
ele1.moveBy(-250,-50);
ele1.show();
ele1.sequence = new Array(
"ellipse(100,200,0,2000,0,-360)",
"ellipse(100,200,0,2000,0,360)",
"ellipse(100,50,2, 4000,0,1440)",
"ellipse(200,100,-2,4000,0,-1440)"
);
ele2 = document.getElementById('ele2').cbe;
ele2.moveTo('center');
ele2.moveBy(250,-50);
ele2.show();
ele2.sequence = new Array(
"ellipse(100,200,0,2000,0,-360)",
"ellipse(100,200,0,2000,0,360)",
"ellipse(100,200,0,4000,0,-720)",
"ellipse(100,200,0,4000,0,720)"
);
ele3 = document.getElementById('ele3').cbe;
ele3.moveTo('center');
ele3.show();
ele3.sequence = new Array(
"ellipse(50,100,0,5000,90,450)",
"ellipse(50,100,0,5000,-90,-450)"
);
document.forms['form1'].txtX.focus();
document.forms['form1'].txtX.select();
}
function handleSubmit() {
ele1.ellipse(
document.forms.form1.txtX.value,
document.forms.form1.
txtY.value,
document.forms.form1.txtI.value,
document.forms.form1.txtT.value,
document.forms.form1.txtS.value,
document.forms.form1.txtP.value
);
document.forms['form1'].txtX.focus();
document.forms['form1'].txtX.select();
return false;
}
function startCycle() {
ele1.startSequence();
ele2.startSequence();
ele3.startSequence();
}
function stopCycle() {
ele1.stopSequence();
ele2.stopSequence();
ele3.stopSequence();
}
//-->
</script>
<script type="text/javascript">
<!--
function windowOnload() {
startCycle();
}
// -->
</script>

</head>

<body onload="startCycle()">
<table width="100%" border="0" align="center">
<tr>
<td height="30">&nbsp;</td>
</tr>

<tr>
<td align="center" height="425">
<div id="ele1" class="clsCBE"><img src="images/krongold.gif" border="0"></div>
<div id="ele2" class="clsCBE"><img src="images/krongold.gif" border="0"></div>
<div id="ele3" class="clsCBE"><IMG src="images/log_hor.gif" border="0"></div>
</td>
</tr>

</table>
</body>
</html>

..., dann bringt mir die JavaScript-Konsole folgende Fehlermeldung:



Fehler: ele1 has no properties
Quelldatei: http://eagle/hofapotheke/home.html
Zeile: 84

Ergo findet mein Script die id="ele1" in dem HTML-Tag <img> weiter unten nicht, weil die Seite noch nicht geladen ist. Wohingegen es das <a> raffelt, weil die Seite ja bereits geladen ist.

Also: Wie richte ich den <BODY onload="startCycle()"> ein, dass die Info's beim Laden bereits mit übermittel werden?

MfG

Archilles

[BlueJay]

Hallo BlueJay,
ich weiß jetzt gar nicht was der Browservergleich noch soll. Obiges Script flattert prima.
Mir geht's jetzt nur noch um obiges Problem des Startens während Seitenaufrufs - siehe oben.
Archilles

Hm, da der Teil, den du gepostet hattest, unvollständig war, habe ich versucht, mir den Rest anzuschauen, ohne Erfolg!

Dann eben die Webseite aufgerufen, und Mozilla hat im Script diesen Fehler gefunden, der durchaus den Start der Animation bei onload verhindert.

Sollte die Seite nicht mehr aktuell sein, hilft vielleicht ein Link auf die derzeit aktuelle Seite. Sorry, du bindest etlichen zusätzlichen Kram ein, wo mein Browser schon vorher "aussteigt", wenn er nur das gepostete Stück bekommt.

Wenn nur onload nicht durchgeführt wird, tritt der Fehler nicht bei der Animation selbst, sondern beim Initialisieren auf.

so long,
BlueJay

[Jana]

Hinweise zu "onload" findest du unter:
http://www.hftonline.com/forum/showthread.php?t=5442&highlight=BODY+onload+windowOnload

[anda_skoa]

Abfrage auf IE4,5:
if (document.all) ...

Abfrage auf DOM1:
if (document.getElementById) ...


In diesem Fall wäre wahrscheinlich die andere Reihenfolge anzuraten, also zuerst auf getElementById zu prüfen, dann erst auf die Ausnahme document.all
Manche Autoren benutzen dass nämlich andersrum und "erkennen" dann KHTML basierte Browser als IE :rolleyes:

Ciao,
_

[BlueJay]

In diesem Fall wäre wahrscheinlich die andere Reihenfolge anzuraten, also zuerst auf getElementById zu prüfen,


Da hast du recht, mittlerweile ist DOM1 Standard.
Und mit Browsern, die das Erkennen eines Elements türken, es dann trotzdem (noch) nicht beherrschen, bich ich auch schon reingefallen (Opera 5). Ist in meinen Augen aber ein Browserproblem.

(Fast) ganz korrekt wäre es, vor jeder Verwendung auf das Element zu prüfen, was man gerade benutzen will.

-

Und da sagt man, mit Umsetzen des DOM1 wird alles einfacher! Da scheint ja schon wieder ein ganzer Browserzoo da draussen!

so long,
BlueJay

[Archilles]

Also erstmal vielen Dank für die regen, informativen Beiträge.

Ich habe die Fehler selber gesehen und das Warum, weshalb onload im BODY-Tag nicht funktioniert, steht in einer 32-seitigen Doku in Englisch versteckt. Also das Crossover-Script läuft mit Attributen wie onclick oder mouseover, aber nicht onload.

Somit habe ich meine Lösung mit einem <A>-tag um den Gesamtkomplex gefunden.

Jedenfalls noch einmal vielen Dank und Entschuldigung, dass ich ein Weilchen diesen Thread nicht besucht hatte. Die Prioritäten lagen bei anders.

MfG

Archilles