HTML <img> usemap-Attribut

HTML <img> Tag

Definition und Verwendung

usemap Eigenschaft definiert das Bild als Client-seitige Bildkarte.

Eine Bildkarte bezieht sich auf ein Bild mit klickbaren Bereichen.

usemap Eigenschaften sind mit Das <map>-Element mit der name- oder id-Attribut assoziiert sind, um eine Beziehung zwischen <img> und <map> herzustellen.

Hinweis:Kann nicht verwendet werden, wenn das <img>-Element ein Nachfolger des <a> oder <button>-Elements ist, usemap Eigenschaften.

Weiterführende Informationen: Einführung in das usemap-Attribut

Beispiel

Bilder mit klickbaren Bereichen:

<img src="life.png" alt="Leben" usemap="#lifemap" width="650" height="451">
<map name="lifemap">
  <area shape="rect" coords="10,208,155,338" alt="Computer" href="airpods.html">
  <area shape="rect" coords="214,65,364,365" alt="Telefon" href="iphone.html">
  <area shape="circle" coords="570,291,75" alt="Tasse Kaffee" href="coffee.html">
</map>

Versuchen Sie es selbst

Syntax

<img usemap="#mapname">

Attributwert

Wert Beschreibung
#mapname Das Zeichen "#" gefolgt vom Namen des zu verwendenden <map>-Elements.

Weiterführende Informationen: Einführung in das usemap-Attribut

usemap Die Eigenschaft bietet ein "Klient"-Bildmapping-Mechanismus, der die Verarbeitung der Mauskoordinaten auf dem Server effektiv beseitigt und die damit verbundenen Netzwerkverzögerungsprobleme beseitigt. Durch spezielle <map>- und <area>-Tags können HTML-Entwickler eine Beschreibung der Koordinaten der auf dem Bild sensiblen Hyperlink-Bereiche im usemap-Bild bereitstellen, die gleichzeitig die entsprechenden Hyperlink-URLs enthält. Der Wert der usemap-Attribut ist eine URL, die auf den speziellen <map>-Bereich verweist. Der Browser auf dem Benutzercomputer wandelt die Koordinaten des Mausklicks auf dem Bild in bestimmte Aktionen um, einschließlich dem Laden und Anzeigen eines anderen Dokuments.

Wir erläutern dies an einem Beispiel. Nachfolgender Quellcode mappingst ein 100x100 Pixel großes Bild map.gif auf 4 Bereiche, und wenn der Benutzer auf einen dieser Bereiche klickt, wird er auf verschiedene Dokumente weitergeleitet. Bitte beachten Sie, dass wir in diesem <img>-Tag die Verarbeitungsfunktion für das ismap-Bildmapping effektiv integriert haben, so dass Benutzer, die Browser verwenden, die keine usemap-Verarbeitungsfunktion haben, das Bildmapping über eine andere Möglichkeit, nämlich das Servermechanismus, verarbeiten können:

<a href="/example/map">
  <img src="/i/map.gif" ismap="ismap" usemap="#map" />
</a>
<map name="map">
  <area coords="0,0,49,49" href="link1.html">
  <area coords="50,0,99,49" href="link2.html">
  <area coords="0,50,49,99" href="link3.html">
  <area coords="50,50,99,99" href="link4.html">
</map>

Unterschiede in der Anwendung der ismap- und usemap-Attribute

Eine gut angepasste Anwendung von ismap und usemap ist die Karte, z.B. wenn man die Webseite einer großen nationalen Firma durchsucht, könnte ein Benutzer auf der Karte auf die Stadt klicken, in der er lebt, um die Adressen und Telefonnummern von nahegelegenen Einzelhandelsgeschäften zu erhalten.

Der Vorteil der clientseitigen Verarbeitung von Bildkarten durch usemap ist, dass er keine Server oder spezielle Server-Software erfordert. Im Gegensatz zum ismap-Mechanismus kann er in nicht-webbasierten (ohne Netzwerk) Umgebungen verwendet werden, z.B. in lokalen Dateien oder auf CD-ROMs.

Browserkompatibilität

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Unterstützung Unterstützung Unterstützung Unterstützung Unterstützung

HTML <img> Tag