smdesk.xsltXHTML-Darstellung einer Sitemap (Bilder) für Desktop-Computer2014-02-18HerbertSchiemannh.schiemann@herbaer.deAttribute im erzeugten XHTML-Dokument
Das erzeugte XHTML-Dokument enthält fünf Abschnitte
(body/div-Elemente):
Die Übersicht (div_main),
das Einzelbild (div_img),
"Klappfenster"
"Einstellung" (set_frame),
"Info" (about_frame) und
"Befehle" (help_frame)
und das "Hilfe-Fragezeichen" (btn_help).
Die Übersicht enthält unter der Überschrift zwei Abschnitte:
eine Übersicht über eine ausgewählte Bildergeschichte
(ID div_details)
und eine Übersicht über die Bildergeschichten
(ID div_urls).
Die ID-Werte sind:
div_main
Der Hauptabschnitt mit der Überschrift und den Übersichten.
div_details
Der Vorschaubilder-Abschnitt,
ein Unterabschnitt des Hauptabschnitts (ID div_main).
Er enthält zu jeder Bildergeschichte einen Unterabschnitt
mit den repräsentierenden Bildern.
Mittels Javascript und CSS-Regeln wird nur der Abschnitt zu einer ausgewählten
Bildergeschichte angezeigt.
det_SNR
Die Bildergeschichten werden nummeriert.
SNR steht für die Nummer einer Bildergeschichte.
det_SNR ist die ID
des Unterabschnitts (div-Element) von
div_details zu der Bildergeschichte.
Der Unterabschnitt enthält repräsentative Bilder der Bildergeschichte und
Verweise auf die Bildergeschichte und deren Galerie-Ansicht.
div_urls
Ein Unterabschnitt des Hauptabschnitts (ID div_main).
Er enthält zu jeder Bildergeschichte einen Eintrag.
sto_SNR
Die Übersicht über die Bildergeschichten (ID div_urls)
enthält zu einer Bildergeschichte an der Position (lfd. Nummer)
SNR einen Unterabschnitt mit der ID
sto_SNR.
but_SNR
Der Abschnitt mit der ID sto_SNR
enthält einen Knopf mit der ID
but_SNR.
Ein Klick auf diesen Knopf führt dazu,
dass der Abschnitt mit der ID
div_SNR angezeigt wird.
div_img
Das Feld (der Rahmen) des Einzelbildes.
Es wird immer nur entweder der Hauptabschnitt oder das Einzelbild angezeigt.
img_main
Das Einzelbild.
Die Quelle (Attribut src)
wird durch Javascript gesetzt.
set_frame
Popup-Fenster "Einstellung".
Das Dokument übernimmt die Einstellungen zum Bildlauf und zur Bilddarstellung,
die zu einer Bildergeschichte gespeichert sind.
Die hier vorgenommenen Änderungen werden nicht gespeichert.
Die Eingabeelemente mit gleicher Funktion hier in der Sitemap
und in einer Bildergeschichte müssen die selben ID-Werte haben.
Dann werden die gespeicherten Einstellungen aus der Bildergeschichte hier übernommen.
sel_imagesize
Auswahlfeld "Bildgröße" zur Auswahl eines Verzeichnisses.
Verschiedene Verzeichnisse enthalten die Bilder unter dem gleichen Dateienamen
in verschiedenen Qualitäten.
sel_view
Auswahlfeld "Bilddarstellung"
mit Optionen zur Anpassung der angezeigten Größe an das Bildfeld.
sel_imgframe
Auswahlfeld "Bildrahmen" mit Optionen zum Hintergrund (Bildrahmen).
sel_sequence
Auswahlfeld "Bildlauf":
Optionen zur Reihenfolge der Bilder beim automatischen Bildwechsel.
sel_duration
Zahleingabefeld "Anzeigedauer":
Wie lange soll ein Bild beim automatischen Bildlauf angezeigt werden?
inp_start
Die Schaltfläche "Start" (oder "Stop") im Fenster "Einstellung"
startet oder beendet den automatischen Bildlauf
und schließt das Fenster "Einstellung".
about_frame
Das Info-Fenster nennt die Menschen hinter der Website.
help_frame
Das Klappfenster "Befehle" zeigt die möglichen Tastatureingaben
zur Steuerung der Anzeige und zur Navigation an.
btn_help
Das "Hilfe-Fragezeichen"
Das erzeugte XHTML-Dokument verwendet
die folgenden Wörter in class-Attributen:
shown
Kennzeichnet einen sichtbaren Abschnitt
(div-Element),
Gegensatz zu hidden.
Der Hauptabschnitt (ID div_main) ist anfangs
so gekennzeichnet.
hidden
Kennzeichnet einen verborgenen Abschnitt
(div-Element),
Gegensatz zu shown.
Der Bildabschnitt (ID div_img) ist anfangs
so gekennzeichnet,
ebenso alle Unterabschnitte
(ID det_SNR)
des Vorschaubilder-Abschnitts (ID div_details).
Die Wörter hidden und shown
werden durch Javascript ausgetauscht.
hilite
Kennzeichnet in der Übersicht der Bildergeschichten (ID
div_urls)
den Abschnitt zu der hervorgehobenen Bildergeschichte,
deren Vorschaubilder angezeigt werden (ID div_details).
nohl
Kennzeichnet in der Übersicht der Bildergeschichten (ID
div_urls)
die Abschnitte zu allen Bildergeschichten,
deren Vorschaubilder nicht angezeigt werden (ID div_details).
Das sind alle Bildergeschichten außer der hervorgehobenen.
normal
Ein Bild (img-Element) wird in seiner normalen
("natürlichen" Pixel-) Größe angezeigt.
Das Wort bezeichnet die Anpassung der angezeigten Größe des Bildes
an den enthaltenden Abschnitt (div-Element als Rahmen).
Die anderen möglichen Wörter an Stelle von normal sind
fullwidth und fullheight.
popup
Ein div-Element als Klappfenster:
hier die div-Elemente mit den IDs
set_frame (Einstellung),
about_frame (Info-Fenster) und
help_frame (Befehle).
popinact
Ein nicht aktives (verborgenes) Klappfenster (div-Element).
popact
Ein aktives (sichtbares) Klappfenster (div-Element).
Die Wörter popinact und popact
werden durch Javascript ausgetauscht.
close
Ein Knopf, der ein Klappfenster schließt,
hier der Knopfe "Start" im Fenster "Einstellung"
inlimg
Ein div-Element,
dessen Hintergrund ein Vorschaubild zeigt.
transparent
Dieses Wort wird durch Javascript zum Bildrahmen (div_img)
gesetzt. Es bestimmt den Bildhintergrund.
Der Wert wird nicht direkt, sondern durch Javascript gesetzt.
Andere mögliche Werte an Stelle von transparent
sind grey und black.
grey
Dieses Wort wird durch Javascript zum Bildrahmen (div_img)
gesetzt. Es bestimmt den Bildhintergrund.
Der Wert wird nicht direkt, sondern durch Javascript gesetzt.
Andere mögliche Werte an Stelle von grey
sind transparent und black.
black
Dieses Wort wird durch Javascript zum Bildrahmen (div_img)
gesetzt. Es bestimmt den Bildhintergrund.
Der Wert wird nicht direkt, sondern durch Javascript gesetzt.
Andere mögliche Werte an Stelle von black
sind transparent und grey.
Die folgenden beiden Parameter dienen dazu,
aus der URL einer Bildergeschichte deren Kennung herauszufiltern.
Zuerst wird die Zeichenfolge nach der Kennung geesucht:
Danach wird die Zeichenfolge vor der Kennung gesucht:
In einer URL eines Bildes folgt nach dieser Zeichenkette der Dateiname des Bilddatei.
Lokalisierung abhängig von der Einstellung des Browsers
Wurzel
Der HTML-Rahmen.
Ein Mausklick auf ein
span-Elementen mit dem Attribut
class = btn
wirkt wie das Drücken der Taste mit dem Tastencode,
den das Attribut
data-code
angibt.
style/shortcut_icon.pngstylesheetstyle/smdesk.cssstyle/common.jsstyle/smdesk.jsonload = function () { initialize (); };