Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
1 Einleitung
2 Webbrowser
3 JavaScript einbauen
4 Programmieren mit JavaScript
5 Datum
6 Zufall
7 Browserinformationen
8 Fenster
9 Formulare
10 Frames und Iframes
11 Grafiken
12 Cookies
13 Objekte und Arrays
14 Ereignisbehandlung
15 Fehlerbehandlung
16 DOM
17 DHTML und CSS
18 AJAX
19 XML
20 Web Services
21 AJAX-Frameworks
22 Plugins
23 Multimedia
24 Java
25 Serverseitige Technologien
26 JavaScript goes .NET
27 Code schützen
28 Top Secret: Passwortschutz
29 Signierte Skripte
30 JavaScript und Sicherheit
31 Navigation
32 Warenkorb
33 JavaScript-Bibliotheken
34 Referenz
35 Quellen im Web
36 Die Zukunft von JavaScript
Index
Download: - ZIP, ca. 9,2 MB
Buch bestellen
Ihre Meinung?
<< zurück | Galileo Computing / <openbook> / JavaScript und AJAX | vor >>
JavaScript und AJAX von Christian Wenz Das umfassende Handbuch
JavaScript und AJAX 839 S., mit DVD, 39,90 Euro Galileo Computing ISBN 3-89842-859-1 |
| Kapitel 11 Grafiken
|  | 11.1 Bildlein-Wechsle-Dich
|  |  | 11.1.1 Zugriff auf Grafiken
|  | 11.2 Animierte JPEGs
|  |  | 11.2.1 Eine Animation mit JavaScript
|  |  | 11.2.2 Bilder in den Cache laden
|  | 11.3 Animierte Navigation
|  |  | 11.3.1 Vorüberlegungen
|  |  | 11.3.2 Auf- und Zuklappen
|  |  | 11.3.3 Die einzelnen Menüpunkte
|  |  | 11.3.4 Verlinkung der Menüpunkte
|  |  | 11.3.5 Einbau in die HTML-Datei
|  | 11.4 Erweiterung der Navigation
|  |  | 11.4.1 Vorbereitungen
|  |  | 11.4.2 Leichte Änderungen
|  |  | 11.4.3 Doppeltes Mouseover
|  |  | 11.4.4 Das komplette Beispiel im Überblick
|  | 11.5 Tipps aus der Praxis
|  |  | 11.5.1 Vorladen – aber richtig
|  |  | 11.5.2 Ladestand einer Grafik
|  |  | 11.5.3 Fortschrittsanzeige
Was im Leben uns verdrießt, man im Bild gern genießt. – Johann Wolfgang von Goethe # Kapitel 11 Grafiken Das Image-Objekt ermöglicht einen der beliebtesten JavaScript-Effekte im World Wide Web. Es tauchte zum ersten Mal in einer Beta-Version des Netscape Navigator 3 auf. Damit war es erstmals möglich, mit JavaScript einzelne Grafiken eines HTML-Dokuments anzusprechen. Besonders pfiffig – und praktisch – war die Möglichkeit, Grafiken auszutauschen, was Animationen und andere grafische Effekte ermöglicht. Zu ungefähr derselben Zeit wurde die Version 3 des Microsoft Internet Explorer veröffentlicht. Da sich das Konkurrenzprodukt aus dem Hause Netscape noch in der Beta-Testphase befand, wurde das Image-Objekt nicht mehr in den JavaScript-Funktionsumfang des Internet Explorer übernommen. Die Macintosh-Variante des »IE3« kam etwas später als das Windows-Pendant heraus, und da sich das Image-Objekt bei Webdesignern großer Beliebtheit erfreute, wurde eine rudimentäre Unterstützung für den flotten Bildertausch in den Browser integriert. Ab Version 4 unterstützt der Internet Explorer übrigens auf allen Plattformen das Image-Objekt, und zwar vollständig. Mittlerweile ist allerdings jede Vorsicht unangebracht, da alle halbwegs modernen JavaScript-fähigen Browser das Objekt unterstützen. ## 11.1 Bildlein-Wechsle-Dich Doch was war es, das den Webdesignern so gut am Image-Objekt gefiel? JavaScript wurde bis dato hauptsächlich für Laufschriften und für Formulare benutzt. Hier war es zum ersten Mal auch möglich, mit JavaScript grafische Effekte zu schaffen. Eine der Hauptanwendungen wird lapidar mit »Mouseovers« bezeichnet. Fährt die Maus über eine Grafik, so ändert diese ihre Gestalt; befindet sich die Maus dann nicht mehr über der Grafik, nimmt diese wieder ihre ursprüngliche Gestalt an. Zwar ist es nicht möglich, eine Grafik zu manipulieren (etwa die Farbpalette zu verändern o. Ä.), aber man kann die Grafik einfach austauschen. In Abbildung 11.1 sehen Sie zwei Grafiken, galileo_over.gif und galileo_out.gif. Unser Ziel ist es nun, die Grafik galileo_out.gif anzuzeigen. Nur wenn sich der Mauszeiger über der Grafik befindet, soll die Grafik galileo_over.gif angezeigt werden. Hier klicken, um das Bild zu Vergrößern Abbildung 11.1 Die beiden Grafiken für den Mouseover-Effekt Der folgende Code erfüllt die Anforderungen; eine Erläuterung folgt anschließend.
    <html>
    <head>
    <title>Bildlein-Wechsle-Dich</title>
    <script type="text/javascript"><!--
    function over(){
       document.grafik.src = "galileo_over.gif";
    }
    function out(){
       document.grafik.src = "galileo_out.gif";
    }
    //--></script>
    </head>
    <body>
    <a href="http://www.galileo-press.de/">
       <img src="galileo_out.gif" name="grafik"
       onmouseover="over();" onmouseout="out();" />
    </a>
    </body>
    </html>
Wenn Sie überprüfen möchten, ob der Webbrowser überhaupt das Image-Objekt unterstützt, können Sie das wie folgt tun:
    if (document.images) {
       // mit dem Image-Objekt arbeiten
    }
Wenn es das Image-Objekt gibt, hat document.images einen Wert ungleich false – die if-Bedingung ist also erfüllt. Mit diesem kleinen Trick werden wir im Verlaufe dieses Buches noch an der einen oder anderen Stelle überprüfen, ob ein Browser ein bestimmtes Feature erfüllt oder nicht. ### 11.1.1 Zugriff auf Grafiken Es gibt mehrere Möglichkeiten, auf Grafiken in einem HTML-Dokument zuzugreifen:
| document.grafikname
| document.images[grafikname]
| document.images[grafiknummer]
Hierbei steht grafikname für den Wert des name-Attributs der jeweiligen Grafik und grafiknummer für die laufende Nummer der Grafik im HTML-Dokument. Da alle Grafiken im Array document.images gespeichert werden, beginnt die Zählung bei 0. Im Beispielcode von oben kann man also die Grafik folgendermaßen ansprechen:
| document.grafik
| document.images["grafik"]
| document.images[0]
In der Regel entscheidet man sich für die erste Methode; achten Sie also darauf, Ihren Grafiken eindeutige und einprägsame name-Attribute zu geben, und verwenden Sie dabei keine gefährlichen Zeichen wie etwa Punkte (dann müsste man Methode 2 oder 3 zum Ansprechen der Grafik verwenden). Die interessanteste und auch wichtigste Eigenschaft des Image-Objekts ist src: Das ist die URL der Grafik. Mit JavaScript hat man sowohl Lese- als auch Schreibzugriff auf diese Eigenschaft – ändert man also ihren Wert, wird die neue Grafik geladen. Das Thema »Dynamisches HTML« ist allerdings erst in Kapitel 17 an der Reihe. Sie können so nur eine Grafik durch eine andere austauschen; Rahmenparameter wie etwa Breite, Höhe und Position der Grafik können nicht verändert werden. Sie sollten also stets gleich große Grafiken verwenden; andernfalls wird die neue Grafik gestaucht oder gestreckt dargestellt. Somit sind zwei Zeilen des obigen Codes erklärt: Mit document.grafik. src="galileo_over.gif" wird die Grafik galileo_over.gif anstelle der alten Grafik geladen und dargestellt; analog erklärt sich die Wirkungsweise von document.grafik.src="galileo_out.gif". Die beiden Funktionen over() und out() werden durch die Event-Handler onmouseover und onmouseout aufgerufen. Sie erinnern sich: Wie der Name schon andeutet, wird der erste Event-Handler tätig, wenn die Maus über das Objekt (hier: den Link) fährt, und onmouseout tritt in Aktion, wenn die Maus das Objekt (den Link) wieder verlässt. »Nur« neuere Browser (Internet Explorer ab 4, Netscape ab 6) unterstützen die Event-Handler onmouseover und onmouseout beim <img>-Tag; wenn also nicht verlinkte Grafiken mit einem Mouseover-Effekt versehen werden sollen, muss – für maximale Browserkompatibilität – um die Grafik herum ein Link (etwa mit href="#") gebaut werden. Man kann trefflich darüber streiten, ob das heutzutage auch noch notwendig ist. Da aber eine grafische Veränderung meist mit einem Link einhergeht (ansonsten ist es oftmals sehr verwirrend für die Nutzer), kann man diesen Ansatz zumindest in Erwägung ziehen.
<< zurück | <top> | vor >>
Zum Katalog
JavaScript und AJAX bestellen
Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen? Ihre Meinung
Buchtipps
| JavaScript und AJAX - Das Video-Training
| Webseiten programmieren und gestalten
| XHTML, HTML und CSS
| CSS-Praxis
| AJAX
| PHP 5 und MySQL 5
| TYPO3 4.0
Shopping
Versandkostenfrei bestellen in Deutschland und Österreich Info

Copyright © Galileo Press 2007
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.

[Galileo Computing]
Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de