Norbert Klein: Diashow mit Javascript

Beitrag lesen

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>