![Page 1: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/1.jpg)
Imagemaps & Animierte GIF-Grafiken
Anne Kersten, Claudia Wloch
![Page 2: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/2.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
2
Inhalt
• Vorwort• Imagemaps
– Einführung– Übung
• Animierte GIF-Grafiken– Einführung– Übung
![Page 3: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/3.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
3
Imagemaps: Einführung
• Auch verweis-sensitive Grafiken genannt (anklickbare Bilder).
• Verschiedene Bildelemente sind mit Hyperlinks ausgezeichnet, die auf verschiedene Dokumente verweisen.
• Der Anwender kann mit der Maus auf diese Verweise (Hotspots) klicken und gelangt wesentlich einfacher und schneller zu Informationen als durch lange verbale Verweislisten.
![Page 4: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/4.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
4
• Unterscheidung:clientseitige Imagemapsserverseitige Imagemaps
• Typische Anwendung:Online-Landkarten
Imagemaps: Einführung
![Page 5: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/5.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
5
Beispiel
![Page 6: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/6.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
6
Quelltext--------------------------------------------------------------------------<map name="Testbild"> <area shape=rect coords="x1, y1, x2, y2" href="URL/Datei/..."> </map><img src="bildname.gif" usemap="#Testbild" border=0>--------------------------------------------------------------------------
<map name=””> Einleitung der Definition von image maps<area...> definiert einzelne verweis-sensitive Flächen
3 Möglichkeiten:-> shape=rect für viereckige Fläche-> shape=circle für einen Kreis-> shape=polygon für ein beliebiges Vieleck
coords= Koordinaten der verweis-sensitiven Flächen -> Pixelangaben, getrennt durch Kommata
![Page 7: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/7.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
7
Quelltext
Vierecke (shape=rect): Definition mit den Koordinaten für x1,y1,x2,y2x1 = linke obere Ecke, Pixel von linksy1 = linke obere Ecke, Pixel von obenx2 = rechte untere Ecke, Pixel von linksy2 = rechte untere Ecke, Pixel von oben
Kreise (shape=circle): Definition mit den Koordinaten für x,y,r x = Mittelpunkt, Pixel von linksy = Mittelpunkt, Pixel von obenr = Radius in Pixel
Polygone (shape=polygon): Definition mit den Koordinaten x1,y1,x2,y2 ... xn,yn" x = Pixel einer Ecke von linksy = Pixel einer Ecke von oben
beliebig viele Ecken definierbar
![Page 8: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/8.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
8
Quelltext--------------------------------------------------------------<map name="Testbild"> <area shape=rect coords="x1, y1, x2, y2" href="URL/Datei/..."> </map><img src="bildname.gif" usemap="#Testbild" border=0>-----------------------------------------------------------------
href= bestimmt das Ziel (Datei oder URL, die beim Anklicken der Fläche aufgerufen werden soll)
<img> Grafik wird referiert, die die verweis-sensitiven Flächen besitzen soll
usemap= Um die Grafik als verweis-sensitiv zu kennzeichnengefolgt von dem Namen, der im einleitenden <map>-Tag vergeben wurde -> in Anführungszeichen & vorangestelltem #
![Page 9: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/9.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
9
Übung
![Page 10: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/10.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
10
Übung 1. Teil1. Adobe
ImageReady öffnen grafik1.gif öffnen, unter Ansicht Lineale aktivieren
2. Im Info-Fenster die Koordinaten der einzelnen Felder ablesen u. notieren!
3. Ermittlung des Radius beim Kreis: Curso im Mittel-punkt platzieren, x ablesen, dann den Curso waagerecht an den rechten Rand bewegen, erneut x ablesen und die Differenz bilden
![Page 11: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/11.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
11
Übung 2. Teil
6. Phase5 starten, neues HTML-Dokument erstellen (Hintergrundfarbe #FFFFCC, Textfarbe #FF9900), speichern unter ImageMap.html.
7. Tabelle einfügen (1 Spalte, 2 Zeilen) und zentrieren.
8. 1. Zeile: Überschrift “Startseite” (h1) 2. Zeile: Bild einfügen über Einfügen -> Grafik einfügen -> grafik1.gif
![Page 12: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/12.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
12
Übung 2. Teil
Das Grundgerüst sollte damit so aussehen:
<body text="#FF9900" bgcolor="#FFFFCC"><table align="center"><tr><td><h1 align="center">Startseite</h1></td></tr><tr><td><img src="grafik1.gif" width="400" height="311"
border="0" alt=""></td></tr></table></body>
![Page 13: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/13.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
13
Übung 2. Teil
Das Grundgerüst sollte damit so aussehen:
<body text="#FF9900" bgcolor="#FFFFCC"><table align="center"><tr><td><h1 align="center">Startseite</h2></td></tr><tr><td><img src="grafik1.gif" width="400" height="311"
border="0" alt=""></td></tr></table></body>
![Page 14: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/14.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
14
Übung 2. Teil
Imagemap mit Titel „Bild“ einfügen
<tr><td><map name=„Bild"><area shape="RECT"
coords=„82,93,175,182„ href="seite1.html"><area shape="CIRCLE" coords=„259,164,50"
href="seite2.html"><area shape="POLYGON"
coords=„115,277,160,206,280,277" href="seite3.html">
</map><img src="grafik1.gif" width="400" height="311"
usemap="#Bild" border="0" alt=""> </td></tr>
![Page 15: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/15.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
15
Animierte GIF-Grafiken
Einführung:
• GIF-Grafiken im Web entsprechen einfachen Video-Animationen
• Animierte GIFs lassen sich ohne Java-Kenntnisse erstellen
• Einzelne Bildelemente werden auf verschiedenen Ebenen übereinander abgespeichert
• Die Animation wird anschließend wie ein Daumenkino abgespielt
• Animierte GIFs sind daher Comics ähnlich
![Page 16: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/16.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
16
Animierte GIF-Grafiken
Einführung:
• Die Gefahr bei Animationen im Netz besteht bei Überreizung
• Zu viele Animationen lenken den Betrachter ab
![Page 17: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/17.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
17
Animierte GIF-Grafiken
Übung
• Öffnen des Programms Adobe ImageReady
• Einstellen der Hintergrundfarbe #851410 und Vordergrundfarbe #EBD4A7
• Neues Dokument öffnen (Größe: Web-Banner; Titel: Springball; Hintergrundfarbe)
• Öffnen der Grafik Kreis
![Page 18: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/18.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
18
Animierte GIF-Grafiken
Übung:• Den Kreis mit dem Verschieben-Werkzeug, mit
gehaltener linken Maustaste in das Banner ziehen• Diesen Vorgang achtmal wiederholen, so das sich
in dem Banner nun neun Bälle befinden• Öffnen der Grafik rechteck; das Rechteck
ebenfalls in das Banner ziehen• Nun die Punkte in einer Zickzacklinie anordnen,
wobei der letzte Ball in dem Rechteck landet (Darauf achten in welcher Ebene ihr euch befindet!)
• Das Ergebnis müsste ähnlich aussehen:
![Page 19: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/19.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
19
Animierte GIF-Grafiken
Übung:• Die Basisgrafik ist fertig und kann animiert werden• Dafür gehen wir in die Animationsleiste und
kopieren den ersten Frame neunmal (wir sehen dann die Frames 1-10 hintereinander gereiht)
• Jetzt müssen die einzelnen Ebenen nur noch sichtbar bzw. unsichtbar gemacht werden, wie gewünscht
• Dafür verwenden wir die Ebenenleiste in der rechten unteren Bildschirmecke
• Markiert den ersten Frame und schaltet alle Augen außer den Hintergrund und das Rechteck aus
• Dann markiert den zweiten Frame und macht den ersten Ball sichtbar (das gleiche mit den restlichen Frames)
![Page 20: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/20.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
20
Animierte GIF-Grafiken
Übung:• Zu guter letzt stellen wir noch die Zeit ein, die der
jeweilige Frame angezeigt werden soll (mit rechter Maustaste; Frame 1-5 je 0,5 Sekunden und Frame 6-10 je 0,2 Sekunden)
• Dann speichern wir die Grafik Datei Optimierte-Version speichern unter (Titel Springball; Dateityp HTML und Bilder)
• Öffnet nun einen Browser und die Datei Springball.html
• Lasst euch nun den Quelltext anzeigen
![Page 21: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/21.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
21
Animierte GIF-Grafiken
Übung: Quelltext – Banner ----------------------------------------------------------------------------------------------
<HTML><HEAD><TITLE>Springball</TITLE><META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1"></HEAD><BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0
MARGINWIDTH=0 MARGINHEIGHT=0><!-- ImageReady Slices (Springball.psd) --><IMG SRC="Bilder/Springball.gif" WIDTH=468 HEIGHT=60 ALT=""><!-- End ImageReady Slices --></BODY></HTML>
----------------------------------------------------------------------------
![Page 22: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/22.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
22
Animierte GIF-Grafiken
Übung: Quelltext – Banner ----------------------------------------------------------------------------------------------
<HTML><HEAD><TITLE>Springball</TITLE><META HTTP-EQUIV="Content-Type" CONTENT="text/html;
charset=iso-8859-1"></HEAD><BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0
MARGINWIDTH=0 MARGINHEIGHT=0><!-- ImageReady Slices (Springball.psd) --><IMG SRC="Bilder/Springball.gif" WIDTH=468 HEIGHT=60
ALT=""><!-- End ImageReady Slices --></BODY></HTML>
------------------------------------------------------------------------------------- Kopiert den markierten Absatz in eure Startseite der Übung
Imagemaps vor dem Body-Ende und schließt ihn in einen zentrierten Absatz ein (<p align=„center“></p>) ein.
![Page 23: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/23.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
23
Animierte GIF-Grafiken
Endergebnis der Übung:
![Page 24: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/24.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
24
Quellen
• Münz, S./W. Nefzger: HTML 3.2 Handbuch.
• Karbo, Michael B.: Selbstgelernt. Bildoptimierung im Internet.
• Campbell, Bruce/Rick, Darnell: Dynamic HTML. 7-Tage-Crashkurs.
![Page 25: Imagemaps & Animierte GIF-Grafiken Anne Kersten, Claudia Wloch](https://reader036.vdokument.com/reader036/viewer/2022062512/55204d6749795902118bd800/html5/thumbnails/25.jpg)
ImageMaps & Animierte GIF-Grafiken (A. Kersten, C. Wloch)
25
Vielen Dank!