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.

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