Grafiken

Als nächstes noch einige Hinweise zu Grafiken. Häufig benötigen Grafiken wegen der großen Datenmenge einige Zeit für den Übertrag über das Netz. Es empfiehlt sich daher die Größe des Bildes anzugeben. Der Browser lässt dann zunächst eine entsprechende leere Fläche und stellt wenigstens den Rest der Seite (Textbereiche) dar. Um dem Betrachter vorab schon einmal eine Grobstruktur zu geben kann die Grafik auch "interlaced", d.h. die Zeilen werden in größeren Abständen übertragen und danach die Zwischenzeilen aufgefüllt, so dass die Feinheiten zusehends besser erkennbar sind. Hierzu ist ein Grafikprogramm nötig, das solche GIF-Dateien (GIF 89A) produziert. Es können auch animierte GIF-Dateien erzeugt werden. Diese bestehen aus einer Folge von Bildern, welche nacheinander im selben Rahmen angezeigt werden. Auch hierzu ist geeignete Grafiksoftware nötig.

Beispiel 9

Darstellung im BrowserAnzeige des Quelltextes


Mapping

Sicher sind Ihnen im Internet schon Bilder begegnet, in welchen Bereiche angeklickt werden können und damit auf andere Seiten verzweigt wird. Dieses Verhalten wird erreicht, durch überziehen des Bildes mit einer "Bildkarte" (MAP). In dieser werden die aktiven Bereiche festgelegt einschließlich der zugehörigen Links. Am besten werden als Bilder solche vom GIF-Format verwendet, da ältere Browser aktive JPEGs nicht behandeln können. Auch muss das HEIGHT- und WIDTH-Attribut mit der tatsächlichen Bildgröße übereinstimmen. Das IMG-Element bekommt zunächst eine Erweiterung, die auf die Bildkarte verweist:

<IMG SRC="MeinBild.gif" USEMAP="#MeinMap">.

Der Zusatz USEMAP gibt also an, dass eine Bildkarte mit dem Namen "MeinMap" zu verwenden ist. Diese Bildkarte wird festgelegt mit dem MAP-Element:

<MAP NAME="MeinMap">
  <AREA SHAPE="circle" COORDS="116,40,30" HREF="Datei1.html">
  <AREA SHAPE="rect" COORDS="36,30,84,90" HREF="Datei2.html">
  <AREA SHAPE="poly" COORDS="86,154,64,170,76,188,104,184,112,166" HREF="Datei3.html">
</MAP>

Bestandteil des MAP-Elements als Attribut ist der Name, da eine HTML-Seite mehrere MAPs beinhalten kann. Das AREA-Element legt den "Klickbereich" im Bild fest, der den entsprechenden Link erzeugt. Als mögliche Attribute können die Form (SHAPE) des Klickbereiches angegeben werden, die hierzu benötigten Koordinaten (COORDS) und natürlich die Adresse der aufzurufenden Seite (HREF), was ja vom ANKER-Element bereits bekannt ist.

Bereichsform (SHAPE) Benötigte Koordinaten (COORDS)
circle (Kreis) xM,yM,r (Mittelpunkt M und Radius r)
rect (Rechteck) xol,yol,xur,yur (Eckpunkte oben links und unten rechts)
poly (Vieleck) x1,y1,x2,y2,x3,y3,...,xn,yn (aufeinanderfolgende Eckpunkte)

Hinweis: Für die Koordinaten gilt die obere linke Ecke des Bildes als Nullpunkt. Die x-Werte sind nach rechts, die y-Werte nach unten gerichtet. Die Angaben erfolgen in Pixeln und sind positiv bis zum Wert der Breite bzw. der Höhe des Bildes.

Übung

Betrachten Sie ein Bild und notieren Sie dessen Größe. Denken Sie sich eine Karte darübergelegt. Fertigen Sie evtl. eine Skizze hierfür an. Suchen Sie kreisförmige, rechteckige oder beliebige Bereiche, die beim Anklicken Links erzeugen sollen. Schätzen Sie möglichst genau an Hand der Bildgröße die Koordinaten ab. Erstellen Sie dann die zugehörige Bild-MAP.


An den Anfang des Kapitels Zurück zu Kapitel 3 HTML-Kurs Inhalt Fortsetzung Kapitel 5