Katrin: Funktion wird ungewollt ausgeführt

Hallo liebe Forumsuser!
Ich habe hier ein großes Problem. Nämlich habe ich zwei Funktionen, die jeweils 2 verschiedene Diashows aufrufen sollen. Es soll so ablaufen: Nachdem fertig geladen wurde, wird eine Funktion ausgeführt. Bei einem Klick auf einen Link wird die eine Diashow gestopt und die andere aufgerufen. Aber so richitg funktioniert das nicht. Wie kann ich verhindern, dass beide Funktionen nach dem Laden automatisch ausgeführt werden? Wenn eine Diashow anfängt reicht das vollkommen aus:-) Und wie kann ich eine Funktion dazu bringen, dass sie aufhört und die andere startet?
Hier ist noch das, was ich bis jetzt erarbeitet hab
<html>
<head>
 <title>Design</title>
<link rel="STYLESHEET" type="text/css" href="css.css">
<script type="text/javascript">
// #### Berge ####
var Berg = new Array();
Berg[0] = new Image();
Berg[0].src = "bilder/bild1.png";

Berg[1] = new Image();
Berg[1].src = "bilder/bild2.png";

Berg[2] = new Image();
Berg[2].src = "bilder/bild3.png";

Berg[3] = new Image();
Berg[3].src = "bilder/bild4.png";

Berg[4] = new Image();
Berg[4].src = "bilder/bild5.png";
var i = 0;
function Berge() {
 if(i >= 5) {
  i = 0;
 } else {
  i++;
 }
 document.getElementById("pic").src= Berg[i].src;
}
window.setInterval("Berge()",5000);
// #### Ungarn ####
var Ungarn = new Array();
Ungarn[0] = new Image();
Ungarn[0].src = "bilder/bild6.png";

Ungarn[1] = new Image();
Ungarn[1].src = "bilder/bild7.png";

Ungarn[2] = new Image();
Ungarn[2].src = "bilder/bild8.png";

Ungarn[3] = new Image();
Ungarn[3].src = "bilder/bild9.png";

Ungarn[4] = new Image();
Ungarn[4].src = "bilder/bild10.png";

Ungarn[5] = new Image();
Ungarn[5].src = "bilder/bild11.png";

Ungarn[6] = new Image();
Ungarn[6].src = "bilder/bild12.png";
var a = 0;
function Ungarnbilder() {
 if(a >= 7) {
  a = 0;
 } else {
  a++;
 }
 document.getElementById("pic").src= Ungarn[a].src;
}
window.setInterval("Ungarnbilder()",5000);
</script>
</head>

<body>
 <div id="header"><img src="bilder/bild1.png" id="pic" alt="" width="800" height="246" style="border-style: none"></div>
</body>
</html>
Ich entschuldige mich für die vielen Fragen! Bin aber noch ziemlich neu und hab mir das so zusammengestellt und jetzt weiß ich nicht mehr weiter.
Vielen Dank! Liebe Grüße, Katrin

  1. Hallo Katrin,

    eigentlich würde ich bei Deinem Source vermuten, daß gar keine der beiden Diashows ausgeführt wird. Du definierst zwar die beiden Funktionen aber Du rufst sie nirgendwo auf.

    Wenn Du eine Diashow ausführen willst, dann mußt Du Deinen body anpassen.
    <body onLoad="Berge();">

    Zum Start der zweiten machst Du Dir einen Link in der Art
    <a href="#" onClick="Ungarn();"> Ungarn </a>

    ciao Andreas

    1. Hi!

      eigentlich würde ich bei Deinem Source vermuten, daß gar keine der beiden Diashows ausgeführt wird. Du definierst zwar die beiden Funktionen aber Du rufst sie nirgendwo auf.

      Die rufen sich von selbst auf. _Ich_ habe sie nirgends aufgerufen, aber sie starten trotzdem!

      Wenn Du eine Diashow ausführen willst, dann mußt Du Deinen body anpassen.
      <body onLoad="Berge();">

      Habe ich auch schon gehabt. Aber dann kommt ein Bild von Berge() und dann nur noch von Ungarn(). Ich vermute, dass eben beide Funktionen ausgeführt werden und dann wird Berge() durch Ungarn() ersetzt.
      Hier nochmal der komplette Quelltext:
      <html>
      <head>
       <title>Design</title>
      <link rel="STYLESHEET" type="text/css" href="css.css">
      <script type="text/javascript">
      // ################################### Berge ###################################
      var Berg = new Array();
      Berg[0] = new Image();
      Berg[0].src = "bilder/bild1.png";

      Berg[1] = new Image();
      Berg[1].src = "bilder/bild2.png";

      Berg[2] = new Image();
      Berg[2].src = "bilder/bild3.png";

      Berg[3] = new Image();
      Berg[3].src = "bilder/bild4.png";

      Berg[4] = new Image();
      Berg[4].src = "bilder/bild5.png";
      var i = 0;
      function Berge() {
       if(i >= 5) {
        i = 0;
       } else {
        i++;
       }
       document.getElementById("pic").src= Berg[i].src;
      }
      window.setInterval("Berge()",5000);
      // ################################### Ungarn ###################################
      var Ungarn = new Array();
      Ungarn[0] = new Image();
      Ungarn[0].src = "bilder/bild6.png";

      Ungarn[1] = new Image();
      Ungarn[1].src = "bilder/bild7.png";

      Ungarn[2] = new Image();
      Ungarn[2].src = "bilder/bild8.png";

      Ungarn[3] = new Image();
      Ungarn[3].src = "bilder/bild9.png";

      Ungarn[4] = new Image();
      Ungarn[4].src = "bilder/bild10.png";

      Ungarn[5] = new Image();
      Ungarn[5].src = "bilder/bild11.png";

      Ungarn[6] = new Image();
      Ungarn[6].src = "bilder/bild12.png";
      var a = 0;
      function Ungarnbilder() {
       if(a >= 7) {
        a = 0;
       } else {
        a++;
       }
       document.getElementById("pic").src= Ungarn[a].src;
      }
      window.setInterval("Ungarnbilder()",5000);
      </script>
      </head>

      <body onload="Berge()">
       <div id="header"><img src="bilder/bild1.png" id="pic" alt="" width="800" height="246" style="border-style: none" usemap="#Headpics"></div>
       <map name="Headpics">
        <area shape="rect" coords="503,232,545,240" href="#" alt="Berge" onclick="Berge()">
        <area shape="rect" coords="568,232,620,240" href="#" alt="Ungarn" onclick="Ungarn()">
        <area shape="rect" coords="645,232,59,240" href="#" alt="Segeln">
        <area shape="rect" coords="720,232,797,240" href="#" alt="Sonstiges">
       </map>
      </body>
      </html>

      Vielen Dank! Liebe Grüße, Katrin

      1. eigentlich würde ich bei Deinem Source vermuten, daß gar keine der beiden Diashows ausgeführt wird. Du definierst zwar die beiden Funktionen aber Du rufst sie nirgendwo auf.
        Die rufen sich von selbst auf. _Ich_ habe sie nirgends aufgerufen, aber sie starten trotzdem!

        Doch hast du.
        http://de.selfhtml.org/javascript/objekte/window.htm#set_interval
        Du musst den ersten Interval stoppen wenn er Fertig ist und dann einen zweiten aufrufen.

        Struppi.

        --
        Javascript ist toll (Perl auch!)
        1. Danke schön! Das wusste ich nicht!
          Liebe Grüße, Katrin

          1. Hi!
            Jetzt habe ich ein neues Problem. Firefox zeigt an, "Berg[i] has no properties" oder "Ungarn[a] has no properties" und stürzt dann ab. Was muss ich dagegen machen?
            Hier der Quelltext:#

            <html>
            <head>
             <title>Design</title>
            <link rel="STYLESHEET" type="text/css" href="css.css">
            <script type="text/javascript">
            // ################################### Berge ###################################
            var ZeigBerge = window.setInterval("Berge()",5000);

            var Berg = new Array();
            Berg[0] = new Image();
            Berg[0].src = "bilder/bild1.png";

            Berg[1] = new Image();
            Berg[1].src = "bilder/bild2.png";

            Berg[2] = new Image();
            Berg[2].src = "bilder/bild3.png";

            Berg[3] = new Image();
            Berg[3].src = "bilder/bild4.png";

            Berg[4] = new Image();
            Berg[4].src = "bilder/bild5.png";
            var i = 0;
            function Berge() {
             if(i >= 5) {
              i = 0;
             } else {
              i++;
             }
             document.getElementById("pic").src= Berg[i].src;
            }

            // ################################### Ungarn ###################################
            var Ungarn = new Array();
            Ungarn[0] = new Image();
            Ungarn[0].src = "bilder/bild6.png";

            Ungarn[1] = new Image();
            Ungarn[1].src = "bilder/bild7.png";

            Ungarn[2] = new Image();
            Ungarn[2].src = "bilder/bild8.png";

            Ungarn[3] = new Image();
            Ungarn[3].src = "bilder/bild9.png";

            Ungarn[4] = new Image();
            Ungarn[4].src = "bilder/bild10.png";

            Ungarn[5] = new Image();
            Ungarn[5].src = "bilder/bild11.png";

            Ungarn[6] = new Image();
            Ungarn[6].src = "bilder/bild12.png";
            var a = 0;
            function Ungarnbilder() {
            window.clearInterval(ZeigBerge);
             if(a >= 7) {
              a = 0;
             } else {
              a++;
             }
             document.getElementById("pic").src= Ungarn[a].src;
             window.setInterval("Ungarnbilder()",5000);
            }

            </script>
            </head>

            <body onload="Berge()">
             <div id="header"><img src="bilder/bild1.png" id="pic" alt="" width="800" height="246" style="border-style: none" usemap="#Headpics"></div>
             <map name="Headpics">
              <area shape="rect" coords="503,232,545,240" href="#" alt="Berge" onclick="Berge()">
              <area shape="rect" coords="568,232,620,240" href="#" alt="Ungarn" onclick="Ungarnbilder()">
              <area shape="rect" coords="645,232,59,240" href="#" alt="Segeln">
              <area shape="rect" coords="720,232,797,240" href="#" alt="Sonstiges">
             </map>
             <h1>Herzlich Willkommen</h1>
             <ul>
              <li><a href="#">Über mich</a></li>
              <li><a href="#">Galerie</a></li>
              <li><a href="#">Links</a></li>
              <li><a href="#">Artikel</a></li>
              <li><a href="#">Webprojekte</a></li>
              <li><a href="#">Blog</a></li>
              <li><a href="#">Gästebuch</a></li>
              <li><a href="#">Kontakt</a></li>
              <li><a href="#">Impressum</a></li>
             </ul>
            </body>
            </html>

            Vielen Dank! Liebe Grüße, Katrin

            1. Hallo Katrin!

              ...

              Firefox zeigt an, "Berg[i] has no properties"

              ...

                
              
              > var Berg = new Array();  
              > Berg[0] = new Image();  
              > Berg[0].src = "bilder/bild1.png";  
              >   
              > Berg[1] = new Image();  
              > Berg[1].src = "bilder/bild2.png";  
              >   
              > Berg[2] = new Image();  
              > Berg[2].src = "bilder/bild3.png";  
              >   
              > Berg[3] = new Image();  
              > Berg[3].src = "bilder/bild4.png";  
              >   
              > Berg[4] = new Image();  
              > Berg[4].src = "bilder/bild5.png";  
              > var i = 0;  
              > function Berge() {  
              >  if(i >= 5) {  
              >   i = 0;  
              >  } else {  
              >   i++;  
              >  }  
              >  document.getElementById("pic").src= Berg[i].src;  
              > }  
              
              

              Welche Properties könnte Berg[5] haben?

              Viele Grüße

              H-P Ortner

            2. Hi!
              Jetzt habe ich ein neues Problem. Firefox zeigt an, "Berg[i] has no properties" oder "Ungarn[a] has no properties" und stürzt dann ab. Was muss ich dagegen machen?
              function Berge() {
              if(i >= 5) {
                i = 0;
              } else {
                i++;
              }
              document.getElementById("pic").src= Berg[i].src;
              }

              Deine if-bedingung ist falsch. Wenn vor dem Aufruf von Berge()
              i=4 ist, kommt am Ende i=5 raus. Und Berg[5] hast Du nirgends
              definiert.

              Du kannst Dir auch das ganze if-Konstrukt sparen und
              stattdessen das hier verwenden:

              i = ++i % 5  bzw. im anderen Fall  a = ++a % 7;

              Dabei wird i zunächst um 1 erhöht und bei Erreichen des
              Wertes 5 wieder auf 0 gesetzt.

              Grüßle, Suat