Frage zum Wiki-Artikel „SVG_und_JavaScript“

[Matthias Scharwies]

Servus!

Ich habe mit einem Tool eine interaktive SVG-Karte erzeugt, die soweit auch funktioniert. Inhalt sind sämtliche PLZ-Bereiche in D, diesen sind in Vertriebsbereiche zusammengefasst.

Ziel ist es jetzt, da eine Suchfunktion draufzusetzen, die es dem User erlaubt, seine Postleitzahl anzugeben und damit herauszufinden, welches Vertriebsgebiet für ihn zuständig ist.

Heisst, bei einem Treffer soll der Hoover-Effekt, der bei einem Mouseover über der Karte ohnehin entsteht, über den PLZ-Parameter ausgelöst werden. innerhalb der Polygone sind die Infos z. B.: id="01067 Dresden" data-info="01067 Dresden" enthalten (für alle PLZ in D).

Ich vermute stark, dass sich das per JS lösen lässt, habe aber auch nach umfangreicher Suche noch nicht mal ein Beispiel finden können, welches mir auf die Sprünge hilft.

Sind deine Polygone innerhalb eines a-Element gekapselt? Dann kannst du den :hover-Effekt auch mit der Tabtaste erzielen:

a:hover polygon,
a:focus polygon {
  fill: irgendwas;
}

Dann musst Du beim Suchergebnis ermitteln, welcher Zahlenbereich / Name gewählt ist.

• JavaScript/Tutorials/Formulare/Eingaben_mit_JavaScript_auswerten

Dann suchst du das betreffende Polygone, das hoffentlich eine eindeutige id hat, und weist diesem den Focus zu:

JavaScript/DOM/HTMLOrSVGElement/focus

Et voilá : farbig markiert.

Herzliche Grüße

Matthias Scharwies