<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="author" content="Werner Roepke">

  <title> สวนอีสเตอร์ </title>
  
  <style type="text/css">
   body { color:  white; }

a:link { text-decoration:none;  color:#e00000; } 
a:hover { text-decoration:none;   background-color:#ff0; }
</style>
  </head>
 <body bgcolor="black">
  <body><center> 
<p> 

  Der Ostergarten in der ev. Freikirche <a href= http://www.ev-freikirche-querum.de/Herzlich/Willkommen.html>Gemeinde Gottes</a> in Braunschweig
 
  
<p>
<p>
  
<div style="width: 500px; height: 375px">
  
  
<form name="Bild" action=""><img border="0" alt="Bild 1" src="wechsel-dateien/bild_1.jpg" width="500" height="375"></form>

<form name="Bild" action=""><img border="0" alt="Bild 2" src="wechsel-dateien/bild_2.jpg" width="500" height="375"></form>

<form name="Bild" action=""><img border="0" alt="Bild 3" src="wechsel-dateien/bild_3.jpg" width="500" height="375"></form>

<form name="Bild" action=""><img border="0" alt="Bild 4" src="wechsel-dateien/bild_4.jpg" width="500" height="375"></form>

<form name="Bild" action=""><img border="0" alt="Bild 5" src="wechsel-dateien/bild_5.jpg" width="500" height="375"></form>

<form name="Bild" action=""><img border="0" alt="Bild 6" src="wechsel-dateien/bild_6.jpg" width="500" height="375"></form>

<form name="Bild" action=""><img border="0" alt="Bild 7" src="wechsel-dateien/bild_7.jpg" width="500" height="375"></form>

<form name="Bild" action=""><img border="0" alt="Bild 8" src="wechsel-dateien/bild_8.jpg" width="500" height="375"></form>

<form name="Bild" action=""><img border="0" alt="Bild 9" src="wechsel-dateien/bild_9.jpg" width="500" height="375"></form>

</div> 
<a href="javascript:Animation(-1,0)"> </a>
<a href="javascript:Animation(1,10)"> คลิกรูปต่อไป &nbsp;  &nbsp;&nbsp;    </a>
</form>
 <iframe src="bibeltext_thai.html" name="laufschrift" height="170" width="350" align="center" scrolling="no" marginwidth="0" marginheight="0" frameborder="0">
</iframe>

<script type="text/javascript">
<!--
var aktuelles_Bild = 0;
var Timeout = 0;
var Animation_laeuft = 0;

for(var i=0;i<document.Bild.length;i++)
{
document.Bild[i].style.position = "absolute";
document.Bild[document.Bild.length-i-1].style.zIndex = i;
}

function Animation(vor_zurueck,Transparenz)
{
if(Animation_laeuft<1)
Uebergang(vor_zurueck,Transparenz);
}

function Uebergang(vor_zurueck,Transparenz)
{
var die_Transparenz = Transparenz;

Animation_laeuft = 1;
if(vor_zurueck>0)
{
if(aktuelles_Bild+1<document.Bild.length)
{
die_Transparenz -= 1;
document.Bild[aktuelles_Bild].style.filter = "Alpha(opacity="+die_Transparenz*10+")";
document.Bild[aktuelles_Bild].style.mozOpacity = die_Transparenz/10;
document.Bild[aktuelles_Bild].style.khtmlOpacity = die_Transparenz/10;
document.Bild[aktuelles_Bild].style.opacity = die_Transparenz/10;

if(die_Transparenz>0)
Timeout = 1;
else
{
Timeout = 0;
document.Bild[aktuelles_Bild].style.display = "none";
aktuelles_Bild++;
}
}
else
alert("Das ist das letzte Bild, Seite neu laden zum nochmaligen Ansehen!");
}
if(vor_zurueck<0)
{
if(aktuelles_Bild>0)
{
die_Transparenz += 1;
document.Bild[aktuelles_Bild-1].style.display = "";
document.Bild[aktuelles_Bild-1].style.filter = "Alpha(opacity="+die_Transparenz*10+")";
document.Bild[aktuelles_Bild-1].style.mozOpacity = die_Transparenz/10;
document.Bild[aktuelles_Bild-1].style.khtmlOpacity = die_Transparenz/10;
document.Bild[aktuelles_Bild-1].style.opacity = die_Transparenz/10;

if(die_Transparenz<10)
Timeout = 1;
else
{
Timeout = 0;
aktuelles_Bild--;
}
}
else
alert("Das ist das erste Bild!");
}
if(Timeout>0)
window.setTimeout("Uebergang("+vor_zurueck+","+die_Transparenz+")",500);
else
Animation_laeuft = 0;
}
//-->
</script>

เลื่อนเมาส์ที่ตัวอักษรเพื่อหยุดอ่าน
<p>
<p>
<p>
Aus der Luther-Bibel rev.1912
<!--Die Bilder befinden sich in einem div Container, dessen Größe du im rot geschriebenen Bereich an die Größe der Bilder anpassen musst.

Die Bilder selbst kannst du im grün geschriebenen Bereich hinzufügen und entfernen. Dabei musst du aber für jedes Bild eine form mit dem name "Bild" erstellen!

Die Geschwindigkeit des Fade-Effekts kannst du im blau markierten Bereich einstellen (Zeit ist in Millisekunden).

Zum Script selbst:
Beim Laden der Seite positioniert das Javascript alle forms mit dem Namen "Bild" nacheinander absolut. Das hat den Effekt, dass die Bilder dann wie ein Stoß Papiere übereinanderliegen (bei position: absolute rückt ja der übrige HTML Inhalt nach). Mit der CSS Eigenschaft z-index werden außerdem noch die Schichtpositionen der Bilder festgelegt.

Zum Wechseln der Bilder wird eine einzige Funktion verwendet, die, abhängig von einer Zahl, das vorherige oder das nächste Bild erscheinen lässt. Diese Funktion ruft sich so oft in der blau geschriebenen Zeit auf, bis die Transparenz 0 ist. Die Änderung der Transparenz geht dabei in 10er, bzw 0.1er Abständen. Klickt man beim ersten Bild auf "vorheriges Bild" oder beim letzten Bild auf "nächstes Bild", erscheint eine Alertbox.

Da nicht alle Browser die gleiche CSS Angabe für die Transparenz verstehen, verwendet das Javascript filter:Aplha(), -moz-opacity, -khtml-opacity und opacity gleichzeitig.
-->

  </body>
</html>