Es gibt drei  zulässige Grafikformate für die Anzeige in Browsern.

  JPEG (Joint Photografic Expert Group), in Windows meist mit der Kennung ".jpg", erlaubt die Einstellung einer Kompressionsrate. Damit kann man für die gewünschte Bildgröße bei ausreichender Qualität die Dateigröße minimieren. JPEG wird meist für fotorealistische Darstellungen verwendet.

  GIF (Global Interchange Format)-Dateien lassen nur weniger Farben zu und sind besser geeignet für grafische Elemente oder einfache Bilder. GIF's lassen transparente Hintergründe sowie Animation zu. Die Erzeugung von solchen Effekten setzt entsprechende Software voraus.

  PNG (Portable Network grafic) soll alle Vorteile der beiden anderen Formate in sich vereinen.

align="top middle bottom left right"	Ausrichtung der Grafik relativ zum Text
alt="ersatztext"	Ersatztext, der anstelle der Grafik gezeigt wird.
border=n	Rahmenbreite, n = 0 kein Rahmen
height=n	Höhe des reservierten Platzes in Pixeln
hspace=n	horizontaler Abstand zum umfliessenden Text in Pixeln
lowscr="URL"	Grafik niedriger Auflösung zur Voransicht
src="url"	Beispiel scr = "bilder/ich1.jpg"
vspace=n	vertikaler Abstand zum umfliessenden Text in Pixeln
vwidth=n	Breite des reservierten Platzes in Pixeln

  Da das Laden von Grafikdateien u. U. sehr lange dauert, gibt es eine ganze Reihe von Maßnahmen, den Nutzer trotzdem nicht mehr als nötig zu ärgern.

  Die Angabe von Höhe und Breite der Grafik reserviert den Grafikplatz schon beim Laden des Textes, was Zeitvorteil bringt. Es sollten übrigens immer die wirklichen Bildabmessungen benutzt werden. Veränderungen sind zwar möglich, führen immer zu Verlusten bei der Bildqualität.

  Das alt-Tag ermöglicht die Ankündigung, bevor das Bild erscheint bzw. er wird bei auf dem Bild verweilender Maus angezeigt.

  Der Navigator läßt es zu, daß eine niedriger aufgelöste Version des Bildes zuerst geladen wird, damit der Nutzer schon mal etwas sieht. Dazu dient das lowscr-Tag. Nachteil des Verfahrens ist, daß nun zwei Bilddateien geladen werden müssen, was die Gesamtzeit vergrößert.

  Wenn GIF-Bilder gespeichert werden, wird u.U. nach Interlacing gefragt. Wählt man diese Möglichkeit, dann wird beim späteren Laden des Bildes zunächst nur jede vierte Bildzeile gezeigt und danach erst das Bild komplettiert.

  Man nennt eine Grafik, in der Details als Link dienen, eine verweissensiteve Grafik. Über abgegrenzten Bereichen der Grafik verändert sich beim Überfahren mit der Maus der Cursor und beim Klicken wird ein Link ausgeführt.
  Um eine solche Grafik anzulegen, werden zwei Tags, <map> und <area> benötigt. Die Anlage erfordert mehrere Schritte:
  Zunächst wird  eine verweissensiteve Grafik als Teil der Seite definiert. Diese Ankündigung muß im Body-Teil des Dokuments stehen, ist aber nicht an den Ort gebunden, an dem die Grafik erscheinen soll. Die Definition wird mit <map name="meinbild"> eingeleitet. Der Name ist frei vergebbar und muß zulässige Zeichen enthalten.

Auf das öffnende <map>-Tag folgt nun die Definition der empfindlichen (sensiteven) Bereiche. Dazu dienen jeweils <area>-Einträge. In ihnen werden die Bildbereiche definiert, die später empfindlich sein sollen. Als Attribute sind anzugeben "shape = ... "  (die Form des Bereiches) mit den zulässigen Werten für shape, welche die Tabelle zeigt. Es folgen die Koordinatenangaben mit "coords = ...", die abhängig von der Wahl von shape sind. Alle Koordinatenangaben beziehen sich auf die linke obere Ecke des Bildes und geben die senkrechten (y) und waagerechten (x) Abstände von dieser Ecke in Pixeln an. Schließlich wird noch mit "href = ..." wie üblich die Adresse der anschließend zu ladenden Seite angegeben.

  Wenn alle <area>-Einträge getätigt sind, wird die <map>-Datei mit dem schließenden Tag </map> geschlossen.
  Der letzte Schritt betrifft nun noch das Einfügen des Bildes selbst. Es wird wie üblich dort in den Text eingeordnet, wo es erscheinen soll. Dazu wird das <img>-Tag genutzt. Als zusätzlichen Eintrag erhält es nun außer "src = ..." das Attribut usemap = "#meinbild". Damit wird der Bezug zur Map-Datei hergestellt.

Map-Datei 
<map name="meinbild"> 
   <area shape=rect coords="1,1,30,30" href="seite1.htm"> 
   <area shape=circle coords="100,100,25" href="seite2.htm">
   <area shape=poly coords="150,150,200,200,150,25" href="seite2.htm">
</map>
Aufruf 
<img src="grafikx.gif" usemap="#meinbild">

Zurück

Inhaltsverzeichnis

Nächste

Diplomarbeiten zum Runterladen: