Bildkarte

Im Html und Xhtml, ein Bildkarte ist eine Liste von Koordinaten, die sich auf eine bestimmte beziehen Bild, erstellt, um zu Hyperlink Bereiche des Bildes zu verschiedenen Zielen (im Gegensatz zu einer normalen Bildverbindung, in der der gesamte Bereich des Bildes zu einem einzigen Ziel verknüpft ist). Zum Beispiel kann eine Karte der Welt jedes Land zu weiteren Informationen über dieses Land hyperlinks lassen. Die Absicht eines Bildkarte ist eine einfache Möglichkeit, verschiedene Teile eines Bildes zu verknüpfen, ohne das Bild in separate Bilddateien zu teilen.

Server-Seite

Serverseitige Bildkarten wurden zuerst in unterstützt in Mosaik (Webbrowser) Version 1.1.[1] Serverseitige Bildkarten Aktivieren Sie das Webbrowser So senden Sie Positionsinformationen an den Server darüber, wo der Benutzer in einem Bild klickt. Auf diese Weise kann der Server Pixel-by-Pixel-Entscheidungen darüber treffen, welche Inhalte als Antwort zurückgegeben werden sollen (mögliche Methoden sind die Verwendung von Bildmaskenebenen, Datenbankabfragen oder Konfigurationsdateien auf dem Server).

Das Html Code für diese Art von Serverseitige Bildkarte erfordert das Tag, um in einem Anker -Tag zu sein ... und die Muss das enthalten Ismap Attribut.

<a href="/Imagemapper"> <img src="Image.png" Ismap /> </a> 

Wenn der Benutzer in das Bild klickt URL Als ein Abfragezeichenfolge und wird auf die resultierende Zugriffe zugreifen URL[2] (zum Beispiel, /Imagemapper? 3,9).

Wenn der Browser nicht unterstützt Ismap dann ist die Abfragezeichenfolge darf dem Anker nicht hinzugefügt werden URL und der Server sollte angemessen reagieren (beispielsweise durch Rückgabe einer Nur-Text-Navigationsseite).

Client-Seite

Client-Seite-Bildkarten wurden eingeführt in HTML 3.2und benötigen keine spezielle Logik auf dem Server (sie sind vollständig clientseitig). Sie benötigen auch keine JavaScript.

Reines HTML

Eine clientseitige Imagemap in HTML besteht aus zwei Teilen:

  1. das tatsächliche Bild, das mit dem eingebettet ist Schild. Das Bild -Tag muss ein Attribut haben Usemap, Welches die für dieses Bild zu verwendende Imagemap nennt (es können mehrere Imagemaps auf einer einzelnen Seite vorhanden sein).
  2. A Element und darin,, Elemente, von denen jedes einen einzelnen klickbaren Bereich innerhalb der Imagemap definiert. Diese ähneln dem Schild definieren welche URL sollte für einen gewöhnlichen Weblink geöffnet werden. EIN Titel Attribut kann bereitgestellt werden, das als a gerendert werden kann Tooltip Wenn ein Desktop -Benutzer seinen Mauszeiger über den Bereich hebt. Zum Web -Barrierefreiheit Gründe, es ist oft wichtig - und in einigen Fällen kann es sogar eine rechtliche oder vertragliche Anforderung sein, eine bereitzustellen Alt Attribut, das den Link beschreibt, den Bildschirmleser Software kann zum Beispiel lesen blind Benutzer.[3]

Das Elemente können Rechtecke sein (SHAPE = "RECHT"), Polygone (SHAPE = "Poly") oder Kreise (SHAPE = "Kreis"). Formwerte sind Koordinatenpaare. Jedes Paar hat einen x- und y -Wert (von links/Oberseite eines Bildes) und ist mit einem Komma getrennt.

  • Rechteck: Setzen Sie vier Koordinaten: "x1, y1, x2, y2"
  • Polygon: Setzen Sie so viele Koordinaten wie gewünscht (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 überall in diesem Bereich klickt, werden er zum zur Englische WikipediaHomepage.

<img src="Image.png" Alt="Website -Karte" Usemap="#mapname" /> <Karte Name="MapName">  <Bereich Form="RECHT" Koordnungen="9.372,66,397" href="https://en.wikipedia.org/" Alt="Wikipedia" Titel="Wikipedia" /> Karte> 

CSS

Ein modernerer Ansatz besteht darin CSS absolute Positionierung; Dies unterstützt jedoch nur rechteckige klickbare Bereiche. Diese CSS -Technik kann geeignet sein, um eine Bildkarte ordnungsgemäß zu erstellen iPhones, was die reine HTML -Bildkarten nicht richtig neu skalieren kann.

Schöpfung und Verwendung

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
Bildkarte Beispiel von Der Klub. Wenn Sie auf eine Person im Bild klicken, wird der Browser den entsprechenden Artikel geladen.

Mit einem Texteditor ist es möglich, clientseitige Bildkarten von Hand zu erstellen. Auf diese Weise können Webdesigner wissen, wie HTML codiert und wie die Koordinaten der Bereiche, die sie über das Bild legen möchten, aufzählen. Infolgedessen sind die meisten Bildkarten von Hand einfache Polygone.

Da das Erstellen von Bildkarten in einem Texteditor viel Zeit und Mühe erfordert, wurden viele Anwendungen so konzipiert, dass Webdesigner Bildkarten schnell und einfach erstellen können, so wie sie Formen in einem erstellen würden Vector Graphics Editor. Beispiele für diese Anwendungen sind Adobe's Dreamweaver oder Kimagemapeditor (zum Kde) und das Imagemap -Plugin in gefunden in Gimp.

Bildkarten, die ihre anklickbaren Bereiche nicht offensichtlich das Risiko machen, dem Benutzer auszusetzen Mystery Fleischnavigation. Auch wenn sie es tun, wo sie führen, ist möglicherweise nicht offensichtlich. Dies kann teilweise mit Rollover -Effekten behoben werden.[4]

SVG -Bilder

Weil die Skalierbare Vektorgrafiken (SVG) Bildformat liefert seine eigenen Mechanismen zum Hinzufügen von Hyperlinks[5] und andere, ausgefeiltere Formen der Interaktivität[6] Für Bilder sind herkömmliche Bildkartentechniken im Allgemeinen nicht erforderlich, wenn sie mit Vektorbildern im SVG -Format arbeiten.

Siehe auch

Verweise

  1. ^ "IMG -Erweiterung für Mosaic 1.1".
  2. ^ "HTML: Die Markup -Sprache (eine HTML -Sprachreferenz)".
  3. ^ "Bildkarten in HTML". Zugänglichkeit. Penn State University. Abgerufen 6. Oktober 2013.
  4. ^ Flandern, Vincent (März 1998). Webseiten, die saugen: Lernen Sie gutes Design, indem Sie sich schlechtes Design ansehen. San Francisco: Sybex Inc. ISBN 978-0-7821-2187-2.
  5. ^ "SVG -Spezifikation: Verknüpfung". World Wide Web Konsortium. 16. August 2011. Abgerufen 24. Juni 2019.
  6. ^ "SVG -Spezifikation: Interaktivität". World Wide Web Konsortium. 16. August 2011. Abgerufen 24. Juni 2019.