Bei all den jüngsten Fortschritten in JavaScript / HTML5 wäre es schön zu glauben, dass es eine modernere Art der Implementierung einer Imagemap geben würde. Ich weiß, dass Sie eine Karteneigenschaft für das Tag festlegen können, aber ich denke nicht, dass dies gut formatierte Tooltips auf Rollover (in der Nähe der Region) unterstützt. Meine Anforderungen sind nur Tooltips, OnClick / DoubleClick-Aktionen für eine Region innerhalb eines Bildes.
Die letzten Fragen hier über ähnliche Dinge, die ich gefunden habe, waren vor 5 Jahren.
Idealerweise würde ich gerne js / html / css verwenden und keine JQuery-Plugins usw. verwenden, obwohl ich sehe, dass es ein paar gibt.
Nachdem ich Paulie_D's Kommentar über SVG berücksichtigt habe, habe ich eine Alternative geschrieben Verwenden von SVG für die klassische Imagemap. Beide funktionieren gut, aber die SVG-Version gewinnt deutlich, wenn es um die Reaktionsfähigkeit geht. Beide Versionen haben über das href -Attribut eine Verbindung zwischen den Ankern und dem jeweiligen Tooltip. Beide Lösungen arbeiten mit JavaScript-JavaScript, ohne eine zusätzliche Bibliothek.
Vorteile
HTML
%Vor%CSS
%Vor%JavaScript *
%Vor%Hinweise
Demo
HTML
%Vor%CSS
%Vor%JavaScript *
%Vor%Hinweise
data-* -Attributen, entkoppelt das JavaScript (leider können Sie offsetLeft/Top area -Elements) - Sie könnten dies jedoch mit dem coords -Attribut Demo
* In beiden Beispielen könnte das JavaScript verbessert werden, z. Speichern Sie QuickInfo-Elemente in einer Variablen, anstatt sie ständig erneut abzufragen.
Tags und Links javascript html css html5