<AREA> | NN alle IE alle HTML 3.2 | |||||||||
<AREA> | HTML-End-Tag: Unzulässig | |||||||||
Ein map-Element definiert eine clientseitige Imagemap, die letztlich mit einem Bild oder einem anderen Objekt verknüpft ist, das auf der Seite Platz beansprucht. Die einzige Aufgabe des map-Elements besteht darin, einer oder mehreren area-Elementdefinitionen Namen und Tag-Kontext zuzuweisen. Jedes area-Element legt fest, wie die Seite auf Benutzeraktionen in bestimmten Bereichen des Bildes bzw. des Objekts reagieren soll. Ein Bereich in einer clientseitigen Imagemap kann wie ein a-Hyperlink fungieren - ein Bereich kann mit einem Ziel oder einer javascript:-Pseudo-URL verknüpft sein und einen anderen Frame oder ein anderes Fenster als Ziel für ein neues Dokument zuweisen. Tatsächlich wird im entsprechenden Dokumentobjektmodell ein area-Element als Link referenziert. Nicht selten werden clientseitige Areamaps in Navigationsleisten verwendet, die einen schmalen Frame eines Frameset einnehmen. Auf diese Weise kann der Designer das Menü kreativ gestalten, während der Seitenautor die Möglichkeit hat, beliebige Segmente eines größeren Bildes in Links mit genau abgestimmtem Zweck zu verwandeln. |
||||||||||
Beispiel | ||||||||||
<MAP name="nav"> <AREA coords="20,30,120,70" href="contents.html" target="display"> <AREA coords="20,80,145,190" href="contact.html" target="display"> </MAP> |
||||||||||
Objektmodellreferenz | ||||||||||
[window.]document.links[i]
[window.]document.getElementById(elementID)
|
||||||||||
Elementspezifische Attribute | ||||||||||
|
||||||||||
Elementspezifische Ereignisbehandlungsroutinenattribute | ||||||||||
Keiner. |
accesskey | NN 6 (siehe Text) IE 4/5 HTML 4 (siehe Text) |
accesskey="character" | Optional |
Eine einzelne Buchstabentaste, durch die ein Element (in manchen Browsern) den Fokus erhält oder ein Formularsteuerelement bzw. eine Link-Aktion aktiviert wird. Der Browser und das Betriebssystem bestimmen, ob zusammen mit der Buchstabentaste eine Zusatztaste (wie Strg, Alt oder Befehl) gedrückt werden muss, damit der Link aktiviert wird. In IE für Windows ab Version 4 und Netscape 6 muss gleichzeitig die Alt-Taste gedrückt werden, und bei der Buchstabentaste wird nicht zwischen Groß- und Kleinschreibung unterschieden. In IE für den Macintosh ab Version 5 und der Macintosh-Version von Netscape 6 funktioniert die Zugriffstaste nur in Verbindung mit der Ctrl-Taste. Obwohl das accesskey-Attribut hier als gemeinsames Attribut aufgeführt ist, wird es streng genommen nicht in allen Implementierungen unterstützt. HTML 4 und Netscape 6 erkennen dieses Attribut nur in Verbindung mit den folgenden Elementen: a, area, button, input, label, legend und textarea, IE 4 darüber hinaus für applet, body, div, embed, isindex, marquee, object, select, span, table und td (nicht jedoch für label und legend). IE 5 erkennt dieses Attribut in Verbindung mit allen darstellbaren Elementen, weist in diesem Zusammenhang jedoch eine Besonderheit auf: Außer bei input und anderen formularbezogenen Elementen müssen sie einem Element für IE ab Version 5 außerdem ein tabindex-Attribut mit einem beliebigen Wert zuweisen, damit der Benutzer in der Lage ist, ihm mithilfe der Schnellzugriffstaste den Fokus zu übergeben. |
|
Beispiel | |
<A href="http://www.megacorp.com/toc.html" accesskey="t">Table of Contents</A> <H2 class="subsection" accesskey="2" tabindex="0">Part Two</H2> |
|
Wert | |
Ein einzelner Buchstabe des Dokumentsatzes. |
|
Standardwert | |
Keiner. |
|
Objektmodellreferenz | |
[window.]document.links[i].accessKey [window.]document.anchors[i].accessKey [window.]document.formName.elementName.accessKey [window.]document.forms[i].elements[j].accessKey [window.]document.getElementById(elementID).accessKey |
alt | NN 6 IE 3 HTML 3.2 |
alt="textMessage" | Erforderlich |
Nichtgrafische Browser können das alt-Attribut verwenden, um eine Kurzbeschreibung der (unsichtbaren) Hotspots des Bildes anzuzeigen. Früher hatte man daran gedacht, die alt-Nachricht standardmäßig in der Statusleiste des Browsers anzuzeigen, wenn der Bereich aktiviert war oder der Cursor sich darüber befand. Diese Funktion wird nun üblicherweise von onmouseover-Ereignisbehandlungsroutinen und Skripts übernommen. Denken Sie daran, dass moderne Handheld-Computer normalerweise mit nichtgrafischen Browsern ausgestattet sind (oder aus Leistungsgründen das Deaktivieren von Grafiken zulassen). Beim Erstellen von Seiten sollten Sie Benutzer ohne Grafikfähigkeiten nicht vernachlässigen. |
|
Beispiel | |
<AREA coords="20,30,120,70" href="contents.html" target="display" alt="Table of Contents"> |
|
Wert | |
Eine beliebige Zeichenfolge in Anführungszeichen. |
|
Standardwert | |
Keiner. |
|
Objektmodellreferenz | |
[window.]document.getElementById(elementID).alt
|
coords | NN alle IE alle HTML 3.2 |
coords="coord1, ... coordN" | Optional |
Obgleich das W3C das Attribut coords eines area-Elements formal als optional definiert, bedeutet dies nicht, dass sich area ohne dieses Attribut verhält wie erwartet. Das Attribut coords definiert den Umriss des Bereichs, der einem bestimmten Hyperlink oder einer Skriptaktion zugeordnet werden soll. Verschiedene Werkzeuge von Drittherstellern erleichtern das Bestimmen der Koordinaten von Hotspot-Bereichen. Sie können das Bild auch mit einem Grafikprogramm öffnen, das die Cursorposition in Echtzeit anzeigt, und diese Werte für coords übernehmen. Koordinaten werden als Liste mit durch Kommas getrennten Werten übergeben. Falls zwei Hotspot-Bereiche überlappen, hat der Bereich Vorrang, der zuerst im Code definiert wurde. |
|
Beispiel | |
<AREA coords="20,30,120,70" href="contents.html" target="display"> |
|
Wert | |
Jede Koordinate ist ein Längenwert, aber die Anzahl der Koordinaten und deren Reihenfolge hängt von der Form ab, die durch das shape-Attribut angegeben wird, das dem Element optional zugewiesen werden kann. Für shape="rect" sind vier Koordinaten vorhanden (left, top, right, bottom), für shape="circle" drei (center-x, center-y, radius). Bei shape="poly" wird jeder Punkt des Polygons durch zwei Koordinaten bestimmt (x1, y1, x2, y2, x3, y3,...xN, yN). |
|
Standardwert | |
Keiner. |
|
Objektmodellreferenz | |
[window.]document.getElementById(elementID).coords
|
href | NN alle IE alle HTML 3.2 |
href="URI" | Erforderlich |
Die Ziel-URI des mit dem Bereich verknüpften Hyperlinks. Wenn es sich bei der URI um ein HTML-Dokument handelt, wird dieses im Browser in das aktuelle (Standard) oder ein anderes Fenster geladen (hängt vom Attribut target ab). Bei einigen anderen Dateitypen werden die Zielinhalte an ein Plug-In übergeben oder auf dem Client gespeichert. Da IE 3 und Navigator (bis zu Version 4) area-Elemente wie a-Elemente behandeln, muss das Attribut href im area-Element definiert werden, damit Skripts im alten DOM auf verschiedene Eigenschaften der URL zugreifen können und Ereignisbehandlungsroutinen (wie onmouseover) funktionieren. |
|
Beispiel | |
<AREA coords="20,30,120,70" href="contents.html" target="display"> |
|
Wert | |
Beliebige gültige URI, einschließlich absolute und relative URLs, Anker auf der gleichen Seite (mit vorangestelltem #) und javascript:-Pseudo-URL in skriptfähigen Browsern zum Aufrufen einer Skriptanweisung. |
|
Standardwert | |
Keiner. |
|
Objektmodellreferenz | |
Mit anderen Eigenschaften des Link-Objekts lassen sich die Komponenten der URL (wie Protokoll und Hostname) extrahieren. Weitere Informationen finden Sie in der Beschreibung des Link-Objekts in Kapitel 9. [window.]document.links[i].href
[window.]document.getElementById(elementID).href
|
lang | NN 3 IE 4 HTML 4 |
lang="languageCode" | Optional |
Die für die Attributwerte und Inhalte des Elements verwendete Sprache. Mithilfe dieser Informationen ist der Browser besser in der Lage, bestimmte Details wie Ligaturen (sofern von der betreffenden Schrift unterstützt oder in der geschriebenen Sprache erforderlich), Anführungszeichen und Worttrennungen korrekt darzustellen. Andere Anwendungen und Suchmaschinen können anhand dieser Informationen Wörterbücher für die Rechtschreibprüfung auswählen und Indizes erstellen. |
|
Beispiel | |
<SPAN lang="de">Deutsche Bundesbahn</SPAN> |
|
Wert | |
Sprachcode, bei dem nicht zwischen Groß- und Kleinschreibung unterschieden wird. |
|
Standardwert | |
Vorgabe des Browsers. |
|
Objektmodellreferenz | |
[window.]document.getElementById(elementID).lang
|
nohref | NN alle IE alle HTML 3.2 |
nohref | Optional |
Teilt dem Browser mit, dass dem durch die Koordinaten definierten Bereich kein Link zugewiesen ist (also kein href-Attribut enthält). Wenn Sie dieses Attribut festlegen, behandeln skriptfähige Browser das Element nicht mehr als Hyperlink. Wenn in einem area-Element das Attribut href fehlt, reagiert das Element nicht mehr auf Benutzerereignisse. In IE ab Version 4 und in Netscape 6 kann dieses Attribut von einem Skript aus durch Setzen der Eigenschaft noHref auf true bzw. false aktiviert bzw. deaktiviert werden. |
|
Beispiel | |
<AREA coords="20,30,120,70" nohref> |
|
Wert | |
Ist dieses Attribut vorhanden, wird sein Wert auf true gesetzt. Um XHTML-Kompatibilität zu gewährleisten, sollten Sie nohref="nohref" verwenden. |
|
Standardwert | |
Deaktiviert. |
|
Objektmodellreferenz | |
[window.]document.getElementById(elementID).noHref
|
shape | NN alle IE alle HTML 3.2 | |||||||||||||||||||||||||||
shape="shapeName" | Optional | |||||||||||||||||||||||||||
Definiert die Form einer clientseitigen Areamap, deren Koordinaten mit dem Attribut coords festgelegt werden. Über das Attribut shape erfährt der Browser die Anzahl der Koordinaten. |
||||||||||||||||||||||||||||
Beispiel | ||||||||||||||||||||||||||||
<AREA shape="poly" coords="20,20,20,70,65,45" href="contents.html" target="display"> |
||||||||||||||||||||||||||||
Wert | ||||||||||||||||||||||||||||
Formatkonstante (Groß-/Kleinschreibung unwichtig). Jede Implementierung verfügt über ihren eigenen Satz von Formnamen und Äquivalenten, doch es gibt einige browserübergreifende Bezeichnungen (circle, rect, poly und polygon).
|
||||||||||||||||||||||||||||
Standardwert | ||||||||||||||||||||||||||||
rect |
||||||||||||||||||||||||||||
Objektmodellreferenz | ||||||||||||||||||||||||||||
[window.]document.getElementById(elementID).shape
|
target | NN alle IE alle HTML 3.2 |
target="windowOrFrameName" | Optional |
Wenn das Zieldokument nicht in das aktuelle Fenster oder den aktuellen Frame geladen werden soll, können Sie mit dem Attribut target das gewünschte Ziel festlegen. Zielnamen müssen Frames und Fenstern als Bezeichner zugewiesen werden. Die Zuweisung von Zielnamen zu Frames erfolgt über die Attribute name und id des Elements frame, die Zuweisung zu neuen Fenstern über den zweiten Parameter der Skriptmethode window.open( ). Wird dieses Attribut weggelassen, ersetzt das Zieldokument das Dokument mit dem Hyperlink. Dieses Attribut kann nur angewendet werden, wenn für das Attribut href des Elements ein Wert definiert wurde. Ein area-Element kann nur ein Zieldokument und ein Ziel haben. Soll der Inhalt mehrerer Frames geändert werden, können Sie die Ereignisbehandlungsroutine onclick des area-Elements (unterstützte Browser-Versionen siehe Kapitel 9) oder eine javascript:-Pseudo-URL einsetzen, um per Skript mehrere Dokumente zu laden. Setzen Sie für jeden Frame die Eigenschaft location.href auf die gewünschte URL. Strikte DTDs für HTML 4 und XHTML unterstützen das Attribut target bei keinem Element, da Frames und Windows nicht mit reinem Document Markup gesteuert werden können. Da sich Frameset-Dokumente in der strikten Umgebung nicht validieren lassen, gibt es separate Frameset-DTDs für HTML 4 und XHTML. Wenn Ihre Dokumente mit diesen strikten DTDs validiert werden müssen und Sie Ziele verwenden möchten, können Sie die target-Eigenschaften von Links, Imagemaps und Formularen nach dem Laden der Seite mithilfe von Skripts festlegen. |
|
Beispiel | |
<AREA coords="20,30,120,70" href="contents.html" target="display"> <AREA coords="140,30,180,70" href="index.html" target="_top"> |
|
Wert | |
Bezeichner, bei dem zwischen Groß- und Kleinschreibung unterschieden wird, wenn der Frame- oder Fenstername über die Attribute name und id des Zielelements zugewiesen wurde. Vier reservierte Zielnamen dienen als Konstanten: |
|
Standardwert | |
_self |
|
Objektmodellreferenz | |
[window.]document.links[i].target
[window.]document.getElementById(elementID).target
|