Werden noch HTML Image Maps verwendet?

113

Verwenden die Leute immer noch die alten HTML Image Maps? Die mit:

<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...

Oder gibt es eine neuere, bessere Alternative?

html imagemap

— ss888
quelle

1

Wenn Sie fragen, ob es etwas Besseres gibt oder nicht, sollten Sie ein Vergleichsmittel angeben. Besser auf welche Weise oder zu welchem Zweck? Es gibt leistungsfähigere Werkzeuge als Imagemaps, die auch komplexer sind ...

— Jeff Parker

2

Guter Punkt - Ich habe lange Zeit keine Imagemap verwendet und dachte, dass sie möglicherweise durch eine verbesserte Codierungsmethode ersetzt wurde.

— SS888

1

Javascript / Layer-basierte Funktionen und Flash haben Image-Maps in fast allem, was mir begegnet, ersetzt ... Ich kann mich nicht erinnern, wann ich das letzte Mal eine im aktiven Dienst gesehen habe. Wenn Sie jedoch einen bestimmten Zweck im Auge haben, ist eine spezifischere Antwort möglicherweise leichter verfügbar :)

— Jeff Parker

21

Ich würde Flash heutzutage lieber meiden lol.

— SS888

4

Wenn Sie nach etwas suchen, das schnell erledigt, schnell ausgeführt und nur leicht böse ist, sind Image Maps genau das Richtige für Sie. Es gibt keinen allgemein unterstützten Ersatz, der meiner Meinung nach die Arbeit mit der gleichen Geschwindigkeit erledigt. Nun, wenn Sie Zeit für SVG, Canvas hatten und nichts dagegen hatten, IE von Ihrer unterstützten Browserliste auszuschließen ...

— Jeff Parker

53

Ja, die Leute benutzen immer noch Imagemaps. Eine Alternative wäre, Elemente mit absoluter Positionierung und CSS zu positionieren, aber das ist nicht unbedingt besser. Es erlaubt Ihnen auch nicht, Formen wie in Imagemaps zu haben

— JohnP
quelle

Ok, also sind HTML-Image-Maps immer noch gut? Wie wäre es mit Hover / Rollover-Effekten?

— SS888

Mein Hauptproblem bei Imagemaps ist, dass sie im Gegensatz zu den Bildern, mit denen sie verknüpft sind, nicht auf Browser- oder Bildschirmgröße skaliert werden. Ich würde hoffen, dass das OP SVG-Formate erforscht

— Martin

2

Sie müssen es mit der Größe des Bildes skalieren. Stellen Sie Ihre Bildgröße relativ zur Größe des Fensters ein. Vergleichen Sie dann immer das Verhältnis von Breite zu Höhe mit dem Bildkartenverhältnis und überschreiben Sie die Koordinaten mit Javascript. Der jquery-basierte Ereignishandler für die Bildgröße lautet $ (window) .resize (function () {.... yourcode ...});

— Skidadon

46

Sie befinden sich in der HTML5-Spezifikation , sodass sie nicht veraltet sind.

Sie können sie weiterhin frei verwenden, sie haben sicherlich immer noch ihren Platz in der Webentwicklung. Oder ich könnte sagen, es gibt seltene Fälle, in denen Sie etwas am besten mit einer Imagemap lösen können.

— Kapa
quelle

19

Eine alternative Lösung zur Verwendung von CSS oder Image Maps wäre die Verwendung von SVG-Grafiken, die in den HTML-Dom eingebettet sind.

Ein Tutorial zum Erreichen von Mouseover-Effekten mit dieser Technik wird in diesem Tutorial beschrieben: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

Der wichtigste Aspekt ist, dass SVG-Elemente auch traditionelle Dom-Ereignisse auslösen, einschließlich OnMouseover und OnMouseout .

— Norman H.
quelle

1

+1 SVG ist die beste direkte Alternative zu Imagemaps, da die Interaktion mit jeder beliebigen Form erfolgen kann. Es kann etwas sehr Ähnliches wie Imagemaps erstellt werden, bei dem Vektorkoordinaten Rasterpixelbilder zerlegen, indem SVG-Elementen eine Bildfüllung gegeben wird . Aber selbst dann können Gebietskarten in einigen Fällen besser sein (sie sind einfacher und beschneiden das Bild nicht, was manchmal wünschenswert sein kann).

— user56reinstatemonica8

18

Ja, HTML-Imagemaps sind besonders dann gut, wenn Sie möchten, dass Ihr Bereich ein Polygon ist. Sie können Ihrer Karte auch Rollover-Effekte mit Javascript hinzufügen. Hier gibt es ein schönes Tutorial und eine Demo:

http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484

— LostLin
quelle

8

+1 - Während Sie mit CSS und absoluter Positionierung viel anfangen können, sind Bildkarten immer noch die einzige Möglichkeit, den Schwebeflug auf einem nicht rechteckigen Polygonbereich zu erkennen.

— Blazemonger

10

Image Maps sind weiterhin in HTML5-Spezifikationen enthalten und werden von allen Browsern unterstützt.

Sie können mithilfe von jQuery RWD Image Maps an das reaktionsschnelle Design angepasst werden: https://github.com/stowball/jQuery-rwdImageMaps

Es erkennt und ändert automatisch die Größe der Bildkartenkoordinaten.

Es ist auch für Wordpress-Entwickler als Plugin verfügbar: http://wordpress.org/plugins/responsive-image-maps/

Einfache und effektive Lösung.

— Daniele B.
quelle

9

Ja, ich verwende immer noch Imagemaps, aber mein letztes Projekt verwendete Raphaël. Es war ziemlich einfach, etwas zum Laufen zu bringen.

http://dmitrybaranovskiy.github.io/raphael/

Von ihrer Website:

Raphaël ['ræfeɪəl] verwendet die SVG W3C-Empfehlung und VML als Basis für die Erstellung von Grafiken. Dies bedeutet, dass jedes von Ihnen erstellte grafische Objekt auch ein DOM-Objekt ist, sodass Sie JavaScript-Ereignishandler anhängen oder später ändern können. Raphaëls Ziel ist es, einen Adapter bereitzustellen, der das Zeichnen von Vektorgrafiken kompatibel und browserübergreifend macht.

Schönes einfaches Beispiel für eine Bildkarte:

http://dmitrybaranovskiy.github.io/raphael/australia.html

— David Newcomb
quelle

2

Es hätte nicht viel gekostet, den Link selbst zu reparieren, anstatt zu stöhnen und abzustimmen :(

— David Newcomb

2

Lieber David, ich habe die Ablehnung entfernt. Wie soll ich den Link reparieren, der einfach kaputt ist? Ich würde das http://raphaeljs.com/komplett entfernen und nur das Github-Beispiel liefern.

— Orschiro

6

Der Punkt von Stack-Sites ist die Zusammenarbeit. Wenn Sie einen defekten Link sehen, beheben Sie ihn, wenn Sie können. Denken Sie nicht an defekte Links, sie sind defekte Zeiger auf Ressourcen. Wenn die Ressource verschoben wurde, aktualisieren Sie den Link so, dass er auf den neuen Speicherort der Ressource verweist: Das ist das Wichtigste. Raphaeljs hatte früher eine eigene Seite, ist aber offensichtlich auf GitHub umgezogen. Senden wir Leute zurück zu Google, um herauszufinden, wo es jetzt lebt? Oder helfen wir ihnen von hier aus? Das australische Beispiel ist das gleiche Beispiel, es lebt einfach irgendwo anders.

— David Newcomb

Der http://raphaeljs.com/Link wird irgendwann unterbrochen, wenn die Domain-Registrierung abläuft, aber es gibt jetzt eine Umleitung, um allen (auf der Welt) die Möglichkeit zu geben, ihre Links zu aktualisieren. Vielleicht könnten Sie bei @orschiro mit dem im Artikel beginnen und die Zusammenarbeit hier bei SO verstärken.

— David Newcomb

1

Verstanden, danke David! Ich habe die Antwort aktualisiert und den Link behoben. :-)

— Orschiro

4

Während ich sie selten mehr auf modernen Websites sehe, scheinen sie von meinen Kunden in ihren E-Mail-Kampagnen verwendet zu werden. Ich habe jedoch festgestellt und bestätigt, dass es auf Mobilgeräten einige Skalierungsprobleme mit dem Koordinatensystem gibt.

** Ich weiß, dass dieser Thread alt ist. Ich habe gerade einige zusätzliche Nachforschungen für ein kürzlich aufgetretenes Problem mit E-Mail-Kampagnen angestellt und dachte, es könnte jemand anderem auf der ganzen Linie helfen.

Bearbeitung durch Dritte

Die Frage auf litmus.com zur Unterstützung von Imagemaps ist ab 04/2014

Image Maps unterstützen keine ALT-Tags. Wenn Bilder nicht geladen werden, wird der ALT-Text in einigen Clients nicht angezeigt.

Die Verwendung von Imagemaps führt im Allgemeinen zur Verwendung großer Bilder, was zu Zustellbarkeitsproblemen führen und die Downloadgeschwindigkeit beeinträchtigen kann (besonders wichtig für mobile Benutzer).

Und am wichtigsten ist, dass das iOS (iPhone / iPad) die Linkkoordinaten der Imagemap nicht skaliert, wenn das Bild skaliert wird, wodurch die Links unterbrochen werden. Da iOS einen Großteil der geöffneten E-Mails darstellt (iPhone + iPad = 38% über http://emailclientmarketshare.com/ ), ist dies wichtig.

— Spindel79
quelle

0

Ja, es wird immer noch verwendet

Eine Imagemap ermöglicht es einem Benutzer, durch Klicken auf verschiedene Teile eines Bildes einen Hyperlink zu vielen Seiten zu erstellen. Mithilfe der Imagemap erstellen wir einfach Koordinatenlisten, die sich auf einen bestimmten Bereich desselben Bildes beziehen, und geben den Hyperlink an einen anderen Ort. Indem wir dies in einem einzelnen Bild verwenden, geben wir mehrere Links.

Mehr

— Srikrushna
quelle

-2

Image Map ist eine sehr interessante Option in HTML und HTML5, die noch verwendet werden, und ich persönlich liebe sie. Daher finde ich Probleme auf Mobilgeräten. Mein Problem hängt mit der Skalierung zusammen

Ja, ich habe es selbst erlebt, aber ich bin ein Student, der in HTML HTML5 eingeschrieben ist, und für Anfänger möchte ich dem Link zu w3chools folgen

http://www.w3schools.com/html/html_images.asp

Sie werden viel von dieser [Seite

— Shoua Iqbal
quelle