Wie erstelle ich "interaktive" Landkarte mit DW?

Konrad Zuse

Konrad Zuse

Aktives Mitglied
Thread Starter
Dabei seit
15.02.2006
Beiträge
3.348
Reaktionspunkte
547
Der Titel ist zwar ein wenig komisch, aber ich wußte nicht so richtig, wie ich es ausdrücken soll.
Wie kann ich in DW am einfachsten eine Landkarte so bearbeiten, daß beim drüberfahren mit der Maus der jeweilige Landesname angezeigt wird und auf klick sich ein weiteres kleines Popup-Fenster öffnet, indem dann die jeweiligen Daten stehen?
Habe die Länder schon als Hotspots bearbeitet, aber dann kam ich nicht richtig weiter. Auch zeigt mir Firefox den eingegebenen Alt-Text nicht an, MS IE macht das wiederum.:confused:
Vielen Dank für eure Hilfe.
 
du musst die hotspots dann noch mit ebenen belegen.. (also einblenden/ausblenden)
 
Das wären ja bei 27 Ländern, 27 Ebenen (Masken).
Gibt es eine simple Lösung, um so etwas (die Deutschlandkarte) anzufertigen?
OK, das ist ein Flashfilm, ich weiß. Ich will es auch nicht als Flashfilm machen. Es würde mir auch reichen, wenn bei Mouseover über z.B. Spanien, nur der Name "Spanien" erscheint und dann bei Klick auf das Land, die näheren Informationen in einem Popup-Fenster erscheinen.
Ist so etwas mit simplen Mitteln in PS oder DW realisierbar?:confused:
 
ich glaub ohne Flash wirst du nicht um die Ebene herum kommen.
 
und lässt er über eine Imagemap die Ländernamen einblenden?
 
Jein.

Jede Area hat ein ALT-Attribut, was bei allen mir bekannten Browsern als Tool-Tip angezeigt wird.

Ansonsten gibts ja noch das "Title"-Attribut.
Oder man macht ein JavaScript-Tooltip, was via onMouseOver bei den Areas reagiert...
 
OK Jungs, das wird mir wohl zu kompliziert (bin Laie).
Nehmen wir eine abgespeckte Version, wie z.B. hier.
Würde mir auch schon reichen, nur, nach klick auf das Land sollte sich das Ergebnis nicht in einem Frame (wie hier) öffnen, sondern als kleines Pop-Up-Fenster, in dem aber auch das verfolgen eines Links möglich sein muß.
Is it simple realisierbar?:confused:
 
Was meinst Du mit Verfolgen eines Links?

Die Thematik mit den Text-Areas hab ich ja oben schon verlinkt.
Wie das jetzt in Rapidweaver geht, kann ich nicht sagen.
Image-Ready ist aber ein nettes Tool, um ImageMaps zu erstellen :) Da hab selbst ich das ganz flott hinbekommen :D

Statt einer URL im Verweis kommt dann die JavaScript funktion "window.open()" zum Zuge:

HTML: 
<area shape="rect" coords="11,10,59,29"
          href="javascript:window.open( Parameter für die Funktion )" alt="Koblenz" title="Koblenz">

Um mit JavaScript ein Tooltip zu erstellen, müsste man jetzt weiter ausholen.
Da gibts aber sicherlich schon fertige Codebeispiele, die halt nur ein wenig angepasst werden müssten :)

gruß
Lukas
 
koli.bri schrieb:
..Wie das jetzt in Rapidweaver geht, kann ich nicht sagen....
Zum Vergrößern anklicken....

Dream nicht Rapid!

Ok, dann muß ich mich wohl mal mit Imageready auseinandersetzen.
Mit verfolgen eines Links meine ich nur, daß man im Pop-Up-Fenster auf den Link drückt und dieser dann aktiviert wird. Ich könnte ja auch auf ein Bild verlinken, aber da habe ich dann ja keine Möglichkeit einen funktionierenden Link einzubauen.
 
Pardon, meinte freillich Dreamweaver :D

Das mit den Links funktioniert wie bei Frames über das "target"-Attribut des Links, bzw, der Area der Imagemap.
Du gibts einfach "_parent" an, und der Link öffnet sich im "Hauptfenster".

Es gibt irgendwo bei SelfHTML ein Beispiel dazu, wo man die Navigation in einem extra-Fenster drin hat...
Ich finds nur nicht -.-
 
@koli.bri
Ja, vielen Dank für Deine Beiträge und Deine Mühe (ganz besonders bei Self-HTML).
Ich habe jetzt mal ein wenig mit Imageready rumprobiert und bin zu der Überzeugung gekommen, daß es für meine Zwecke funktionieren sollte.
Allerdings habe ich zwei Probleme::eek:
1. Der Alt-Text wird zwar im IE, aber nicht im Firefox angezeigt.
Gibt es eine Möglichkeit, den Text auch im Firefox anzuzeigen?
2.*peinlich,peinlich* In der Browservorschau läuft alles wie ich es will, aber als was (gif,png,etc.) muß es denn abgespeichert werden, damit ich das fertige "Bild" dann in DW einfügen kann (und es auch funktioniert)? :eek:
Vielen Dank im Voraus für die Hilfe.
 
1. mach aus dem Alt Text ein verstecktes Div, das beim drüber fahren angezeigt wird!
 
2:
In Imageready CS2 heißt der Punkt "Optimiert Version Speichern (unter..)

Der Befehl erzeugt eine HMTL-Datei, und einen Ordner, in dem sich die Grafik(en) befinden.
In der HTML-Datei kannst Du den Quelltext für die Image-Map rauskopieren.
Les dazu am besten mal den Beitrag von SelfHTML zu ImageMaps quer, da das nicht ganz so logisch ist, wie man vermutet. Ist aber nicht großartig Kompliziert, halt nur nicht Intuitiv :)

Das ganze dann in dein Projekt kopiert, und dann kanns weiter gehen :)

Und wegen dem Tooltip guck ich mal, ob ich da was schnelles einfaches finde. :)

gruß
Lukas
 
Eure Tipps sind ja alle gut, aber leider mehr oder weniger kompliziert (für'n Laien wie mich). Wobei der Vorschlag von Koli.bri für mich wohl am einfachsten umzusetzen scheint, aber es hapert an der vorhandenen Zeit. Deswegen habe ich mal das Internet bemüht und das hier gefunden (ein Stückchen runterscrollen).
Bloß, wie wird es bearbeitet? Kann ich die fertige Map dann in DW einsetzen?
 
Hm... So wie ich das lese ist das Flash.


Ich weiß jetzt aber nicht, wo dein Problem mit der Zeit ist :noplan:

die Image-Maps zu kreieren?
Wenn Du die Bilder für die Karten so hast, dass Du jedes Gebiet mit dem Zauberstab auswählen kannst, geht das ganz flott in Image-Ready.
du wählst aus, und wählst dann im Menü "Auswahl" "Imagemap aus Auswahl erstellen". Das ganze für die ganzen Gebiete, und ein Großteil der Arbeit ist getan :)
Man sollte halt nur drauf achten, dass man hier schon das Endmaterial an Grafiken hat, da, wenn sich da was ändert, man das ganze quasi von Vorn machen muss...
Die URL, bzw. PopUp-Links würde ich gar nicht in ImageReady eintragen, sondern nachher im Quelltext.

Die Tooltipps sind im Grunde auch nur ein wenig Arbeit im Quelltext. JavaScript-Datei einbinden, und bei den antsprechenden HTML-Elementen das onMouseOver mit hinzufügen.

Ja, es ist Arbeit im Quelltext, die vielleicht ungewohnt erscheint. Aber lass Dich drauf ein. Lass es fünf Stunden sein, die Du daran arbeitest.
Mit der Flash-Karte für 70 Dollar bist Du erstmal Geld los, und musst Dich noch in deren Gewurschtel einarbeiten. Das kann locker mal zwei Tage dauern :)

Je nachdem, bis wann Du den Kram fertig haben musst, ich kann Dir da auch am wochenende oder so mal per ICQ helfen.

Die größte Hürde, die ich sehe, ist, dass du dich vor dem Quelltext scheust.
Aber so schlimm ist der gar nicht :)
Und wenn Zeit für Dich ein Faktor ist, und dies nicht das letzte DW-Projekt von Dir sein wird, so mach jetzt ruhig ein zwei Stunden Minus, um das, was Du jetzt an erfahrung mitnimmst, beim nächsten Projekt mit reinsteckst :)

Also, von wie vielen Karten sprechen wir?

gruß
Lukas
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben Unten