Suche in meinem Heimatblatt Mein Heimatblatt Hochschulrechenzentrum Universität

Schein Aufgabe Lösung Vorgehen mit Phase 5 HTML-Kurs Kurse, allgemein

Hinweise (Blatt 5)

Anklickbare Grafiken

Inhalt:

• Aufgabe und Zweck
• Genereller Aufbau
• Vorgehensweise mit HoTMetaL
• Vorgehensweise mit Phase5

Aufgabe und Zweck

Im Abschnitt "Inline-Grafik als Verweis für eine externe Grafik" (../aufgabe3/hinweise.html#Verweis) in den Hinweisen zu Blatt 3 wurde gezeigt, wie eine Inline-Grafik als Verweis auf eine externe Grafik eingesetzt werden kann.

Das dort vorgestellte Prinzip ist jedoch eingeschränkt:

• Nur die gesamte Grafik kann angeklickt werden.
• Es kann nur ein Verweisziel für eine Grafik angegeben werden.

Durch das Zusammenspiel der HTML-Anweisungen map und img können diese Beschränkungen überwunden werden:

1. Prinzipiell kann dann für jede beliebige Teilfläche der Grafik vereinbart werden, dass sie anklickbar ist.
2. Prinzipiell kann für jede dieser Teilflächen ein anderes Verweisziel angegeben werden.

Genereller Aufbau

Mit Hilfe von img und map kann eine interaktive Grafik eingerichtet werden:

<img src="grafik-url" alt="grafik-ersatztext"
     usemap="verweis_auf_map">
...
<map name="name">
<area shape="art" coords="koordinaten"
      href="url" alt="ersatztext">
...
weitere Teilflächenbeschreibungen
...
</map>

Erläuterungen:

• Mit Hilfe von img wird an der aktuellen Stelle im Dokument eine Inline-Grafik eingefügt. Es ist sinnvoll, dabei die folgenden Attribute zu benutzen:
  • Die Angabe grafik-url beim Attribut src legt wie üblich die einzufügende Grafikdatei fest.
  • Notwendig ist das Attribut alt mit der Angabe grafik-ersatztext.
  • Mit der Angabe verweis_auf_map beim Attribut usemap verweisen Sie auf die zugehörige Beschreibung.
  • Für verweis_auf_map gelten übrigens die Regeln für Verweise auf lokale Verweisziele (Anker). Siehe dazu Stefan Münz: [html/verweise/projektintern.htm#anker]
  • Auf den Einsatz der Attribute width und height sollte hier verzichtet werden, da sonst ggf. die Grafik-Beschreibung mittels map nicht mehr zur eingebetteten Grafik passt.
• Die Einteilung der Grafik in anklickbare Teilflächen und die jeweilige Verknüpfung mit einem Verweisziel wird im Element map vorgenommen:
  • Mit name beim map-Attribut name wird der Anker für einen Verweis festgelegt. Über das Attribut usemap bei img können Sie sich dann auf die so gekennzeichnete Beschreibung beziehen.
  • Dabei gelten für name die Regeln für Anker. Siehe dazu Stefan Münz: [html/verweise/projektintern.htm#anker]
  • Mit Hilfe von area wird jeweils eine anklickbare Teilfläche beschrieben.
    • Mit der Angabe art beim Attribut shape legen Sie die Art der anklickbaren Teilfläche fest. Mögliche Angaben sind: CIRCLE (Kreis), POLY (Polygon) und RECT (Rechteck).
    • In koordinaten werden die zugehörigen Werte aufgeführt:
      CIRCLE: ein Wertepaar für den Kreismittelpunkt + ein Wert für den Radius
      RECT: zwei Wertepaare (links unten und rechts oben)
      POLY: jeweils ein Wertepaar für jeden Eckpunkt
    • Maßeinheit ist jeweils das Pixel.
    • Die Angabe ersatztext beim Attribut alt ist notwendig.
  • Innerhalb einer Beschreibung können beliebig viele Teilflächen mit Hilfe von area beschrieben werden.
  • Beispiel für eine Grafik-Beschriebung mittels map (Werte sind willkürlich!):

    <map name="def">
    <area shape="RECT" coords="222,55,299,232"
          href="http://www.uni-giessen.de/fb29/" alt="[Veterinär-Medizin]">
    <area shape="CIRCLE" coords="222,55,30"
          href="http://www.uni-giessen.de/hrz/" alt="[Mittelpunkt]">
    <area shape="POLY"
          coords="299,229,350,256,350,255,369,234,357,253,337,255,326,222,336,
          203,324,64,352,22,332,3,259,7,295,95,299,237"
          href="http://www.uni-giessen.de/fb20/" alt="[Medizin]">
    </map>
            

  • Weitere Informationen zu diesem Thema finden Sie bei Stefan Münz: [/html/grafiken/verweis_sensitive.htm#definieren]
• Zu einer Grafikdatei grafik-url können mehrere Beschreibungen angegeben werden.
• Die Reihenfolge von img und map ist beliebig.

Anmerkung: Es gibt noch eine weitere Methode für sensitive Grafiken, die aber hier nicht vorgestellt werden soll: Server-seitige verweis-sensitive Grafiken. Lesen Sie dazu Stefan Münz: [ html/grafiken/verweis_sensitive.htm#server_seitig]

Vorgehensweise mit HoTMetaL

noch nicht realisiert

Vorgehensweise mit Phase5

Siehe dazu

• Aufgabe 5 und Phase 5
  • Eingebaute Möglichkeiten
  • Einfügen einer sensitiven Grafik

$Revision: 1.14 $ ($Date: 2003/11/02 11:51:53 $) by $Author: g029 $