Gnoll: OnClick Bilderfolge

SELF-Forum

OnClick Bilderfolge

Gnoll
– Informationen zu den Bewertungsregeln

Hallo erstmal ;)
Ich kenne mich so gut wie garnicht mit JavaScripts aus, und bin deshalb auf Seiten wie diese angewiesen...
Nun zu meinem Problem:
Ich habe 3 Bilder z.B. 1.bmp, 2.bmp und 3.bmp
Jetzt möchte ich eine Bilderfolge definieren und zwar soll das Bild 1.bmp bei onClick durch 2.bmp ersetzt werden. Das alleine würde ich ja gerade noch so hinbekommen aber nachdem 1.bmp in 2.bmp geändert wurde, möchte ich erreichen ,dass bei wiederholtem onClick auf nun 2.bmp, 2.bmp durch 3.bmp ausgetauscht wird. Bei einem click auf 3.bmp soll wieder 1.bmp angezeigt werden.
Der Übergang soll keine Effekte haben, sondern es soll einfach nur das Bild getauscht werden.
Tut mir Leid wenn das etwas unverständlich klingt aber ich kenne mich nunmal wirklich nicht gut aus!
Mit freundlichen Grüßen

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. OnClick Bilderfolge

    wahsaga Homepage des Autors
    – Informationen zu den Bewertungsregeln

    hi,

    Ich kenne mich so gut wie garnicht mit JavaScripts aus, und bin deshalb auf Seiten wie diese angewiesen...

    das soll hoffentlich nicht heissen, dass du kompletten code von uns haben willst ...

    Nun zu meinem Problem:
    Ich habe 3 Bilder z.B. 1.bmp, 2.bmp und 3.bmp

    das ist in der tat ein problem, das BMP kein geeignetes bildformat für's web ist.
    wähle GIF, JPEG oder PNG stattdessen.

    Jetzt möchte ich eine Bilderfolge definieren und zwar soll das Bild 1.bmp bei onClick durch 2.bmp ersetzt werden. Das alleine würde ich ja gerade noch so hinbekommen aber nachdem 1.bmp in 2.bmp geändert wurde, möchte ich erreichen ,dass bei wiederholtem onClick auf nun 2.bmp, 2.bmp durch 3.bmp ausgetauscht wird. Bei einem click auf 3.bmp soll wieder 1.bmp angezeigt werden.

    was hast du bisher versucht ...?

    ich würde vorschlagen, die bildnamen in einem array abzulegen.
    dann kannst du sehr bequem prüfen, ob deine zählvariable array.length überschreitet, und in dem fall wieder von vorne beginnen.

    zum austauschen von bildquellen per JS generell schau dir http://selfhtml.teamone.de/javascript/beispiele/buttons.htm an.

    wenn du dich ein bisschen in das javascript-kapitel von self einliest, sollte das ganze kein grosses problem sein.

    gruss,
    wahsaga

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

  2. OnClick Bilderfolge

    Carsten
    – Informationen zu den Bewertungsregeln

    Hallo Gnoll,

    1. Lerne JavaScript... :)

    2. Das Script:

    var pics = new Array('pfad1','bild2','bild3') //Hier die Bilder mit Pfad

    function changeImage () {

    var bild = document.getElementById('bild');
    var actPath = bild.src;

    for (i = 0; i < pics.length; i++) {
    if ( actPath == pics[i] ) {
    if ( i == pics.length - 1 ) {
    // Bild 1 wieder laden...
    bild.src = pics[0]
    }
    else {
    bild.src = pics[i + 1]
    }
    }
    }
    }

    3. Musst du deinem Bild die id="bild" geben damit das funktioniert. Eventuell bekommst du etwas ärger mit den Pfadangaben, wenn du diese komplett in das Array einträgst, sollte es aber gehen.

    Viel Spass damit.

    Gruß

    Carsten

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. OnClick Bilderfolge

      Gnoll
      – Informationen zu den Bewertungsregeln

      Hallo Gnoll,

      1. Lerne JavaScript... :)

      2. Das Script:

      var pics = new Array('pfad1','bild2','bild3') //Hier die Bilder mit Pfad

      function changeImage () {

      var bild = document.getElementById('bild');
      var actPath = bild.src;

      for (i = 0; i < pics.length; i++) {
      if ( actPath == pics[i] ) {
      if ( i == pics.length - 1 ) {
      // Bild 1 wieder laden...
      bild.src = pics[0]
      }
      else {
      bild.src = pics[i + 1]
      }
      }
      }
      }

      1. Musst du deinem Bild die id="bild" geben damit das funktioniert. Eventuell bekommst du etwas ärger mit den Pfadangaben, wenn du diese komplett in das Array einträgst, sollte es aber gehen.

      Viel Spass damit.

      Gruß

      Carsten

      Danke für deine Hilfe!
      Ich habe es asuprobiert aber es funktioniert nicht :,(
      Hier der Quellcode:
      <html>
      <head>
      <title>Switch</title>
      <script language="javascript">
      var pics = new Array('bild.gif','bild2.gif','bild3.gif')

      function changeImage () {

      var bild = document.getElementById('bild');
      var actPath = bild.src;

      for (i = 0; i < pics.length; i++) {
      if ( actPath == pics[i] ) {
      if ( i == pics.length - 1 ) {
      bild.src = pics[0]
      }
      else {
      bild.src = pics[i + 1]
      }
      }
      }
      }

      </script>
      </head>

      <body bgcolor="#93BBD2">

      <h2 align="center"><a name="Switch">Switch</a></h2>
      <div align="center"><center>

      <table border="0" width="80%">
      <tr>
      <td width="50%" align="center"><img src="bild.gif" onclick="changeimage ()">
      </td>
      </tr>
      </table>
      </center>
      </body>
      </html>

      Wenn ich auf das Bild klicke kommt "Fehler auf der Seite"!
      mfg

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. OnClick Bilderfolge

        wahsaga Homepage des Autors
        – Informationen zu den Bewertungsregeln

        hi,

        bitte zitiere sinnvoll, nur das worauf du dich konrekt beziehst.
        lies bitte mal </faq/#Q-09a> und http://learn.to/quote.

        1. Musst du deinem Bild die id="bild" geben damit das funktioniert.

        und wo hast du das umgesetzt?

        <td width="50%" align="center"><img src="bild.gif" onclick="changeimage ()">

        ich kann dies hier nicht erkennen.

        gruss,
        wahsaga

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln