Imagemap - Image map

Für Imagemaps in Wikipedia siehe Extension:ImageMap .

In HTML und XHTML ist eine Imagemap eine Liste von Koordinaten, die sich auf ein bestimmtes Bild beziehen und erstellt werden, um Bereiche des Bildes mit verschiedenen Zielen zu verknüpfen (im Gegensatz zu einem normalen Bildlink, bei dem der gesamte Bereich des Bildes auf ein einziges Ziel). Beispielsweise kann auf einer Weltkarte jedes Land mit einem Hyperlink zu weiteren Informationen über dieses Land verknüpft sein. Die Absicht eines Image - Map ist eine einfache Möglichkeit der Verknüpfung verschiedene Teile eines Bildes zu schaffen , ohne das Bild in einzelne Bilddateien aufteilen.

Serverseitig

Serverseitige Imagemaps wurden erstmals in Mosaic (Webbrowser) Version 1.1 unterstützt. Serverseitige Imagemaps ermöglichen es dem Webbrowser , Positionsinformationen darüber, wo der Benutzer in einem Bild klickt, an den Server zu senden. Dadurch kann der Server pixelweise Entscheidungen darüber treffen, welcher Inhalt als Antwort zurückgegeben werden soll (mögliche Methoden sind die Verwendung von Bildmaskenebenen, Datenbankabfragen oder Konfigurationsdateien auf dem Server).

Der HTML- Code für diese Art von serverseitiger Imagemap erfordert, dass sich das <img>Tag in einem Anker-Tag befindet <a>...</a>und <img>das ismapAttribut enthalten muss. 

<a href="/imagemapper"><img src="image.png" ismap /></a>

Wenn der Benutzer in das Bild klickt, hängt der Browser die X- und Y-Koordinaten (relativ zur oberen linken Ecke des Bildes) als Abfragezeichenfolge an die Anker- URL an und greift auf die resultierende URL zu (z. B. ). /imagemapper?3,9

Wenn der Browser dies nicht unterstützt, darf ismapdie Abfragezeichenfolge nicht zur Anker- URL hinzugefügt werden und der Server sollte entsprechend reagieren (z. B. durch Zurückgeben einer Nur-Text-Navigationsseite).

Client-seitig

Clientseitige Imagemaps wurden in HTML 3.2 eingeführt und erfordern keine spezielle Logik, die auf dem Server ausgeführt werden muss (sie sind vollständig clientseitig). Sie benötigen auch kein JavaScript .

Reines HTML

Eine clientseitige Imagemap in HTML besteht aus zwei Teilen:

  1. das eigentliche Bild, das mit dem <img>Tag eingebettet ist . Das Image-Tag muss ein Attribut usemap haben, das die für dieses Bild zu verwendende Imagemap benennt (auf einer Seite können mehrere Imagemaps vorhanden sein).
  2. Ein <map>Element und darin <area>Elemente, von denen jedes einen einzelnen anklickbaren Bereich innerhalb der Imagemap definiert. Diese ähneln der <a> tagDefinition, welche URL für einen normalen Weblink geöffnet werden soll. Es titlekann ein Attribut bereitgestellt werden, das als Tooltip gerendert werden kann, wenn ein Desktop-Benutzer seinen Mauszeiger über den Bereich bewegt. Aus Gründen der Barrierefreiheit im Web ist es oft wichtig – und in einigen Fällen kann es sogar eine gesetzliche oder vertragliche Anforderung sein –, ein altAttribut bereitzustellen , das den Link beschreibt, den Screenreader- Software beispielsweise blinden Benutzern vorlesen kann .

Die <area>Elemente können Rechtecke ( shape="rect"), Vielecke ( shape="poly") oder Kreise ( shape="circle") sein. Shape-Values ​​sind Koordinatenpaare. Jedes Paar hat einen X- und einen Y-Wert (von links/oben im Bild) und wird durch ein Komma getrennt.

  • Rechteck: Legen Sie vier Koordinaten fest: "x1,y1,x2,y2"
  • Polygon: Beliebig viele Koordinaten setzen (ein Vielfaches von zwei): "x1,y1,x2,y2, [...] xn,yn"
  • Kreis: Ein Koordinatenpaar und ein anderer Wert mit einem Radius: "x1,y1,radius"

Das folgende Beispiel definiert einen rechteckigen Bereich ("9.372.66.397"). Wenn ein Benutzer irgendwo in diesem Bereich klickt, wird er auf die Homepage der englischen Wikipedia geleitet . 

<img src="image.png" alt="Website map" usemap="#mapname" />
<map name="mapname">
  <area shape="rect" coords="9,372,66,397" href="https://en.wikipedia.org/" alt="Wikipedia" title="Wikipedia" />
</map>

CSS

Ein modernerer Ansatz besteht darin, Links mithilfe von absoluter CSS- Positionierung in einem Bild zu überlagern . dies unterstützt jedoch nur rechteckige anklickbare Bereiche. Diese CSS-Technik kann geeignet sein, damit eine Imagemap auf iPhones ordnungsgemäß funktioniert , da reine HTML-Imagemaps möglicherweise nicht korrekt neu skaliert werden.

Erstellung und Nutzung

An unknown portrait unknown painting prob. The Infant Academy 1782 Boswell - Biographer Dr Johnson - Dictionary writer Sir Joshua Reynolds - Host David Garrick - actor Edmund Burke - statesman Pasqual Paoli - Corsican patriot Charles Burney - music historian servant - poss. Francis Barber Thomas Warton - poet laureate Oliver Goldsmith - writer Use button to enlarge or use hyperlinks
Imagemap-Beispiel von The Club . Ein Klick auf eine Person im Bild führt dazu, dass der Browser den entsprechenden Artikel lädt.

Es ist möglich, clientseitige Imagemaps von Hand mit einem Texteditor zu erstellen, aber dafür müssen Webdesigner wissen, wie man HTML codiert und wie man die Koordinaten der Bereiche aufzählt, die sie über dem Bild platzieren möchten. Daher sind die meisten von Hand codierten Imagemaps einfache Polygone.

Da das Erstellen von Imagemaps in einem Texteditor viel Zeit und Mühe erfordert, wurden viele Anwendungen so entwickelt, dass Webdesigner schnell und einfach Imagemaps erstellen können, ähnlich wie sie Formen in einem Vektorgrafikeditor erstellen würden . Beispiele für diese Anwendungen sind Adobes Dreamweaver oder KImageMapEditor (für KDE ) und das Imagemap-Plugin in GIMP .

Imagemaps , die ihre anklickbaren Bereiche nicht sichtbar machen , riskieren , den Benutzer einer mysteriösen Fleischnavigation auszusetzen . Selbst wenn sie es tun, ist es möglicherweise nicht offensichtlich, wohin sie führen. Dies kann teilweise mit Rollover-Effekten behoben werden.

SVG-Bilder

Da das Bildformat Scalable Vector Graphics (SVG) eigene Mechanismen zum Hinzufügen von Hyperlinks und anderen, komplexeren Formen der Interaktivität zu Bildern bereitstellt, sind herkömmliche Imagemap-Techniken im Allgemeinen nicht erforderlich, wenn mit Vektorbildern im SVG-Format gearbeitet wird.

Siehe auch

Verweise