[CSS/JS] Interaktive Landkarte mit Hover/Highlight

DelphiKing

DelphiKing

King with a crown
ID: 46719
L
20 April 2006
6.553
729
Aloha,

ich möchte eine Landkarte realisieren, auf der diverse Bundesländer eingezeichnet sind. Wenn man eines dieser Länder anklickt, kommen dann eben Infos oder ähnliches.
Das ist mit einer ImageMap ja gut lösbar.

Allerdings will ich zur besseren optischen Visualisierung das Land, welches sich momentan unter dem Mauszeiger befindet, noch optisch hervorheben, also z.B. in einer anderen Farbe darstellen. Also ein Hover-Effekt.

Nur wie realisiere ich diesen Effekt? Geht das irgendwie?

Würde halt gerne auf Flash verzichten, da ich erstens nur Flex kann (und ich weiß nicht, ob das da so einfach machbar ist) und vor allem das ganze auch ohne Flash lauffähig sein sollte.


Grüßle, flo
 
Mein Ansatz wäre, für jedes Bundesland wieder die Original-Karte, nur eben mit markiertem Bundesland, zu erstellen.
Dann die Karten mit position:absolute alle übereinander legen und bei Bedarf ein- und ausblenden.

Die Frage wär dann nur, wie gewährleistet wird dass alle Grafiken auch dann da sind, wenn sie gebraucht werden und nicht zu früh und nicht zu spät ... *überleg*
 
Naja sinnvoll wäre vielleicht eher ein Bild nur des bundeslandes, das so über der ganzen Karte positioniert ist wie es sein müßte. So das man also eine Ganze und 16 Teilkarten hat. Das würde zumindest die Größe (in kb) etwas verringern.
 
da unsere Bundesländer keine rechteckigen Ausmaße haben, sehe ich da schon Probleme mit dem Hoover kommen, wenn sich 2 Bilder überschneiden.
 
naja mit js ist es machbar, wenn man die koordinaten der Grenzen hat. Dann muß man nur herausfinden in welchem polygon sich der mauszeiger befindet.

mit css allein wird das nichts, aber mit js machbar.
 
Bububoomt schrieb:
naja mit js ist es machbar, wenn man die koordinaten der Grenzen hat. Dann muß man nur herausfinden in welchem polygon sich der mauszeiger befindet.
Zum Vergrößern anklicken....
öhm, ich bin mir nun nicht ganz sicher, aber wenn 2 Bilder sich überlappen, wird ein onmouseover doch nur für eines der beiden Bilder gefired, hmm, dann müsstest du wirklich durch Lookup-Tabellen noch bestimmen welches Bild dadrunter liegt. Und mit JS kommst du dann ja meine ich immernoch nicht an die Information ran, welche Farbe der Pixel unter dem Mauszeiger hat um zu bestimmen ob das obere oder untere Bild das gehooverte sein soll.


Bububoomt schrieb:
das nützt dir aber nichts beim hover ;)
Zum Vergrößern anklicken....
richtig, darauf wollte ich ja auch hinaus. Graccem hat sich einfach zu sehr gefreut, dass er mir wiedersprechen kann :biggrin:
 
@ ice, du legst das onmouseover natürlich nciht auf ein bild sondern auf ein transparentes Div (beim ie muß dem dennoch ne Hintergrundfarbe gegeben sein), das immer ganz oben liegt (z-index 3)
Ganz unten liegt das Bild (z-index 1) und wenn eins angezeigt werden soll, so liegt dieses dazwischen (z-index 2).
 
bundeslaenderc118f.png

(Bild auf MyImg, bitte laden lassen)


So der Mauszeiger ist der kleine Kreis, das blaue und rote sind 2 Fantasie-Bundesländer, die Rahmen zeigen wie groß die beiden einzelnen Bilddateien sind.

Der Mauszeiger hoovert momentan auf dem roten Bundesland, aber eigentlich ist das Bild an der Stelle transparent, also soll der Hover für das blaue Bundesland gelten. Aber das erkennen wir nicht so einfach weil JavaScript das rote gewählt hat, da es weiter oben liegt.

Meine Frage: Wie erkennst du jetzt, dass das Blaue "gehoovert" ist? Vllt stelle ich mich ja auch blöd an und verstehe deinen Ansatz net.

Edit: Selbst wenn du den Hoover auf ein Div darüber machst müsstest du ja noch ne Lookup-Tabelle für jeden Pixel erstellen oder durch irgendwelche komplexen mathem. Berechnen berechnen zu welchem Bundesland der Pixel gehört.
 
Ich würde da eher zu einem Applet tendieren.

Problem bei den Ansätzen is halt immer, dass das sehr abhängig vom Browser is. Wenn kein JavaScript da is, ok, dann geht halt einfach nix, aber so Transparenz-PNGs mit dem IE... :-? Und GIF hat halt nur 256 Farben, was auch nicht toll is.

Flash wäre dafür schon die einfachere Alternative, wenn es wirklich optisch so anspruchsvoll sein muss.
 
Hm, ja, vielleicht muss es doch Flash sein .. mal schauen, ob ich da irgendwie was basteln kann mit Flex :/

Aber danke schonmal für den Input, ich werde das auf jeden Fall nochmal durchdenken...
 
ice-breaker schrieb:
(Bild auf MyImg, bitte laden lassen)


So der Mauszeiger ist der kleine Kreis, das blaue und rote sind 2 Fantasie-Bundesländer, die Rahmen zeigen wie groß die beiden einzelnen Bilddateien sind.

Meine Frage: Wie erkennst du jetzt, dass das Blaue "gehoovert" ist? Vllt stelle ich mich ja auch blöd an und verstehe deinen Ansatz net.

Edit: Selbst wenn du den Hoover auf ein Div darüber machst müsstest du ja noch ne Lookup-Tabelle für jeden Pixel erstellen oder durch irgendwelche komplexen mathem. Berechnen berechnen zu welchem Bundesland der Pixel gehört.
Zum Vergrößern anklicken....

Natürlich muß da eine Berechnung erfolgen. Wie gesagt man müßte nur ein geom (ob nun in pixelkoordinaten oder realen koordinaten) der grenze haben, dann sollte das gehen.

theHacker schrieb:
Problem bei den Ansätzen is halt immer, dass das sehr abhängig vom Browser is. Wenn kein JavaScript da is, ok, dann geht halt einfach nix, aber so Transparenz-PNGs mit dem IE... :-? Und GIF hat halt nur 256 Farben, was auch nicht toll is.
Zum Vergrößern anklicken....
Für PNG und IE (glaube ab 5.0) gibt es eine rat bugfix. Geht durch ein CSS Attribut.
Und gif wäre doch auch ok, wenn man ja nur eine Farbe nutzen will.


Hier mal nen beispiel mit map, wäre woh das simpelste,
https://www.savethechildren.net/alliance/where_we_work/main.html

Hat einen nachteil, wenn man die Bildgröße ändert,dann passen die Pixelangaben nicht mehr. Also einfach mal eben bild auf 50% setzen ist nicht.
 
Zuletzt bearbeitet:
Bububoomt schrieb:
Hat einen nachteil, wenn man die Bildgröße ändert,dann passen die Pixelangaben nicht mehr. Also einfach mal eben bild auf 50% setzen ist nicht.
Zum Vergrößern anklicken....

Man kann die Koordinaten einfach auf den entsprechenden Maßstab umrechnen.
Also bei 50% einfach halbieren.

Also das sollte das kleinste Problem sein.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben