 Fotoshow 01
Eine manuell gesteuerte Fotoshow mit (wahlweiser) Zufallsanzeige. Blättern-Funktion für Bilder und zum jeweiligen Foto zugehörigem Text. Bei mehreren Shows bietet sich außerdem die optionale Titeltexteinblendung für das Thema an.
|
|
Fotopräsentation - Vorschaugrafiken + Text - CSS-formatiert
Die Grafiken werden in diesem Beispiel 'Fotoshow 01' nicht vorgeladen sondern erst bei Bedarf vom Server abgerufen. Vor- und Nachteile können sie selbst abwägen.
 Siehe Beipiel 'Fotoshow 01-A' für ein identeisches Beispiel mit Vorladen.
Hier ein weiteres Anwendungsbeispiel ihre Fotos im Netz zu präsentieren: Anzeige vor einem Psydo-Monitor. Die Hintergrundgrafik steht in einer passenden Tabelle. Das Beispiel ist für eine Bildgröße von 400 x 300 Pixel optimiert.
Statt des Monitors könnte ich mir auch einen Psydo-Käfig (Vögel), ein Psydo-Aquarium (Fische), ein Psydo-Fensterbertt (Pflanzen) ... vorstellen.
Foto + Text mit Blättern-Funktion
Die Zufallsbildfunktion (optional) ist hier eingeschaltet!
Aufwand
- Script in den Head-Bereich kopieren
- Bildblock-Anweisungen in den Body-Bereich notieren
- Anzahl der Fotos im Script eintragen
- Bildquellen und Beschreibungstexte eintragen
- CSS-Notierungen in den Head-Bereich kopieren
Vorgaben und Optionen
- Bildgröße für dieses Beispiel: 400 x 300 (4 Testfotos im Download enthalten)
- 1 Hintergrundgrafik (im Download enthalten)
- 2 Navigationsbuttons (im Download enthalten)
- eigene Schriftformatiereung mit CSS
- optionaler Titeltext als Themenbeschreibung
- optionale Zufallsfunktion für das 1. Foto
Das Beispiel mit sämtlichen Dateien können sie als ZIP-Datei herunterladen (ca. 125 kB).
Natürlich könnten sie doe Fotoshow auch in einem Pop-Up-Window anzeigen. Größe des Windows: 500 x 480 Pixel (wenn Margin und Padding der Seite auf '0' eingestellt wurde)
 Beispiel ansehen
Variablen im Script
| Variable |
Inhalt hier |
Zweck |
| var Anzahl |
5 |
Anzahl der Bilder |
| var zufall |
"ja" |
1. Bild zufällig ja / nein |
| var Titeltext |
"Fotoserie Bahnhof Geilenkirchen" |
Titelanzeige über dem Foto |
| var Titeltext |
" " |
kein Titeltext |
| var Textfarbe |
"#8F8F8F" |
Textfarbe für den Titel |
Die Zufallsfunktion für die Anzeige des 1. Fotos können sie an- oder abwählen, indem sie der Variablen 'zufall' dem Wert 'ja' oder 'nein' zuweisen.
Falls sie die Anzeige des Titeltextes nicht wünschen, löschen sie den Text der der Variablen 'Titeltext' zugewiesen wird. Zwischen den Anführungszeichen soll dann kein Text verbleiben. Die Anführungszeichen dürfen nicht gelöscht werden
Grafiken und Texte einbinden
Die Grafiken und Texte werden hier im Beispiel 'Fotoshow01' direkt innerhalb der Abfrage-Funktion 'Auswahl()' notiert:
function Auswahl() {
if (random_number==1) {
bildsrc="testbild.gif";
bild_text="1 - Testbild";
}
if (random_number==2) {
bildsrc="pic2.jpg";
bild_text="2 - Bahnhof Geilenkirchen am Bahnsteig Richtung Düsseldorf";
}
if (random_number==3) {
...
Erklärung
Innerhalb eines HTML-Formulars ist ein Textbereiche als 'input' definiert. Oberhalb dieses Textbereichs wurde die Grafik notiert. Dies beiden Seitenelemente bekamen eine ID mit deren Hilfe man die Elemente ansprechen kann, um Änderungen anzuweisen.
Der Textbereich wurden an Ort und Stelle mit CSS-Anweisungen formatiert: Breite, Textformatierung, Hintergrundfarbe und Rand (unsichtbar).
Die Informationen für den Bild- und Textwechsel sind innerhalb des Scripts eingetragen. Zwei Informationen für jede Anzeige: Die URL für das Bild und die Informationen für den Text.
Abhängig der (Klick-)Aktion werden die jeweiligen Infos den beiden Seitenelementen zugeordnet und getauscht. Eine Prüfung veranlast nach Erreichen der letzten Informationen in der Liste der Eintragungen, dass die Anzeige wieder bei 1 beginnt.
Ist die Zufallsfunktion ausgewählt, wird das erste Bild mit dem zugehörigen Text zufällig ausgewählt. Ansonsten startet die Funktion bei Bild 1. Wegen dieser Zufallsoption, ist im Dokument an der Stelle der Bildanzeige lediglich ein (transpareter) Platzhalter notiert. So wird ein kurzes 'aufblitzen' des dort normalerweise eingebunden Bildes bei der Zufallsoption vermieden.
Für die Diashow kann (oben) eine Titelinformation eingetragen werden. Da der Titel der Diashow innerhalb der Hintergrundgrafik pixelgenau positioniert ist vermeide ich Verschiebungen der Anzeige dadurch, dass diese Info durch ein Javascript eingetragen wird. Die Formatierungen können abhängig von der gewählten Hintergrundgrafik mit CSS festgelegt werden:
CSS-Notierungen im Head
.text {
color:#846ADD;
font-size:11px;
border: 0px solid #9E8DE3;
background-color: #344147;
width:400px;
}
.bildrand {
border: 1px solid #000000;
}
In der Klasse '.text' werden die Anweisungen für die Gestaltung des Titeltextes festgelegt.
In der Klasse '.bildrand' werden die Anweisungen für den Bildrand festgelegt.
Nachteil dieses Beispiels
a) Die Fotos werden nicht vorgeladen!
b) Alle Fotos müssen in der Bildgröße 400 x 300 vorliegen. Andersformatige Fotos müssen durch eine Fotomontage auf dieses Maß gebracht werden.
Alternative Hintergrundgrafik 02
Zur Demo der Anwendung siehe oben: Demo 02
Dateiname: bg02.gif (Grafik rechtsklicken zum Download)
Einbindung:
<table background="bg02.gif" height="480" border="0" ...
Passende Buttons: vor02.gif + zurueck02.gif (rechtsklicken zum Download)
 
Einbindung:
<img src="zurueck02.gif" width="60" height="34" ...
<img src="vor02.gif" width="60" height="34" ...
Alternative Hintergrundgrafik 03
Zur Demo der Anwendung siehe oben: Demo 03
Dateiname: bg03.gif (Grafik rechtsklicken zum Download)
Einbindung:
<table background="bg03.gif" height="480" border="0" ...
Passende Buttons: vor03.gif + zurueck03.gif (rechtsklicken zum Download)
 
Einbindung:
<img src="zurueck03.gif" width="60" height="34" ...
<img src="vor03.gif" width="60" height="34" ...
|
Home • Bilder • Fotoshow-1
Bsp1
Download
