HTML Tag map:
Client-side Image-Map

von Thomas Salvador.

Beispiel

Wir definieren zwei Bereiche, ein Rechteck als Link und einen Kreis ohne Linkfunktion in einer Map mit dem Namen einemap:

<map name="einemap">
<area shape="rect" coords="50,50,100,100"
  href="//www.brauchbar.de"
  alt="zur brauchbar.de Homepage" />
<area shape="circle" coords="75,75,10"
  nohref="nohref" alt="ich kein Link" />
</map>

Nun definieren wir ein Bild, welchem wir diese Map zuweisen. Die Annahme ist, das Definition und Aufruf in gleicher Datei geschehen.

<img src="//example.org/einbild.gif" border="0"
  width="150" height="150" alt="Bild mit Map" usemap="#einemap /">

Anwendung

<map> wird verwendet, um eine sog. client-side Image-Map zu definieren. Dies ist also eine Map, die der Besucherrechner interpretieren wird. Eine Map hat einen in name spezifierten Namen, mit dem sie identifiziert werden kann und besteht aus einer oder mehreren "heißen" Bereichen, die mit <area> spezifiziert werden.

Ist ihr Name einemap, so wird sie durch Verwendung des Parameters usemap von <img> mit dem URL-Wert

  • #einemap bzw.
  • //example.org/datei.html#einemap

angesprochen.

Attribute

Der HTML-Befehl <map> nutzt die HTML-Attribute:

AttributBeschreibung
classSpace-separierte Liste von CSS-Klassen
dirAusrichtung von Text und Tabellen
idUniversalattribut
langSprache des Elementes
nameName der Image-Map
onclickAuszuführender Javascript-Code bei Klick
ondblclickAuszuführender Javascript-Code bei Doppelklick
onkeydownAuszuführender Javascript-Code bei Drücken einer Taste
onkeypressAuszuführender Javascript-Code bei gedrückt gehaltener Taste
onkeyupAuszuführender Javascript-Code bei Loslassen einer Taste
onmousedownAuszuführender Javascript-Code bei Drücken einer Maustaste
onmousemoveAuszuführender Javascript-Code, wenn die Maus bewegt wird
onmouseoutAuszuführender Javascript-Code, wenn die Maus das Element verlässt
onmouseoverAuszuführender Javascript-Code, wenn die Maus auf das Element bewegt wird
onmouseupAuszuführender Javascript-Code bei Loslassen einer Maustaste
styleInline Style
titleBezeichnender Titel

Browserunterstützung

<map> wird mindestens von den HTML Browsern Avant Palm OS, Avant Windows, Chrome, Firefox, Internet Explorer, Netscape, Opera, Safari und Web TV / MSN unterstützt.

Standards

<map> wird mindestens in den Standards HTML und XHTML definiert.

Inhalte

Der HTML-Befehl <map> kann die HTML Tags <area> enthalten.

Verwendung

<map> kann in den HTML Anweisungen <a>, <abbr>, <acronym>, <address>, <applet>, <b>, <bdo>, <big>, <blockquote>, <body>, <button>, <caption>, <center>, <cite>, <code>, <dd>, <del>, <dfn>, <div>, <dt>, <em>, <fieldset>, <font>, <form>, <h1>, <h2>, <h3>, <h4>, <h5>, <h6>, <i>, <iframe>, <ins>, <kbd>, <label>, <legend>, <li>, <noframes>, <noscript>, <object>, <p>, <pre>, <q>, <s>, <samp>, <small>, <span>, <strike>, <strong>, <sub>, <sup>, <td>, <th>, <tt>, <u> und <var> genutzt werden.

Hinweise

Es spielt keine Rolle, ob die Map in der gleichen Datei, einer anderen Datei auf gleicher Domain oder sonstwo definiert wurde. usemap nimmt einen URL.

Weitere Beispiele und Lösungen

Keine.