MAP - Image-Map

Das MAP-Element definiert eine Client-seitige Image-Map für die Verwendung mit einem IMG-, OBJECT- oder INPUT-Element. Das von MAP benötigte NAME-Attribut wird als Anker für das USEMAP-Attribut des IMG, OBJECT oder INPUT-Elements verwendet.

HTML erlaubt Bildern in verschiedenen Dokumenten die gleiche MAP-Definition aus einer einzigen Datei zu benutzen, jedoch unterstützen viele Browser dies nicht und setzen voraus, dass die MAP- und Bild-Elemente im gleichen Dokument sind.

MAP wurde ursprünglich für ein oder mehrere AREA-Elemente definiert, die die Koordinaten einer anklickbaren Region auf dem Bild festlegen. Ein Beispiel:

<MAP NAME=mymap>
<AREA HREF="/reference/" ALT="HTML and CSS Reference" COORDS="5,5,95,195">
<AREA HREF="/design/" ALT="Design Guide" COORDS="105,5,195,195">
<AREA HREF="/tools/" ALT="Tools" COORDS="205,5,295,195">
</MAP>
<IMG SRC="sitemap.gif" ALT="Site map" USEMAP="#mymap" WIDTH=300 HEIGHT=200>

HTML 4 erweitert das MAP-Element, indem es ein oder mehrere Block-Level Elemente als eine Alternative zu den AREA-Elementen entgegennimmt. Kombiniert mit dem OBJECT-Element erlaubt dieses einen reicheren alternativen Inhalt für die Browser, die die Bilder nicht laden, zu definieren. Wie auch immer, durch arme und fehlerhafte Browserunterstützung für OBJECT sind Client-seitige Image-Maps durch das IMG-Element zuverlässiger.

Wenn MAP in einem OBJECT angegeben ist, werden seine Inhalte in Bilder-ladenden Browsern nicht angezeigt. MAP kann auch außerhalb des OBJECT-Elements verwendet werden, sodass seine Inhalte angezeigt werden.

Das folgende Beispiel gibt zwei Bilder an, eins als Alternative, falls der erste Bildtyp nicht unterstützt wird. Die Bilder teilen sich eine einzige Image-Map Definition, die in einem OBJECT-Element eingebunden ist. Das MAP-Element enthält ein Menü mit Links, das angezeigt wird, wenn die Bilder im Browser nicht geladen werden.

<OBJECT DATA="sitemap.png" USEMAP="#map" TYPE="image/png" TITLE="Site map" WIDTH=300 HEIGHT=200>
<OBJECT DATA="sitemap.gif" USEMAP="#map" TYPE="image/gif" TITLE="Site map" WIDTH=300 HEIGHT=200>
<MAP NAME=map>
<UL>
<LI><A HREF="/reference/" COORDS="5,5,95,195">HTML and CSS Reference</A></LI>
<LI><A HREF="/design/" COORDS="105,5,195,195">Design Guide</A></LI>
<LI><A HREF="/tools/" COORDS="205,5,295,195">Tools</A></LI>
</UL>
</MAP>
</OBJECT>
</OBJECT>

Weitere Informationen

• MAP in der W3C HTML 4.01 Spezificktion
• MAP in der W3C HTML 3.2 Spezifikation
• MAP in der WDG HTML 3.2 Referenz
• MAP in Learning HTML 3.2 by Examples
• MAP in Index DOT Html