Verweis-sensitive Grafiken (Image Maps)

Das folgende Listing zeigt beispielhaft die Verwendung von Client-seitigen Image Maps. Server-seitige Image Maps benötgen CGI-Scripts und werden hier nicht behandelt, zumal auch der HTML-4.0-Standard den Client-seitigen Image Maps den Vorzug gibt. In der konkreten Anwendung wird auf HTML-Seiten oder auf Anker in der gleichen Seite verzweigt.
Es können Rechtecke (rect, Koordinaten x1, y1, x2, y2), Kreise (circle, Koordinaten xM, yM, Radius) oder beliebige Polygone (poly, Koordinaten x1, y1, x2, x2, ... xn, yn) verweissenstiv gemacht werden. Beim Überfahren der sensitiven Bereiche ändert sich der Mauszeiger vom Pfeil in eine Hand. Beim Anklicken wird ein Link ausgeführt.
Der Koordinaten-Nullpunkt liegt links oben, x-Achse waagrecht, y-Achse senkrecht. Für konkrete Anwendungen verwende man geeignete Grafikprogramme, die die Koordinaten anzeigen. Der Bildbetrachter des HTML-Editors "Phase 5" liefert ebenfalls die gewünschten Koordinaten.

Suche Rechteck Kreis Polygon

Der relevante Teil des Quelltextes:
Die Attributwerte von usemap und name müssen übereinstimmen, hier "Sensitive_Grafik". Bei usemap ist aber das Nummernzeichen # vorauszusetzen.
   
  <img src="GIF-Bilder/Grafik-Sens.gif" alt="Suche" border="0" usemap="#Sensitive_Grafik">

  <map name="Sensitive_Grafik">
   <area shape="rect"   coords="34, 66, 162, 151"                  href="HTML-043-Rechteck.htm">
   <area shape="circle" coords="237, 112, 38"                      href="HTML-043-Kreis.htm">
   <area shape="poly"   coords="357,57, 316,146, 358,121, 396,146" href="HTML-043-Polygon.htm">
  </map>
  

Zurück zur Startseite