SUCHE MIT Google
Web virtualuniversity.ch
HOME DIDAKTIK ECDL ELEKTRONIK GUIDES HR MANAGEMENT MATHEMATIK SOFTWARE TELEKOM
DIENSTE
Anmeldung
Newsletter abonnieren
Sag's einem Freund!
VirtualUniversity als Startseite
Zu den Favoriten hinzufügen
Feedback Formular
e-Learning für Lehrer
Spenden
Autoren login
KURSE SUCHEN
Kurse veröffentlichen

Suche nach Datum:

Suche mit Schlüsselwort:

Suche nach Land:

Suche nach Kategorie:
PARTNER
ausbildung24.ch - Ausbildungsportal, Seminare, Kursen... 

 
HTMLopen.de - Alles was ein Webmaster braucht

 
PCopen.de - PC LAN Netze und Netzwerke - alles was ein IT Profi und Systemtechnicker braucht

TELEKOM

Präsentationen mit dem Internet Explorer

Kompatibilität: Ms Internet Explorer

Jedes Präsentationsprogramm bietet eine Reihe von Möglichkeiten zwischen zwei verschiedenen Seiten langsam überzublenden. Damit kann man den trockenen Wechsel zwischen Darstellungen schnell und einfach aufpeppen. Dasselbe gilt natürlich auch für Webseiten, wofür DHTML erstmals die technischen Grundlagen schafft.

Es gibt eine ganze Reihe von unterschiedlichen Möglichkeiten Wischblenden einzusetzen. Ganze Seiten können so übergeblendet werden oder nur einzelne Teil einer Seite ein- und ausgeblendet. Dabei zeigt sich der Internet Explorer hier dem Netscape Navigator überlegen: Während der Navigator von sich aus garnicht darauf ausgelegt ist, stellt der Explorer eine Reihe von Überblendeffekten zur Verfügung. Im folgenden stellen wir die Möglichkeiten des Explorers vor.

Die im Internet Explorer eingebauten Befehle zur einfachen Programmierung von Überblendeffekten, beschränken sich nicht nur auf Wischblenden, sondern es gibt auch andere Überblendungen, z.B. den "Jalousie-Effekt" (auf englisch "Venetian Blind") oder das punktweise "Hereinkriseln" der nächsten Szene. Auch ein weiches Überblenden, sog. "Faden" ist möglich.
Das Prinzip ist dabei sehr einfach und doch mächtig zugleich: Mit dem Befehl "apply()" teilt man dem Explorer mit, dass alle folgenden Änderungen an einer bestimmten Ebene nicht sofort ausgeführt, sondern in einem Zwischenpuffer gespeichert werden sollen. Sodann sind alle beliebigen Änderungen wie das Auswechseln eines Bildes, das Neupositeonieren einer Ebene oder das Modifizieren eines Textes möglich. Ist der gewünschte Zustand erreicht startet man mit dem Befehl "play()" die Überblendung. Welcher bestimmte Effekt angewandt werden soll, wird über den Parameter "Transiteon" eingestellt. Die Geschwindigkeit steuert man über den Parameter "Duration". Die Überblendung an sich findet dann vollkommen selbstständig statt.

Hier nun ein kleines Beispielskript, das trotz seiner Kürze schon eine Art Präsentationsprogramm à la "PowerPoint" darstellt.
Nach dem üblichen HTML-Anfang definieren wir im Skript-Teil die nötigen Variablen: "x" dient als Zeiger zum Durchwandern der einzelnen Textzeilen, "y" gibt den jeweils nächsten Überblendeffekt an und "delay" legt die Zeit für den Wechsel zum nächsten Text fest:

<html><head><title>IE-Transiteons</title>

<script language="javascript">
<!--

var x=0;
var y=0;
var delay=4000;

In einem Array speichern wir die Texte, die der Reihe nach erscheinen sollen:

text=new Array
(
'Virtual University...',
'...die Virtuelle Universität...',
'...präsentiert...',
'...die unglaublichsten...',
'...fantastischsten, niemals erahnten...',
'...DHTML-Überblendungen...',
'...die Sie je gesehen haben!!!'
);

Die folgende Routine ist der Kern unseres Skripts. Zuerst frieren wir alle Ausgaben in die Ebene "f1" mit dem "apply()"-Befehl ein. Dann ersetzen wir den Inhalt der Ebene mit "innerHTML" durch die aktuelle Textzeile, auf die "x" zeigt. Da wir nicht jedesmal denselben Effekt benutzen wollen, setzen wir ihn in der folgenden Zeile mit "Transiteon" neu, und zwar auf den Wert von "y". Das war’s an notwendigen Änderungen auch schon, die Überblendung kann mit dem "play()"-Befehl starten.

function ietrans()
{
f1.filters[0].apply();
f1.innerHTML=text[x];
f1.filters[0].Transiteon=y;
f1.filters[0].play();

Die nächsten beiden Zeilen sehen auf den ersten Blick etwas knifflig aus, sind aber gar nicht so schwer zu verstehen, wenn man sie sich in Ruhe ansieht. Sie benutzen den von C übernommenen "Konditionaloperator", der je nach Ergebnis einer Bedingung einen anderen Wert zurückliefert.
Gehen wir sie der Reihe nach durch: "x=" bedeutet, dass "x" einen neuen Wert zugewiesen bekommen soll. Aber welchen? Dies hängt von dem nachstehenden Vergleich ab: Ist "++x" kleiner als "text.length", also die Anzahl der Textzeilen in unserem Array, dann bekommt "x" den Wert... "x". Also bleibt alles beim alten? Nein, denn in dem "++x" versteckt sich ein sogenanntes "pre-inkrement", das bedeutet "x" wird um eins erhöht und dann zum Vergleich herangezogen. Ist der Wert von "x" nach dem Erhöhen allerdings gleich der Textzeilen im Array, dann ist das Resultat "0" und dies der neue Wert von "x". Der Zeilenzähler startet also von vorn.
Im Prinzip entspricht diese Konstruktion also einem "if() ... else ...", ist jedoch viel kürzer und prägnanter. Sie ist vor allem für die oft auftretenden "Ringschleifen" sehr nützlich, die wieder von vorn anfangen sollen, wenn der Endwert erreicht ist.
Die zweite Zeile, die "y" behandelt, sollte nun auch klar sein: "y" wird erhöht, dann verglichen - ist "y" kleiner als 23 bleibt "y" wie es ist, ansonsten wird "y" auf "0" gesetzt.

x=++x<text.length?x:0;
y=++y<23?y:0;

Nach einiger Zeit, wenn die Überblendung stattgefunden hat und der Nutzer den Text gelesen hat, soll die nächste Zeile ausgegeben werden. Wir müssen also unser Skript mit "setTimeout()" selbst aufrufen, dann folgt die abschliessende geschweifte Klammer unserer Hauptfunktion "ietrans()" und das Ende des Skript-Teils:

setTimeout("ietrans()", delay)
}
 
// -->
</script>

Jetzt folgt der HTML-Teil: Nach dem Schliessen des "head"-Tags starten wir im "body"-Tag nach dem Laden der Seite unser Skript. Als einzigen Inhalt definieren wir die Ebene, in der die Texte ausgegeben werden und die die Überblendung ausführen soll. Im "style"-Parameter setzen wir die Positeon der Ebene, die Grösse und die Farbe der Textausgabe und dass der Text zentriert werden soll. Hier bestimmten wir auch die Geschwindigkeit der Überblendung. Dann beenden wir auch schon unsere Seite, obwohl hier natürlich noch beliebige weitere HTML-Tags und Text kommen könnte.

</head>
<body onload="ietrans()">

<div id="f1" style="positeon: absolute; top:10; left:10; font-size:34; color: blue; text-align:center; filter: revealTrans(Duration=2)"></div>

</body></html>

Das folgende Beispiel funktioniert nur mit dem Internet Explorer

 

[ Das Beispiel zeigen ]

HTML Code für deine Website

[File ZIP runterladen, Bilder und andere Files sind im ZIP file inbegriffen]
DIPLOMARBEITEN UND BÜCHER

Diplomarbeiten zum Runterladen:

Suche im Katalog:
Architektur / Raumplanung
Betriebswirtschaft - Funktional
Erziehungswissenschaften
Geowissenschaften
Geschichtswissenschaften
Informatik
Kulturwissenschaften
Medien- und Kommunikationswissenschaften
Medizin
Psychologie
Physik
Rechtswissenschaft
Soziale Arbeit
Sozialwissenschaften


JOBS
HOME | E-LEARNING | SITEMAP | LOGIN AUTOREN | SUPPORT | FAQ | KONTAKT | IMPRESSUM
Virtual University in: Italiano - Français - English - Español
VirtualUniversity, WEB-SET Interactive GmbH, www.web-set.com, 6301 Zug

Partner:   Seminare7.de - PCopen.de - HTMLopen.de - WEB-SET.com - YesMMS.com - Ausbildung24.ch - Manager24.ch - Job und Karriere