| Move Me | ||||
 |
 | |||
 |
||||
 |
 |
|||
| Lupe / config | ||||
|
 |
|||
| Navigation | ||||
| Move Me | ||||
|
| |||
|
||||
|
|
|||
| Lupe / config | ||||
|
|
|
|||
| Navigation | ||||
Bei den Reiseberichten und den Mangas haben Sie auch die Möglichkeit, die Bilder einfach als Diashow anzusehen. Die Systematik entspricht dem Popup.
Allerdings wird diesmal nicht die Seite bild.htm aufgerufen, sondern dia.htm und es werden einige Parameter mehr übergeben.
Da der Aufruf praktisch gleich ist, komme ich direkt zu der Seite dia.htm.
dia.htm
){kind=link}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Wird später geändert</TITLE>
<LINK HREF="style.css" REL="stylesheet" TYPE="text/css">
<META HTTP-EQUIV="content-type" CONTENT="text/html; CHARSET=ISO-8859-1">
<SCRIPT TYPE="text/javascript">
var dragobjekt = null; //was wird bewegt?
var dragx = 0; //relative Position im Objekt.
var dragy = 0;
var posx = 0; //absolute Position
var posy = 0;
var bild = opener.DiaBild; //Übernimmt die notwendigen Variablen aus dem aufrufenden Fenster
var anfang = opener.DiaBild; //bild = anzuzeigendes Bild; anfang = niedrigstes erlaubtes Bild
var ende = opener.DiaEnde; //ende = höchstes erlaubtes Bild
var pfad = opener.DiaPfad; //pfad = Pfadangabe mit bildname ohne die 3-stellige Zahl
var endung = opener.DiaEndung; //endung = Endung des Bildes
var dauer = opener.DiaDauer; //dauer = Anzeigedauer in Sekunden
var menueX = opener.DiaMenueX; //menueX = Position des Menüs in Pixeln
var menueY = opener.DiaMenueY; //menueY = Position des Menüs in Pixeln
var puffer = "000"; //Puffervariable bei der Errechnung des Bildnamens
var zahl = "000"; //Der Nummernteil des anzuzeigenden Bildes
var go = 1; //1 = Play; 0 = Pause
var pause1 = 5; //Letzte Anzeigedauer vor der Pause
var wechsel = window.setInterval("next()", dauer*1000); //Aufruf des nächsten Bild in dauer Sekunden.
document.Vorladen = new Array(); //Variablen zum Vorladen des nächsten Bild
document.Vorladen[0] = new Image();
function Init() { //Initialisierungsroutine
document.title = opener.DiaTitel; //Setze den Fenstertitel
window.defaultStatus = "Diashow - © Thomas Kirfel (www.kirfel.info)";
document.onmousemove = drag; //Initialisierung der Menübewegung
document.onmouseup = dragstop;
document.getElementById("iMenue2").style.left = menueX+"px"; //Positioniere Menü
document.getElementById("iMenue2").style.top = menueY+"px";
zahl = String(bild); //Wandle bild in String um
if (zahl.length == 1) zahl = "0"+String(zahl); //Generiere die führenden Nullen
if (zahl.length == 2) zahl = "0"+String(zahl);
document.getElementById("iBild").src = pfad+zahl+endung; //Setze den Bildnamen zusammen
document.getElementById("iBild").alt = opener.DiaTitel; //Beschreibung des Bildes = Titel
document.getElementById("iBild").title = opener.DiaTitel;
document.getElementById("iDauer").firstChild.data = dauer; //Aktualisiere im Menü die Anzeigedauer
document.getElementById("iMax").firstChild.data = ende; //Aktualisiere im Menü das letzte Bild
document.getElementById("iAkut").firstChild.data = bild; //Aktualisiere im Menü das erste Bild
puffer=String(bild+1); //Berechne den Namen des nächsten Bild
if (puffer.length == 1) puffer = "0"+String(puffer);
if (puffer.length == 2) puffer = "0"+String(puffer);
document.Vorladen[0].src = pfad+puffer+endung; //und lade es vor.
}
function dragstart(element) { //Leite Bewegung des Menüs ein
dragobjekt = element; //Erläuterung zum beweglichen Menü
dragx = posx - dragobjekt.offsetLeft;
dragy = posy - dragobjekt.offsetTop;
}
function dragstop() { //Beende Bewegung des Menüs
dragobjekt=null;
}
function drag(ereignis) { //Bewege Menü
posx = document.all ? window.event.clientX : ereignis.pageX;
posy = document.all ? window.event.clientY : ereignis.pageY;
if(dragobjekt != null) {
dragobjekt.style.left = (posx - dragx) + "px";
dragobjekt.style.top = (posy - dragy) + "px";
}
}
function next() { //Funktion zum Bildwechsel
window.clearInterval(wechsel); //lösche Interval
bild = bild + 1; //Erhöhe bild um 1
if (bild <= ende) { //Ist das ende erreicht, wenn nicht
zahl = String(bild); //Errechne den Namen des neuen Bildes
if (zahl.length == 1) zahl = "0"+String(zahl);
if (zahl.length == 2) zahl = "0"+String(zahl);
document.getElementById("iBild").src = pfad+zahl+endung; //und lade es vor.
document.getElementById("iAkut").firstChild.data = bild; //Aktualisiere im Menü die Anzeige
wechsel = window.setInterval("next()", dauer*1000); //Setze wieder das Interval.
}
else { //Das Ende ist erreicht
bild = ende; //Bild = letztes Bild
pause1 = dauer; //Speichere letzte Anzeigedauer
dauer = 0; //Dauer = 0
go = 0; //Pausemodus
document.getElementById("iDauer").firstChild.data = dauer; //Aktualisiere die Anzeige im Menü
document.getElementById("iPause").src = "grafik/play.gif";
document.getElementById("iPause").title = "Play";
document.getElementById("iDauer").firstChild.data = " ";
document.getElementById("iDauer2").firstChild.data = " Ende ";
}
puffer=String(bild+1); //Errechne den Namen des nächsten Bildes
if (puffer.length == 1) puffer = "0"+String(puffer);
if (puffer.length == 2) puffer = "0"+String(puffer);
document.Vorladen[0].src = pfad+puffer+endung; //und lade es vor
}
function slower() { //Funktion zum Verlangsamen der Show
dauer = dauer + 1; //Erhöhe Anzeigedauer
if (dauer > 99) dauer = 0; //Überlaufkontrolle
window.clearInterval(wechsel); //lösche Interval
document.getElementById("iDauer").firstChild.data = dauer; //Aktualisiere Ansicht im Menü
if (dauer != 0) { //Wenn keine Pause
wechsel = window.setInterval("next()", dauer*1000); //Setze Interval
document.getElementById("iPause").src = "grafik/pause.gif"; //Aktualisiere Menü
document.getElementById("iPause").title = "Pause";
document.getElementById("iDauer2").firstChild.data = " sek./Bild";
go = 1; //Playmodus
}
else { //Wenn Dauer 0 ist (Pause)
document.getElementById("iPause").src = "grafik/play.gif"; //Aktualisiere Menü
document.getElementById("iPause").title = "Play";
document.getElementById("iDauer").firstChild.data = " ";
document.getElementById("iDauer2").firstChild.data = " Pause";
go = 0; //Pausenmodus
pause1=99; //Letzte Dauer war 99 Sekunden
}
}
function faster() { //Funktion zum Beschleunigen der Show. Analog zum Verlangsamen.
dauer = dauer - 1;
if (dauer < 0) dauer = 99;
window.clearInterval(wechsel);
document.getElementById("iDauer").firstChild.data = dauer;
if (dauer != 0) {
wechsel = window.setInterval("next()", dauer*1000);
document.getElementById("iPause").src = "grafik/pause.gif";
document.getElementById("iPause").title = "Pause";
document.getElementById("iDauer2").firstChild.data = " sek./Bild";
go = 1;
}
else {
document.getElementById("iPause").src = "grafik/play.gif";
document.getElementById("iPause").title = "Play";
document.getElementById("iDauer").firstChild.data = " ";
document.getElementById("iDauer2").firstChild.data = " Pause";
go = 0;
pause1=1;
}
}
function gehezu(x) { //Funktion zum Anspringen einer Position;
bild = x; //Neues Bild ist der übergebene Parameter
if (bild <= ende) { //Wurde das Ende erreicht, wenn nicht
if (bild < anfang) bild = anfang; //Wenn Position zu klein, wechsle zum Anfang
zahl = String(bild); //Errechne den Namen des nächsten Bildes
if (zahl.length == 1) zahl = "0"+String(zahl);
if (zahl.length == 2) zahl = "0"+String(zahl);
document.getElementById("iBild").src = pfad+zahl+endung;
document.getElementById("iAkut").firstChild.data = bild; //Aktualisiere Ansicht im Menü
}
else { //Das Ende wurde erreicht
window.clearInterval(wechsel); //Lösche Interval
bild = ende; //Bild = letztes Bild
dauer = 0; //Anzeigedauer auf 0
document.getElementById("iDauer").firstChild.data = dauer; //Aktualisiere Ansicht im Menü
}
puffer=String(bild+1); //Berechne das nächste Bild
if (puffer.length == 1) puffer = "0"+String(puffer);
if (puffer.length == 2) puffer = "0"+String(puffer);
document.Vorladen[0].src = pfad+puffer+endung; //und lade es vor.
}
function startpause() { //Pausenfunktion
if (go == 1) { //z.Z. Playmodus
pause1 = dauer; //Speichere aktuelle Dauer
dauer = 0; //Dauer = 0
go = 0; //nun Pausenmodus
}
else { //z.Z. Pausenmodus
dauer = pause1; //gespeicherte Dauer laden
go = 1; //Playmodus
}
window.clearInterval(wechsel); //lösche Interval
document.getElementById("iDauer").firstChild.data = dauer; //Aktualisiere Ansicht im Menü
if (go == 0) {
document.getElementById("iPause").src = "grafik/play.gif";
document.getElementById("iPause").title = "Play";
document.getElementById("iDauer").firstChild.data = " ";
document.getElementById("iDauer2").firstChild.data = " Pause";
}
else {
document.getElementById("iPause").src = "grafik/pause.gif";
document.getElementById("iPause").title = "Pause";
document.getElementById("iDauer2").firstChild.data = " sek./Bild";
wechsel = window.setInterval("next()", dauer*1000); //Setze Interval
if (bild == ende) { //Wenn letztes Bild erreicht wurde
bild = 0; //gehe zum Anfang
next(); //und starte
}
}
}
//-->
</SCRIPT>
</HEAD>
<BODY ID="iBody" onLoad="Init()">
<DIV ID="iMenue2" onMouseDown="javascript:dragstart(this)" //Das bewegliche Menü
STYLE="POSITION:absolute; LEFT:10px; TOP:10px; PADDING:0px; MARGIN:0px; CURSOR:default; Z-INDEX:10">
<TABLE BORDER="1" CELLSPACING="0" CELLPADDING="2" FRAME="hsides" RULES="none">
<COLGROUP>
<COL WIDTH="20px">
<COL WIDTH="20px">
<COL WIDTH="80px">
<COL WIDTH="20px">
<COL WIDTH="30px">
<COL WIDTH="20px">
<COL WIDTH="40px">
<COL WIDTH="5px">
<COL WIDTH="30px">
<COL WIDTH="5px">
<COL WIDTH="20px">
<COL WIDTH="30px">
<COL WIDTH="20px">
<COL WIDTH="30px">
</COLGROUP>
<TR>
<TD><A HREF="javascript:slower()"><IMG SRC="grafik/down.gif" ALT="Schneller"
TITLE="Schneller"></A></TD>
<TD ID="iDauer" STYLE="BACKGROUND-COLOR:#0000FF; COLOR:#FFFFFF; CURSOR:move;
TEXT-ALIGN:right">0</TD>
<TD ID="iDauer2" STYLE="BACKGROUND-COLOR:#0000FF; COLOR:#FFFFFF; CURSOR:move;
TEXT-ALIGN:left"> sek./Bild</TD>
<TD><A HREF="javascript:faster()"><IMG SRC="grafik/up.gif" ALT="Langsamer"
TITLE="Langsamer"></A></TD>
<TD STYLE="TEXT-ALIGN:right"><A HREF="javascript:gehezu(1)">
<IMG SRC="grafik/first.gif" ALT="Zum 1. Bild" TITLE="Zum 1. Bild"></A>
</TD>
<TD><A HREF="javascript:gehezu(bild-1)">
<IMG SRC="grafik/before.gif" ALT="1 Bild zurück" TITLE="1 Bild zurück"></A>
</TD>
<TD ID="iAkut" STYLE="BACKGROUND-COLOR:#0000FF; COLOR:#FFFFFF; CURSOR:move;
TEXT-ALIGN:right">0</TD>
<TD STYLE="BACKGROUND-COLOR:#0000FF; COLOR:#FFFFFF; CURSOR:move; TEXT-ALIGN:right"> / </TD>
<TD ID="iMax" STYLE="BACKGROUND-COLOR:#0000FF; COLOR:#FFFFFF; CURSOR:move; TEXT-ALIGN:right">0</TD>
<TD STYLE="BACKGROUND-COLOR:#0000FF; COLOR:#FFFFFF; CURSOR:move"> </TD>
<TD><A HREF="javascript:gehezu(bild+1)"><IMG SRC="grafik/next.gif" ALT="1 Bild weiter"
TITLE="1 Bild weiter"></A></TD>
<TD><A HREF="javascript:gehezu(ende)"><IMG SRC="grafik/last.gif" ALT="Zum letzten Bild"
TITLE="Zum letzten Bild"></A></TD>
<TD><A HREF="javascript:startpause()"><IMG ID="iPause" SRC="grafik/pause.gif" ALT="Pause"
TITLE="Pause"></A></TD>
<TD STYLE="TEXT-ALIGN:right"><A HREF="javascript:self.close()"><IMG SRC="grafik/ende.gif"
ALT="Ende" TITLE="Ende"></A></TD>
</TR>
</TABLE>
</DIV>
<DIV ID="iInhalt" STYLE="POSITION:absolute; RIGHT:0px; TOP:0px; WIDTH:100%; HEIGHT:100%; OVERFLOW:auto;
PADDING:0px; MARGIN:0px; TEXT-ALIGN:center">
<IMG ID="iBild" SRC="test" ALT="Hier sollte das Bild kommen.">
</DIV>
</BODY>
</HTML>