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

Laufschrift mit DHTML

Mit dem neuen Feature des absoluten Positeonierens hält eine weitere Möglichkeit der Animation auf HTML-Seiten einzug. Und zwar durch 'Javascript': Die Programmiersprache hat nämlich Zugriff auf die verschiedenen Werte eines Stils und kann diese auslesen oder verändern. Wird aber die Positeon eines Stils verändert, ändert sich auch die Positeon seines Inhalts.Wie das funktioniert sehen Sie im folgenden Beispiel, in dem wir eine einfache Laufschrift programmieren. Sie zeigt das grundlegende Prinzip wie Dynamik auf eine HTML-Seite kommt.Zuerst benötigen wir einen eigenen Stil für die Laufschrift:

<style>
#laufschrift
{
positeon: absolute;
top: 0;
left: 0;
}

h2
{
background-color: red;
color: yellow;
}
</style>

Um das Ganze ein wenig aufzupeppen, haben wir die Überschrift <h2>, in der wir den Laufschrift ausgeben werden, umdefiniert - sie hat nun eine rote Hintergrundfarbe und die Zeichenfarbe 'Gelb'.Jetzt kommt das kleine Skript, das diesen Stil über den Bildschirm verschiebt. Eingeleitet wird es vom "<script>"-Tag in dem auch die Sprache steht und beendet mit "</script">:

<script language="JavaScript">

var x=0;
var delay=2;
var jump=4;

function doanim()
{
if(document.layers) document.laufschrift.left=x; else document.all.laufschrift.style.left=x;
x-=jump;

if(x<-434) x=0;

setTimeout("doanim()", delay);
}

</script>

Zu Beginn definieren wir einige, später benötigte Variablen:"x" enthält die Positeon des Stils, "delay" gibt die Verzögerung vor einem erneuten Verschieben an und "jump" die Anzahl Pixel, die "x" nach links weiterbewegt wird. Die Funktion "doanim()" führt die eigentliche Animation aus: Mit "document.laufschrift" sprechen wir den oben definierten Stil an, und mit "left" die entsprechende Eigenschaft, also die X-Positeon. Die setzen wir auf den Wert der Variablen "x". Hierbei müssen wir testen, welcher Browser verwendet wird und entsprechend andere Befehle verwenden. Dann ziehen wir von "x" den Betrag ab, um den der Stil und dessen Inhalt weiterspringen soll. Dabei wird "x" in unserem Beispiel negativ, also auch die Positeon des Stils - auch dies ist möglich, entsprechend "verschwindet" der Inhalt des Stils links aus dem Fenster. Die nächste Zeile vergleicht um wieviele Pixel der Stil schon hinausgeschoben wurde und setzt "x" gegebenenfalls zurück.mit "setTimeout()" geben wir an, wann unsere funktion wieder gestartet werden soll, damit den Stil den nächsten Schritt zu bewegen.
All dies muss im "<head>..</head>"-Block der HTML-Seite gespeichert werden. Der "<body>..</body>"-Teil sieht dann so aus:

<body onload="doanim()">

<div id=laufschrift>
<table><tr><td nowrap>
<h2>
Eine einfache Laufschrift mit DHTML...
Eine einfache Laufschrift mit DHTML...
Eine einfache Laufschrift mit DHTML...
Eine einfache Laufschrift mit DHTML...
</h2>
</table>
</div>

</body>

Mit der Angabe "onload=" weisen wir den Browser an, gleich nach dem Laden der Seite unsere Animationsfunktion zu starten.Jetzt folgt der Laufschrift-Text - umgeben von "<h2>..</h2>"-Tags, um ihn grösser und schöner zu machen, von einer Tabelle, damit er nicht am Seitenende umbricht (die Angabe "<td nowrap>" verhindert dies) und ganz aussen die Kennzeichnung durch unseren Stil.
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