Unbenanntes Dokument

Sensitive Grafiken

Aufgabe

Erstelle -- ausgehend von der Grafik "landkart.gif"-- eine anklickbare (sensitive Grafik) mit folgenden Sensorflächen:
* Vögel
* Raubkatzen
* Primaten
2. Die erste Fläche soll zu der Seite birds.htm führen.
3. Die zweite Fläche verweist auf die Seite felines.htm.
4. Ein Klick auf die dritte Fläche führt zu primates.htm.

Lade zunächst das zip-file " Zoo-ueben " aus dem Internet herunter und speichere die Datei in Deinem Site-Ordner und entpacke sie dort.

Alle notwwendigen Dateien und mehr befinden sich jetzt im Ordner Zoo-Ueben oder in den Unterordnern.

... und so soll es fertig aussehen.

Vorgehen

Kopiere zuerst den gesamten Ordner Zoo in deinen WebSite-Ordner.
Starte Phase5 und öffne von dort aus Deinen WebSite-Ordner.
Erstelle eine neue Seite (Titel "ImageMap", Dateiname "image-map.htm").
Führe folgende Anweisungen in Phase 5 aus :

Vorarbeiten: Für das Folgende wird angenommen, dass Du
1. die gewünschte HTML-Datei schon in den Editor geladen,
2. links den Phase5-Dateimanager (mit Ansicht > Dateimanager) eingeblendet hast und
3. dich dort auch schon im "richtigen" Verzeichnis befindest.
Beschreibung einfügen:
1. Positioniere mit dem Cursor auf die Stelle in der HTML-Datei, an der Du die Beschreibung einfügen willst.
2. Rufe den Phase5-Befehl Einfügen > Image Map > Neue Map erstellen auf.
3. Du befindest dich jetzt mit dem Cursor zwischen den zwei Anführungszeichen.
4. Vereinbare an der aktuellen Stelle beim Attribut name einen Ankernamen für die Grafik-Beschreibung, beispielsweise name="def".
Teilflächen-Beschreibungen einfügen:
1. Positioniere mit dem Cursor zwischen die zwei Tags des Elements map.
2. Wähle beim Phase5-Befehl Einfügen > Image Map den Typ der gewünschten Teilfläche (Rechteck, Kreis oder Polygon).
3. Jetzt ist eine area-Anweisung eingefügt; der Cursor befindet sich zwischen den zum Attribut href gehörenden Anführungszeichen.
4. Trage an der aktuellen Stelle den URL (= Uniform Resource Locator = Internetadresse) des Objekts ein, das beim Anklicken dieser Teilfläche aufgerufen werden soll.
5. Positioniere mit dem Cursor zwischen die Anführungszeichen, die zum Attribut coords gehören.
6. Wähle Bildbetr im Phase5-Dateimanager und klicke die gewünschte Grafikdatei an.
7. Jetzt wird an Stelle des Textes Deiner HTML-Datei die gewählte Grafikdatei angezeigt.
8. Du kannst nun mit Hilfe der Maus die Umrandung der zu spezifizierenden Teilfläche abfahren. Dabei überträgt jeder Klick der rechten Maustaste ein Wertepaar an die aktuelle Stelle im Editor.
9. Wenn Du alle Eckpunkte der Teilfläche festgelegt hast, wechselst Du im Phase5-Dateimanager wieder auf Editor und entfernst ggf. das letzte, überflüssige Komma.
10. Füge anschließend noch vor dem Ende der area-Anweisung das Attribut alt mit einem passenden Ersatztext ein, z.B. alt="Raubtiere".
11. Wenn Du jetzt noch unmittelbar hinter das area-Tag positionierst, hast Du eine Teilflächen-Beschreibung abgeschlossen.
12. Um weitere Teilflächen-Beschreibungen einzufügen, wiederhole die Schritte III b--k.
Inline-Grafik einfügen:
1. Positioniere an die Stelle in der HTML-Datei, an der Du die Inline-Grafik einfügen willst.
2. Klicke im Phase5-Dateimanager die gewünschte Grafikdatei an.
3. Im Editor wird jetzt eine img-Anweisung eingefügt.
4. Lasse die vorderen Attribute src, width, height und border unverändert und positioniere zwischen die Anführungszeichen des Attributs alt.
5. Trage dort einen Ersatztext für die Grafik ein.
6. Positioniere nun den Cursor unmittelbar vor > der img-Anweisung und füge das zusätzliche Attribut usemap mit dem zugehörigen Wert ein. Wenn Du beispielsweise in II d name="def" angegeben hast, so musst Du jetzt usemap="#def" einfügen.

Damit ist die sensitive Grafik mit der zugehörigen Beschreibung eingefügt.

Verweissensitive Grafiken - Imagemaps

Inhalt

Aufgabe