4. Diashow erstellen
mit Überblend- und Verhülleffekte
Kostenloses Tool zum Programmieren von Diashows mit
Überblend- und Verhülleffekten für
Webseiten
Anleitung |
Programm testen |
Download
Wir brauchen: Computerraum
Mit dem Bildprogramm IrfanView haben wir schone
eine Reihe von Aufgaben bewältigt. Wir haben auch die
Exportfunktion in HTML getestet (Bildschau mit Thumbnails) und
die Stapelverarbeitung (Batch-Konvertierung und Umbennenung). Die
durchnummerierten Bilder aus der Stapelverarbeitung mit IrfanView
sind wie dazu geschaffen, um zeitsparend mit dem DiashowGenerator
eine Diashow zu programmieren.
WEBDAUM DiaShowGenerator für IE5+ und NS6 - Version:
1.2
********************************************************************************
Author: Michael Daum
Company: webdaum webdesign
Web Site: www.webdaum.de
Email: daum@kuenstlerhaus.net
© 2004 Michael Daum
********************************************************************************
Der DiashowGenerator erfordert keine großen
Programmierkenntnisse, ist leicht zu bedienen und verhilft jedem
in nur zehn Minuten zur eigenen Bilderschau.
Man sollte allerdings ein wenig über das Referenzieren in
HTML mit gültigen Pfadangaben Bescheid wisssen.
Hier zwei Links zum Nachschlagen:
NEUERUNGEN
Neu in Version 1.1 vom 11.Juli 2004 DiaShow spezial nur
IE5+:
- Diashow mit Überblendeffekten läuft jetzt auch
unter Opera.
- Beim Exportieren automatische Suche nach nicht erlaubten
Zeichen in den kritischen Feldern: Bilder, Bildtitel, Linkziele.
Jeder Fund wird in einem eigenen Meldefenster ausgegeben.
Neu in Version 1.2 vom 17.Juli 2004 DiaShow spezial nur
IE5+:
- In Bildvorauswahl kann die Anzahl der Stellen für die
automatische Nummerierung jetzt manuell auf maximal 4 Stellen
festgelegt werden. Standardeinstellung ist eine Stelle.
- Auch die Pfadangabe zu den Ordnern Bild- und Linkverzeichnis
wird jetzt bei der Eingabe kontrolliert. Bei einem Fund wird der
Fehler in einer Meldung angezeigt.
- Umfangreiche Hilfe zum Programm gleich in der obersten Zeile:
- Durch Klick auf "Hilfe aufrufen" kann diese Hilfedatei
(lies_mich.txt) eingeblendet werden.
- Auch neu ist der animierte Maus-Cursor. Er verwandelt sich
zum Fragezeichen, wenn man mit der Maus über ein Element
fährt, zu dem ein Hilfeeintrag vorhanden ist.
- Durch Drücken des Schalters "Kontextsensitive Hilfe
(an/aus)" wird dynamischer Hilfetext eingeblendet und
wiederabgeschaltet. Ein Druck auf die Tasten [alt h] und
Bestätigung durch die Eingabetaste hat den gleichen
Effekt.
VERSIONEN
Es gibt zwei Versioinen:
- DiaShow einfach für IE5+ und NS6
- DiaShow spezial nur IE5+
CREDITS
Version 1 verwendet das folgende Script:
--------------------------------------------------------------------------------
Name: avwJSImageRotator
Version: 1.0.1
Section: avwTools
Author: Tom Walker
Hint: Inserts image rotator implementations
Description: Contains 2 different implementations based on invocation preference
Copyright: Copyright (c) 2003 Avanteware. All Rights Reserved.
See readme.xml and license.txt for more information.
File Name: avwJSImageRotator.hks
File Size: 7893 bytes
File Date: 10-Jun-2003 07:33:24
--------------------------------------------------------------------------------
Version 2 verwendet das folgende Script:
//******************************************************************************
// Blending Image Slide Show Script-
// © Dynamic Drive (www.dynamicdrive.com)
// For full source code, visit http://www.dynamicdrive.com/
//******************************************************************************
VORGEHENSWEISE
- Die Zip-Datei wddSG1_*.zip entpacken nach dem Verzeichnis,
indem die HTML-Datei für die Diashow erstellt werden
soll.
- Die diaGenerator.html mit dem Browser öffnen.
- Die Version wählen:
- VERSION 1: DiaShow einfach IE5+ und NS6, oder
- VERSION 2: DiaShow spezial mit Überblendeffekten nur
IE5+, oder
- Start drücken (das Programm ermittelt den Browser Typ
und leitet zur geeigneten Version weiter)
- Die Diashow mit dem Programm erstellen. Die Vorgehensweise
und das Ergebnis unterscheiden sich etwas, je nach der
verwendeten Version.
- Vorschau aktualisieren nach Änderungen in den Feldern:
Hintergrundfarbe, Textfarbe, Linkfarbe, Schriftart,
Schriftgröße, Rahmen um Bilder.
- Diashow exportieren durch Druck auf rote Taste. Die Diashow
wird in neuem Fenster geöffnet.
- Bei Nichtgefallen ins alte Fenster wechseln, Änderungen
durchführen, Schritt 6 (rote Taste drücken) und 7
wiederholen, bis man mit dem Ergebnis zufrieden ist.
- Durch Klick auf die Vor- und Zurück-Knöpfe des
Browsers im Diashowfensters hat man jederzeit Zugriff auf alle
pro Sitzung erzeugten Versionen seiner Diashow.
- Zum Abschluss die bestgelungene Version, oder auch mehrere
Versionen, speichern ins Verzeichnis, indem sich der Diagenerator
befindet, als: "Webseite nur HTML (*.htm,*.html)" unter IE5+,
oder mit "save Page As" als Wunschtitel.html unter Netscape,
- Die nicht mehr benötigten Dateien wieder aus dem
Verzeichnis löschen.
INFO ÜBER DIE EINFACHE VERSION 1:
Diese Version läuft problemlos auf allen neueren
Browsern, auf älteren (NS4) fehlen die
Bildüberschriften. Die Diashow beginnt immer mit einem
zufällig gewählten Bild, und läuft dann endlos
weiter. Fährt man mit der Maus über ein Bild, so wird
der Text "Vergrößerung laden: 'Titel des Bildes'"
angezeigt. Zu jedem Bild kann ein Link programmiert werden, der
dann diese Vergrößerung öffnet.
INFO ÜBER DIE SPEZIAL VERSION 2:
Man hat die Wahl aus 25 Filtern für Überblend- und
Enthülleffekte (leider nur für den IE!). Der
Überblend-Effekt wird in NS6 und Opera nicht angezeigt, aber
die Dias und Bildüberschriften laufen problemlos, nur etwas
schneller als im IE.
Achtung: Bei der Verwendung der Verhüll-Effeke fehlen
die Bilder im NS6 und Opera!!!
Die Diashow beginnt mit dem ersten Bild, und läuft dann
endlos weiter. Man kann die Diashow in zwei Versionen
exportieren, entweder "Dia mit Links" [alt+l], oder "Nur Dia"
[alt+d]
VERZEICHNISSWAHL
In "Bildverzeichnis:" den korrekten Pfad zu dem Ordner
angeben, indem sich die Bilder befinden.
In "Linkverzeichnis:" den korrekten Pfad zu dem Ordner
angeben, indem sich die verlinkten Dateien befinden.
- Tipp 1: Kopieren sie die Bilder ins Verzeichnis "src" und
belassen Sie diese Einstellung.
- Tipp 2: Löschen Sie den Eintrag, wenn die Bilder im
selben Verzeichnis sind, wie die Diashow.
- Tipp 3: Befinden sich die Dateien in verschiedenen Ordnern,
diese(s) Feld(er) freilassen. Dann muss in "Bilder:" oder
"Linkziele:" für jede Datei zusätzlich zum Dateinamen
der Pfad zum Verzeichnis notiert werden.
Wenn Sie es nicht genau wissen, hier nochmal die Links zum
Nachschlagen:
BILDER HINZUFÜGEN
- VERSION 1:
Im Feld "Bilder:" die Dateien auflisten. Auflistung bitte in
Anführungszeichen und durch Kommas getrennt.
- VERSION 2:
Durch die Taste "Vorauswahl bearbeiten" [alt + p] ist das Tool
besonders zeitsparend bei der Verwendung von durchnummerierten
Bildern aus stapelverarbeitenden Bildprogrammen. Hier
Datei-Präfix (= Name)in das erste Feld eingeben, Anzahl der
Stellen für die fortlaufende Nummer in Zeichen eingeben und
Dateinamenserweiterung* aus Aufklappliste wählen. Rahmen
nach Wunsch. Um dann die gewünschte Anzahl von Bildern
hinzuzufügen, die Taste "Neues Bild" [alt n] mehrmals
drücken. Die fortlaufende Nummerierung wird vom Programm
erzeugt. Die Veränderung dieser automatisch erzeugten Namen
im Nachhinein und von Hand ist möglich.
*) Wenn die Dateinamenserweiterung unter Windows nicht
angezeigt wird, gehen Sie so vor : Wählen sie
Arbeitsplatz/Ansicht/Ordneroptionen und klicken Sie auf den
Karteireiter "Ansicht". Entfernen sie in "Dateien und Ordner" das
Häkchen vor "Dateinamenerweiterung bei bekannten Dateitypen
ausblenden"
TITEL HINZUFÜGEN
- VERSION 1:
Im Feld "Bildtitel:" die Bildüberschriften auflisten.
Auflistung bitte in Anführungszeichen und durch Kommas
getrennt. Wenn in den Bildüberschriften
Anführungszeichen (") verwendet werden sollen, müssen
diese mit einem Backslash (\) maskiert werden, also zum Beispiel:
Katze \"Mietzi\" beim Ballspielen Einen Backslash liefert eine
deutsche