Bastian: Diashow mit Javascript

SELF-Forum

Diashow mit Javascript

Bastian
– Informationen zu den Bewertungsregeln

Dieses Script habe ich und es funktioniert. Ich bekomme ein Bild angezeigt und bei jedem Klick auf das Bild wird das nächste angezeigt.
Mein Problem ist, daß ich jetzt zu jedem Bild auch noch einen Satz Text habe, der darunter angezeigt werden soll.
Den Text habe ich jetzt genauso in einem Array und Text[i] entspricht immer dem Bild[i].
Aber wenn ich den Text mit document.write mache, dann bekomme ich Text geschrieben, diesen aber natürlich nicht getauscht.
Hat jemand eine Idee? Wie mache ich das? TIA.

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

<html>
<head>
 <title></title>
<link rel="stylesheet" type="text/css" href="../include/format.css">

<script language="JavaScript">
<!--

var Bild = new Array();

Bild[0] = new Image();
Bild[0].src = "../images/bilder/panorama.jpg";

Bild[1] = new Image();
Bild[1].src = "../images/bilder/fjord.jpg";

Bild[2] = new Image();
Bild[2].src = "../images/bilder/glaskugel.jpg";

Bild[3] = new Image();
Bild[3].src = "../images/bilder/kueste.jpg";

Bild[4] = new Image();
Bild[4].src = "../images/bilder/pyramide.jpg";

Bild[5] = new Image();
Bild[5].src = "../images/bilder/ufo.jpg";

var i = 0;
var laenge = Bild.length ;

function swap()
{
 i++;

if (i == laenge)
 {
  i = 0;
 }
 document.images['tauschbild'].src = Bild[i].src ;

}

//-->
</script>

</head>

<body>

<a href="javascript:swap()" style="cursor:default;">
<img src="../images/bilder/panorama.jpg" name="tauschbild" width="320" height="240" alt="Bildaustausch" border="0"></a>

</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Diashow mit Javascript

    Norbert Klein Homepage des Autors
    – Informationen zu den Bewertungsregeln

    n'Abend. // </faq/#Q-05a>

    Mein Problem ist, daß ich jetzt zu jedem Bild auch noch einen Satz Text habe, der darunter angezeigt werden soll.
    Den Text habe ich jetzt genauso in einem Array und Text[i] entspricht immer dem Bild[i].

    Das ist doch schon ein guter Ausgangspunkt.

    Hat jemand eine Idee? Wie mache ich das?

    Am einfachsten wäre es, eine Textarea, oder ein Input-Feld unter das Bild zu setzen und dessen Inhalt dann entsprechend zu Ändern. Ansonsten kann man mit DHTML auch noch was reißen, ist aber schwerer, bzw. komplexer in der Umsetzung. Also, eine simple Textarea:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html><head><title></title>
    <link rel="stylesheet" type="text/css" href="../include/format.css">
    <script language="JavaScript">

    Besser: <script type="text/javascript">

    <!--
    var Bild = new Array();
    Bild[0] = new Image();
    Bild[0].src = "../images/bilder/panorama.jpg";
    Bild[1] = new Image();
    Bild[1].src = "../images/bilder/fjord.jpg";
    Bild[2] = new Image();
    Bild[2].src = "../images/bilder/glaskugel.jpg";
    Bild[3] = new Image();
    Bild[3].src = "../images/bilder/kueste.jpg";
    Bild[4] = new Image();
    Bild[4].src = "../images/bilder/pyramide.jpg";
    Bild[5] = new Image();
    Bild[5].src = "../images/bilder/ufo.jpg";

    Text = new Array();
     Text[0] = "Das ist ein Bild.";
     Text[1] = "Das ist auch ein Bild.";
     Text[2] = "Und das dritte Bild.";
     Text[3] = "Und das hier ist ein weiteres Bild.";
     Text[4] = "Das ist das vorletzte Bild.";
     Text[5] = "Und das letzte Bild.";

    var i = 0;
    var laenge = Bild.length;
    function swap()
    {
    i++;
    if(i == laenge){i = 0}
    document.images['tauschbild'].src = Bild[i].src;

    document.bild.beschreibung.value = Text[i];

    }
    //-->
    </script>
    </head><body>
    <a href="javascript:swap()" style="cursor:default;"><img src="../images/bilder/panorama.jpg" name="tauschbild" width="320" height="240" alt="Bildaustausch" border="0"></a>

    <form action="" name="bild"><textarea name="beschreibung" cols="24" rows="2" readonly>Beschreibung des Bildes</textarea></form>

    </body></html>

    Die Textarea kann natürlich mit Hilfe von CSS ihrer Umgebung entsprechend formatiert werden.

    Gruß
    Norbert // </faq/#Q-05c>

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Diashow mit Javascript

      Bastian
      – Informationen zu den Bewertungsregeln

      Ja, erstmal vielen Dank.

      Die Textarea kann natürlich mit Hilfe von CSS ihrer Umgebung entsprechend formatiert werden.

      Ja, das habe ich mir auch schon überlegt, aber ich habe dann immer den Scrollbalken von der Textarea, den ich nicht wegbekomme. Designtechnisch sieht das dann bei mir gar nicht gut aus.
      Ich kann zwar mittels css, den Scrollbars die gleiche Farbe geben wie der Hintergrund, so daß man nichts davon sieht, aber das funktioniert dann ja nur im Internet Explorer.

      So richtet gefällt mir das deswegen nicht. Die Beschreibungen mit auf die Bilder schreiben gefällt mir aber auch nicht wirklich.

      Hat sonst noch jemand eine Idee?

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Diashow mit Javascript

        Norbert Klein Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Hallo Bastian.

        ich habe dann immer den Scrollbalken von der Textarea, den ich nicht wegbekomme.

        overflow:auto; (http://selfhtml.teamone.de/css/eigenschaften/positionierung.htm#overflow)

        Gruß
        Norbert

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Diashow mit Javascript

          Bastian
          – Informationen zu den Bewertungsregeln

          Ja. Da hab ich auch schon dran gedacht, aber leider gibt auch das nicht genau den gewünschten Erfolg, denn:

          »»Beachten Sie:
          »»Netscape 4.x kennt diese Eigenschaft nicht.

          Aber im Notfall werde ich wohl trotzdem damit arbeiten und mit für Netscape was anderes überlegen.

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln