Image map mit verlinkter Tabelle / Mouseover

[jabra]

Hallo!

also ich habe jetzt schon viel gegoogelt und rumprobiert, aber ich komm einfach nicht dahinter, wie ich es am besten anstelle:

Ich habe eine Deutschlandkarte mit vielen Punkten drauf verteilt, die jeweils Standorte anzeigen.

Unter drunter ist eine Liste mit den einzelnen Standorten - wie im angehängten Bild.

Ich möchte nun, dass wenn man beispielsweise mit der Maus über "Frankfurt" in der Liste fährt, der dazugehörige Punkt oben sich irgenwie verändert, so dass man sieht, dass der Punkt oben zu dem "gemausoverten" Wort unten gehört. Und das am Besten auch noch umgekehrt - Sprich ich gehe mit der Maus auf nen Punkt und in der Liste verändert sich Frankfurt...

Ich freue mich über Hilfe!

 

[gKar]

Wenn Du die Punkte in der Karte irgendwie ansteuern und verändern willst, stellt sich die Frage, wie Du die Karte und die Punkte überhaupt realisiert hast.

Was ich anpeilen würde ist:
Karte ohne Punkte (also nur die graue Fläche) als Grafik ablegen.
Punkte als vom Browser gezeichnete Objekte (z.B. DIVs mit eigener ID, die per CSS eine feste Breite und Höhe und Farbe und ggf. noch – wenn's Kreise statt Quadrate sein sollen – ein Border-Radius zugeordnet bekommen), die per absoluter CSS-Positionierung über der Karte angeordnet werden. Das Anordnen per CSS-Positionierung dürfte zwar etwas fummelig werden, aber dafür könnte man dann die Punkte per JavaScript adressieren, da jeder Punkt ein Node im DOM ist. Und dann könnte man die Punkte auch problemlos hervorheben (z.B. vergrößern, andere Farbe und vielleicht Schattenwurf hinzufügen), sobald auf einem korrespondierenden Listenelement die Maus hovert. Umgekehrt ginge das genauso.