Ich frage mich, wie man Hover-Effekte für eine Karte, die dieses Bild .
Wenn jeder Distrikt (oder Abschnitt) per Mausklick / berührt / angeklickt wird, muss ich die Farbe ändern, ohne einen anderen Bereich zu beeinflussen. Die Grenzen in jedem Abschnitt müssen für das Bild repräsentativ sein und dürfen keine Quadrate sein. Die Lösung kann keine Leinwand verwenden, da die Seite, an der ich arbeite, in älteren Browsern verwendbar sein muss (ich bin persönlich entkernt.)
Idealerweise möchte ich dies mit CSS tun, ohne zu viel JavaScript oder viele Bilder zu verwenden. Hat das schon mal jemand gemacht?
Bearbeiten: Ich weiß, dass Leute das <area> -Tag vorschlagen, aber AFAIK, akzeptiert nicht die Pseudo-Klasse: hover.
Edit 2: Ich könnte das verwenden: Ссылка
Noch eine Selbstantwort ...
Vor ein paar Monaten stieß ich auf eine Bibliothek namens Raphael JS - Ссылка . Für diejenigen von Ihnen, die nicht damit vertraut sind, ist es in erster Linie eine SVG DOM-Bibliothek. Wenn Sie etwas über SVG wissen, werden Sie wissen, dass IE es nicht unterstützt, aber es unterstützt VML. Raphael kümmert sich auch darum. Super, oder?
Wie auch immer, am Ende habe ich die AI-Datei für die Map als SVG-Datei gespeichert und die Pfade in einen JSON-Block importiert, was im Grunde dasselbe ist wie dieser Code: Ссылка
Das einzige Problem, auf das ich gestoßen bin:
Ich sehe, was das Problem hier ist: Eine Weltkarte wie gewohnt zu machen, ist eine ziemliche Last. Wenn ich es richtig verstanden habe, möchte ich ein territory map Bild haben und Hover-Effekte einfügen, damit der Hover-Bereich Ländergrenzen genau entspricht. SVG kann für die Karte verwendet werden (der Zeichnungsteil ist bereits fertig), aber das Problem ist, wie man HTML-Bereichskarte unter Verwendung von SVG-Kartenkoordinaten erzeugt. Es gibt eine Lösung (ich habe es ausprobiert, sieht gut aus zumindest mit der Demo zur Verfügung gestellt), die SVG in Raphael übersetzt (generiert die Coords) mit PHP. Aber wieder brauchst du raphael.js dafür ... nun, wenn du deine Meinung änderst: Ссылка . Und wenn Sie mit Raphael nicht vertraut sind, wird es eine Weile dauern, sich daran zu gewöhnen, Dokumentation ist nicht so gut - für mich -.
Bearbeiten: Ich kann bestätigen, dass die Übersetzung von SVG- & gt; rapahel.js funktioniert, aber SVG-Dateien müssen angepasst werden. Für das, was ich in dem SVG-Beispiel in SVG2Raphael sehe, wurden die Dateien mit Adobe Illustrator erstellt. Ich habe es mit SVG (normal) von Inkscape versucht und es hat nicht richtig funktioniert, aber ich konnte die Probleme beheben, zum Beispiel:
<path style="fill:#ff0000" ...></path> (setzt fill="none" !!! so dass das Ergebnis unsichtbar ist, aber korrekt übersetzt wird <path fill="#ff0000" ...></path> Scheint so, als würde alles in style="". Edit 2: Sie können Inkscapes style="" zum Erstellen von CSS-Regeln verwenden, die auf SVG angewendet werden. Das funktioniert großartig. ang behält den Stil außerhalb von SVG / Raphael!
Tags und Links javascript css image hover imagemap