Imagemaps (1): Verweis-sensitive Grafiken

02.11.2016 05:30 Uhr

Bei diesem Bild ist ein Teil des Bildes anklickbar, andere Teile sind es nicht:


Die sogenannte Image map oder verweis-sensitive Grafik wurde durch folgenden Markup generiert :

<img src="http://www.hki.uni-koeln.de/sites/all/files/courses/3321/
einbild.jpg" usemap="#bildstruktur" alt="Eine erste Imagemap">
 
<map id="bildstruktur" name="bildstruktur">
     <area shape="rect"
          coords="116, 92, 211, 125"
          target="new"
          href="http://www.stiftmelk.at/"
          alt="">
     <area shape="rect"
          coords="32, 87, 261, 343"
          target="new"
          href="http://www.aeiou.at/aeiou.history.gtour.babenb/000329.htm"
          alt="">
</map>

Dabei ist zu beachten:

  1. Image maps werden durch das <map> … </map> Tag gekennzeichnet. Das obligatorische Attribut name bestimmt einen Ankernamen für die Map, id ist ein Universalattribut und ordnet einem Element einen individuellen Namen zu. (in beiden Fällen bei uns: „bildstruktur“.)
  2. Die Image map selbst ist aus <area> Tags aufgebaut, die jeweils eine Beziehung zwischen einer Zone auf dem Bildschirm und einem dazugehörigen Objekt, essentiell einer URL, herstellen.
  3. areas dürfen einander überlappen; wird ein kleineres von einem größeren überdeckt, muß das kleinere jedoch stets zuerst spezifiziert werden.
  4. areas können auch nicht-rechteckig sein.
    Varianten zu „rect“: „circle“, „poly“
  5. Alle Koordinatenangaben sind in Pixeln anzugeben, mit dem Koordinatenursprung in der linken oberen Ecke des Bildes.
  6. Wichtiger Hinweis: in HTML benötigen die Area-Tags obligatorisch das alt=““ Attribut.
Schlagwörter: