Web-Design

13. Einheit

Schimpansen

Das Einbinden von Bildern

A) Bilder im gif- oder jpeg-Format werden genau so referenziert wie HTML-Seiten.

Beispiel:

Der Text

<a href="http://w3.forst.tu-muenchen.de/~quednau/schimp.gif"> BILD </a>

bewirkt, dass beim Anklicken des Wortes "BILD" das Bild aus der angegebenen URL
geladen und angezeigt wird.

B) Bilder im gif- oder jpeg-Format werden in eine HTML-Seite eingebunden durch den TAG

<img src="Referenz_auf_Bild">

z.B.:

<img src="http://w3.forst.tu-muenchen.de/~quednau/schimp.gif">

Die Größe des Bildes lässt sich verändern durch die Tag-Ergänzungen

width=breite oder
height=höhe

Gibt man beides an, so wird das Bild verzerrt.

BEISPIELE
width="240"

height="100"

width="240"
height="100"

BEISPIELE
width="240"
height="100"
width="240" height="100"

Die folgenden Tag-Ergänzungen wirken wie bei Tabellen, das heißt, sie definieren die Lage
des Textes zum Bild:

border=randbreite
align="left" oder "right" oder "center"
hspace=entfernung
vspace=entfernung

Die Ergänzung

title="text"

bewirkt, dass der Text beim Überstreichen mit der Maus angezeigt wird.

Bilder lassen sich genau wie Textteile mit einer Referenz (einem Link) unterlegen:

Die Anweisung

<a href="http://www.forst.tu-muenchen.de/">
<img src="http://w3.forst.tu-muenchen.de/~quednau/schimp.gif"
height="50" title="Schimpansen">
</a>

ergibt das folgende Bild:

Beim Überstreichen des Bildes mit der Maus wird der Text "Schimpansen" angezeigt,
beim Anklicken wird die Startseite der Fakultät geladen.

Animierte Gifbilder

Im GIF-Format lässt sich eine Serie von gleich großen Bildern zusammenkoppeln und in einer Datei abspeichern. Bei der Darstellung dieser Serie werden die Einzelbilder wie in einem Zeichentrickfilm hintereinander abgespielt - so erhält man eine einfache Animation. (Hier einige Beispiele ).

Auf unserer UNIX-Anlage steht zum Erzeugen animierter GIF-Bilder das Programm gifmerge zur Verfügung. Es wird aufgerufen mit dem Befehl:

gifmerge bild_1.gif bild_2.gif ... bild_n.gif > ergebnis.gif

Dieses Programm kann man auch mit einigen Optionen aufrufen, z.B.

-nnn Anzahl der Zeiteinheiten (zu je 10 msec) zwischen den Einzelbildern - Voreinstellung ist 50 = 0.5 Sekunden
-lnnn Anzahl der Widerholungen (dabei bedeutet -l0 dauerndes Abspielen) - Voreinstellung ist 1

Beispiel:

gifmerge -10 -l10 bild_1.gif bild_2.gif ... bild_n.gif > ergebnis.gif