✔ Foto-Slideshow mit Javascript

CHAKKA1992

CHAKKA1992

Mitglied
Hallo,
ich habe auf meiner Homepage eine kleine FOTO-Show mit JavaScript eingebaut.

http://stumppi.st.funpic.de/FOTOS/slideshow.html

Der Quellcode der Seite sieht so aus:
HTML: 
<Html>
<title>
DIE SCHÖNSTEN URLAUBSBILDER--André Stumpp
</title>
<body bgcolor="FF6600">
<script type="text/javascript">
<!--
// Autor: Jürgen Asendorf 
// Bearbeitung: André Stumpp

var maxnr = 14; // Anzahl der Bilder
var pause = 6000; // Pause zwischen den Bildern
var aktnr = 0, halt = 1, an = 1

function bild(nr) {
 if (an) {
  aktnr += nr;
  if (aktnr < 1)
  aktnr = maxnr;
  else if (aktnr > maxnr)
  aktnr = 1;
  document.slide.src="image" + aktnr + ".JPG";
 }
}

function show(){
 if (!halt) {
  bild(1);
  setTimeout("show()",pause);
 }
}
// -->
</script>

<img src="startbild.jpg" width="600" height="450" border="1" alt="" name="slide">
<!-- Breite und Höhe der Bilder müssen hier geändert werden! -->

<p align="center">
<form name="menu-buttons">
 <input type=button value=" |< " onclick="aktnr=1;bild(0);">
 <input type=button value=" < " onclick="bild(-1)">
 <input type=button value="Play" onclick="halt=0;show()">
 <input type=button value="Stop" onclick="halt=1">
 <input type=button value="  > " onclick="bild(1)">
 <input type=button value=" >| " onclick="aktnr=maxnr;bild(0);">
</form>
</p>
<p align="left" align="bottom">
<font face="Comic Sans MS" color="blue" size=+1>
<a href="http://stumppi.st.funpic.de/index_Page694.htm">ZURÜCK</a>
</font>
</p>
</body>
</Html>

Nun möchte ich aber noch ein Paar Informationen hinzufügen. Diese sollen
- erscheinen wenn man auf einen Button drückt, oder
- Automatisch über oder unter das Bild „geschrieben“ werden.

Bitte helft mir dem Quelltext zu erweitern.

Mit freundlichen Grüßen

chakka1992
 
Packe ein beliebiges HTML-Element, welches Text aufnehmen kann(span z.B.) dorthin, wo der Text erscheinen soll.

Bei der jeweiligen Aktion(onclick, onmouseover) änderst du die innerHTML-Eigenschaft dieses Elementes, indem du ihr den gewünschten Text zuweist,...fertitsch.:)
 
ahm...also wenn ich das verstanden habe, muss ich den Quellcode so verändern:

<body type=button value="INFOS zum Bild" name="i-button">

...und dann halt noch das mit dem text, aber wie soll ich das machen, da das bild von dem javascript immer wieder gewechselt wird, ich dachte mir, dass ich eine varialble im JavaScript nehme, und diese dann für die einzelnen Bilder definiere, das geht bestimmt. Nur ich weis nicht wie :-( . Das könnte dann so aussehen:


<script>
//i ist die bildnummer welche vom scipt davor gegeben wurde
//z ist der text der angezeigt wird, wenn der button gedrückt wird
if (i=1){
var z = "Bild Nummer eins"
else if (i=2) z = "Bild nummer 2"
else z= "kein bild angezeigt"
}
//-->
</script>


wie binde ich das so zusammen, dass das ganze funktioniert?

chakka1992
 
ca so:
Code: 
<span id="desc"></span>

<script type="text/javascript">
//i ist die bildnummer welche vom scipt davor gegeben wurde
//z ist der text der angezeigt wird, wenn der button gedrückt wird
function funktion(i)
if (i==1)
  {
    z = "Bild Nummer eins";
  }
else if(i==2)
  {
    z = "Bild nummer 2";
  }
else 
  {
    z= "kein bild angezeigt";
  }
document.getElementById('desc').innerHTML=z;
}
//-->
</script>
 
Die Definition habe ich kapiert, kann mann die Ausgabe nicht irgendwie so machen, dass der Text kommt wenn mann auf einen Button drückt?(Der button ist immer da, es wird nur der text verändert.

Was auch passen würde wäre eine kleine tabelle oder so mit den Informationen

chakka1992
 
Was genau hält dich von einem Button ab?
Code: 
<input type="button" onclick="funktion(1)">
auch die Tabelle ist kein Problem...weise z halt den HTML-Code der Tabelle zu.
 
also der Quelltext sieht jetzt so aus:

HTML: 
<html>
<title>
DIE SCHÖNSTEN URLAUBSBILDER--André Stumpp
</title>
<body bgcolor="FF6600">
<script type="text/javascript">
<!--
// Autor: Jürgen Asendorf

var maxnr = 23; // Anzahl der Bilder
var pause = 6000; // Pause zwischen den Bildern
var aktnr = 0, halt = 1, an = 1

function bild(nr) {
 if (an) {
  aktnr += nr;
  if (aktnr < 1)
  aktnr = maxnr;
  else if (aktnr > maxnr)
  aktnr = 1;
  document.slide.src="image" + aktnr + ".JPG";
 }
}

function show(){
 if (!halt) {
  bild(1);
  setTimeout("show()",pause);
 }
}
//aktnr ist die bildnummer welche oben vergeben wird
//z ist der text der angezeigt wird, wenn der button gedrückt wird
if (aktnr==1)
  {
    z = "Bild Nummer 1";
  }
else if(aktnr==2)
  {
    z = "Bild nummer 2";
  }
else 
  {
    z= "kein bild angezeigt";
  }
//-->
</script>

<img src="startbild.jpg" width="600" height="450" border="1" alt="" name="slide">
<!-- Breite und Höhe der Bilder müssen hier geändert werden! -->

<br>
 <input type=button value=" |< " onclick="aktnr=1;bild(0);">
 <input type=button value=" < " onclick="bild(-1)">
 <input type=button value="Play" onclick="halt=0;show()">
 <input type=button value="Stop" onclick="halt=1">
 <input type=button value="  > " onclick="bild(1)">
 <input type=button value=" >| " onclick="aktnr=maxnr;bild(0);">


<p align="left" align="bottom">
<font face="Comic Sans MS" color="blue" size=+1>
<a href="http://stumppi.st.funpic.de/index_Page694.htm">ZURÜCK</a>
</font>
</p>
</body>
</html>


Nun muss ich noch die ausgabe mit button machen, kannst du mir genau sagen welcher quelltext jetzt noch fehlt?

chakka1992
 
Vielen dank, ich hab bei der funktion "alert()" etwas falsch programmiert es funktioniert!

Nur leider habe ich schon wieder ein Problem: es kommt immer die Meldung "Fehler..."
Wie kann das sein, da ich doch für jedes Bild die Meldung definiert habe?
Könnt ihr euch den Quelltext mal anschauen, und mir sagen was daran Falsch ist?
Ich stelle fest dass es an der Definition der Variable z liegt, oder? ;-)

HTML: 
<html>
<title>
FOTOALBUM
</title>
<body bgcolor="FF6600">
<script type="text/javascript">
<!--
// Autor: Jürgen Asendorf

var maxnr = 14; // Anzahl der Bilder
var pause = 6000; // Pause zwischen den Bildern
var i = 0, halt = 1, an = 1

function bild(nr) {
 if (an) {
  i += nr;
  if (i < 1)
  i = maxnr;
  else if (i > maxnr)
  i = 1;
  document.slide.src="image" + i + ".JPG";
 }
}

function show(){
 if (!halt) {
  bild(1);
  setTimeout("show()",pause);
 }
}
//i ist die bildnummer welche vom scipt davor gegeben wurde
//z ist der text der angezeigt wird, wenn der button gedrückt wird
if (i==1)
  {
    z = "Bild Nummer 1";
  }
else if(i==2)
  {
    z = "Bild nummer 2";
  }
else if(i==3)
  {
    z = "Bild nummer 3";
  }
else if(i==4)
  {
    z = "Bild nummer 4";
  }
else if(i==5)
  {
    z = "Bild nummer 5";
  }
else if(i==6)
  {
    z = "Bild nummer 6";
  }
else if(i==7)
  {
    z = "Bild nummer 7";
  }
else if(i==8)
  {
    z = "Bild nummer 8";
  }
else if(i==9)
  {
    z = "Bild nummer 9";
  }
else if(i==10)
  {
    z = "Bild nummer 10";
  }
else if(i==11)
  {
    z = "Bild nummer 11";
  }
else if(i==12)
  {
    z = "Bild nummer 12";
  }
else if(i==13)
  {
    z = "Bild nummer 13";
  }
else if(i==14)
  {
    z = "Bild nummer 14";
  }
else 
  {
    z= "FEHLER, es ist entweder das Startbild angezeigt, oder es liegt ein Programmierfehler vor. Ich bitte um ihr verständnis.";
  }
//-->
</script>

<img src="startbild.jpg" width="640" height="480" border="1" alt="" name="slide">
<!-- Breite und Höhe der Bilder müssen hier geändert werden! -->
<form name="menu-buttons">
 <input type=button value=" |< " onclick="i=1;bild(0);">
 <input type=button value=" < " onclick="bild(-1)">
 <input type=button value="Play" onclick="halt=0;show()">
 <input type=button value="Stop" onclick="halt=1">
 <input type=button value="  > " onclick="bild(1)">
 <input type=button value=" >| " onclick="i=maxnr;bild(0);">
 <input type=button onclick="alert(z)" value="Infos">
</form>
<p align="left" align="bottom">
<font face="Comic Sans MS" color="blue" size=+1>
<a href="http://stumppi.st.funpic.de/index_Page323.htm">ZURÜCK</a>
</font>
</p>
</body>
</html>


Seite im Internet: http://stumppi.st.funpic.de/FOTOS/slideshow.html


Ich freue mich über jede Hilfe!!

chakka1992
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück