Rheinwerk Computing < openbook > Rheinwerk Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

 <<   zurück
JavaScript und AJAX von Christian Wenz
Das umfassende Handbuch
Buch: JavaScript und AJAX

JavaScript und AJAX
839 S., mit DVD, 39,90 Euro
Rheinwerk Computing
ISBN 3-89842-859-1
gp Kapitel 11 Grafiken
  gp 11.1 Bildlein-Wechsle-Dich
    gp 11.1.1 Zugriff auf Grafiken
  gp 11.2 Animierte JPEGs
    gp 11.2.1 Eine Animation mit JavaScript
    gp 11.2.2 Bilder in den Cache laden
  gp 11.3 Animierte Navigation
    gp 11.3.1 Vorüberlegungen
    gp 11.3.2 Auf- und Zuklappen
    gp 11.3.3 Die einzelnen Menüpunkte
    gp 11.3.4 Verlinkung der Menüpunkte
    gp 11.3.5 Einbau in die HTML-Datei
  gp 11.4 Erweiterung der Navigation
    gp 11.4.1 Vorbereitungen
    gp 11.4.2 Leichte Änderungen
    gp 11.4.3 Doppeltes Mouseover
    gp 11.4.4 Das komplette Beispiel im Überblick
  gp 11.5 Tipps aus der Praxis
    gp 11.5.1 Vorladen – aber richtig
    gp 11.5.2 Ladestand einer Grafik
    gp 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.


Rheinwerk Computing

11.1 Bildlein-Wechsle-Dich  downtop

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.

Abbildung
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="https://www.rheinwerk-verlag.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.


Rheinwerk Computing

11.1.1 Zugriff auf Grafiken  toptop

Es gibt mehrere Möglichkeiten, auf Grafiken in einem HTML-Dokument zuzugreifen:

gp  document.grafikname
gp  document.images[grafikname]
gp  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:

gp  document.grafik
gp  document.images["grafik"]
gp  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
  
  Zum Katalog
Neuauflage: JavaScript
Neuauflage: JavaScript
bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: jQuery






 jQuery


Zum Katalog: Einstieg in JavaScript






 Einstieg in JavaScript


Zum Katalog: Responsive Webdesign






 Responsive Webdesign


Zum Katalog: Suchmaschinen-Optimierung






 Suchmaschinen-
 Optimierung


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




Copyright © Rheinwerk Verlag GmbH 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.


Nutzungsbestimmungen | Datenschutz | Impressum

Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, service@rheinwerk-verlag.de