Bereiche auf Bild verlinken

May91 schrieb am 06.08.2012 um 11:12 Uhr

Hi,

  ich stehe grade vor folgender Aufgabe:   Auf meiner Website befindet sich eien große Deutschlandkarte, ohne Städte etc., NUR mit trennlinien zwischen einzelnen Bundesländern.   Ich möchte, dass wenn der Besucher auf dein Bundesland klickt sich dieses in einem pop-up fenster in groß öffnet... hab ich auch alles schon soweit vorbereitet nur weiß ich nicht wie (bzw. ob) ich einzelne Bereiche auf der Karte so genau verlinken kann.

Würde mich sehr über eien Antwort freuen!   Freundliche Grüße :)

Kommentare

Ehemaliger User schrieb am 06.08.2012 um 12:19 Uhr

ich würde eine art button machen oder ein Bild erstellen und darauf verlinken

Ehemaliger User schrieb am 06.08.2012 um 12:19 Uhr

ich würde eine art button machen oder ein Bild erstellen und darauf verlinken

marboe schrieb am 06.08.2012 um 12:53 Uhr

Das Problem dass May91 dann haben wird ist folgendes:

Egal wie sorgfältig sie die Bundesländer nachzeichnet - das fertige Bild bzw die vielen Bilder werden immer 4eckig gespeichert. Somit sind die "Ecken" der einzelnen Bundesländer nie sauber.

Ich hab auf meiner Seite Wochen da dran gesessen hier eine akzeptable Lösung zu finden. Letztlich habe ich aus rechtlichen Gründen alles selbst gemalt und die Länder ein wenig auseinandergezogen um den beschriebenen Effekt abzumildern. Bei mir war die Entscheidung dann zugunsten eines Buttons. Weil man einem PopUp nur komplett einen Link verpassen kann, aber nicht einer Zeile Text darin zum Beispiel.

Ich möchte, dass wenn der Besucher auf dein Bundesland klickt sich dieses in einem pop-up fenster in groß öffnet

Und dann? Soll der User nur lesen was da steht oder soll noch eine Aktion möglich werden?

Gruß Martina

May91 schrieb am 06.08.2012 um 14:56 Uhr

Vielen Dank erstmal für die shcnelle Hilfe! :)

Fuchsig wie ich bin hab ich das problem jetzt selbst gelöst:

Habe die Bundesländer mit kleinen Kästen gefüllt, diese dann unsichtbar gemacht und einzeln auf die Pop-up Ebenen verlinkt. Hat zwar gedauert, aber dafür ist das ergebnis jetzt genau so wie ich es wollte. :)

@marboe Falls dich das noch interessiert, in der neuen Pop-up Ebene soll der nutzer dann auf kleine Fähnchen klicken können um zu einer externen seite geleitet zu werden :)

Freundlcieh Grüße an alle

May91 schrieb am 06.08.2012 um 15:00 Uhr

@marboe

was ich bei dir jetzt noch nicht ganz verstanden habe ist warum deien entscheidung auf einen button fiel... wie meinst du das mit "nur einen Link verpassen" bei mir sind viele Objekte innerhalb der pop-up Ebene und auch Text noch weiter verlinkt...

marboe schrieb am 06.08.2012 um 17:37 Uhr

Hi May91!

Meine Entscheidung fiel letztlich auf den Button, weil die herausgearbeiteten Bundesländer sich - je nach Bildschirmauflösung - für mich unkontrollierbar übereinandergeschoben haben an den Rändern. Deine Lösung klingt interessant. Gibt es eine Website wo man sich das mal ansehen kann?

Deine Behauptung, dass man auf PopUp-Ebenen weiter einzelne Objekte verlinken kann macht mich jetzt so neugierig, dass ich dies gleich mal ausprobieren muss. Bei mir hat das bisher nicht funktioniert. Aber es ist nicht ausgeschlossen, dass mich da wieder irgendwelche Gruppierungen irrgeleitet haben. Meine Deutschlandkarte ist schon einige Jahre alt und wurde meiner Erinnerung nach mit der WD-Version 5 erstellt.

Ich schau mal :-))

 

Ergänzung 18: 47 Uhr:

Du hast völlig recht. Abgerundetes Rechteck mit Textbereich als Gruppe lässt sich nur komplett verlinken. Also Gruppierung entfernt und alles funktioniert wie gewollt :-) Danke für den Gedankenschuppser. Manchmal ist das wie mit Wald, Bäumen und so ...

BeRo schrieb am 07.08.2012 um 01:23 Uhr

[...] Ich möchte, dass wenn der Besucher auf dein Bundesland klickt sich dieses in einem pop-up fenster in groß öffnet [...]

Ein Problem, das so oder in ähnlicher Form öfter gewünscht wird. Auf verschiedenen Websites findet man denn auch funktionierende Lösungen... 

Die Lösung, die Deinem Wunsch- und der Vorstellung von marboe am nächsten kommt, könnt Ihr hier ansehen.

Wie Ihr das nachbauen könnt, versuche ich mal zu beschreiben:

  1. Eine geeignete Kartte anfertigen und in der Größe speichern, wie sie später auf der Webseite erscheinen soll. Sagen wir in der Größe von 358 x 500 px
  2. In einem geeigneten Bitmap Editor die xy Koordinaten aller Eckpunkte der Bundesländer suchen und notieren. Ein gut geeignetes Programm ist z. B. Paintshop Pro



    Für alle Länder kommen schnell ein paar hundert Zahlenpaare zusammen, die aber länderspezifisch, säuberlich getrennt bleiben müssen. Das wird also eine echte Fleißarbeit.
    Beim Eintragen der Koordinatenpaare bitte zuerst den x-Wert, dann den y-Wert eintragen (kommasepariert)
  3. Jetzt kann der Platzhalter für die Karte im WD angelegt werden (für unser Beispiel Größe 385 x 500 px) und der "Zahlenfriedhof" in den HTML Code eingebunden werden, der dann im Body des Platzhalters landet.

    So kann kann z. B. der vollständige Code für ein Bundesland  aussehen (hier ist das NRW):

    ------------------------------------------------------------
    <img src="index_htm_files/BRD-Karte.png" width="358" height="500" alt="" usemap="#Karte" style="margin-top: 10px;border:1px solid #DDD;" id="nrwmap"/>
    <map name="Karte">


    <area shape="poly" coords="49,177,65,177,71,169,81,176,81,187,84,189,78,196,95,192,97,194,102,189,98,184,96,175,94,
    174,94,171,104,171,111,168,114,175,123,169,127,170,127,178,122,184,123,192,128,196,127,201,133,
    209,139,210,134,220,135,226,125,233,123,231,117,233,117,239,108,240,104,246,109,264,106,257,100,
    257,101,263,95,281,81,279,80,274,72,269,71,256,64,275,43,288,41,287,35,290,35,293,32,292,29,296,
    29,300,26,300,23,297,20,300,14,300,13,289,8,290,7,285,9,283,9,280,6,280,5,272,2,271,2,267,4,264,1,256,
    1,253,8,252,8,245,5,245,11,237,13,227,7,224,8,215,4,210,4,207,10,207,14,204,20,209,21,205,28,203,
    33,204,37,196,35,193,43,186,49,184,49,178" href="javascript:xr_cpu(4)" title="Nordrhein-Westfalen">

    </map>
    ----------------------------------------------------------
    Die im Code gelb markierten Bereiche enthalten Angaben zur anzuzeigenden Hauptkarte (hier "BRD-Karte.png", zur Karte auf der popup Ebene, die hier über eine Javascript Funktion aufgerufen wird "javascript:xr_cpu(4)" und zum eingeblendeten Ländernamen "Nordrhein-Westfalen", der aufpopt, wenn der Mauszeiger sich innerhalb der Grenzen eines Bundeslands befindet.

    Der im Code grün eingefärbte Bereich ist länderspezifisch. Er muss so oft (mit anderen Koordinatenpaaren und Namen) angelegt werden, wie Länder angezeigt werden sollen.

    Neu angelegte Länder werden dann einfach unten angehängt, vor dem abschließenden "</map>"

    In dem für unser Beispiel angelegten Projekt sieht das jetzt so aus:



     
  4. Das unfertige Projekt sollte jetzt schon exportiert werden, damit der WD das Verzeichnis "index_htm_files" anlegt.
  5. In das Verzeichnis "index_htm_files" kopieren wir dann die Kartendateien (Hauptkarte und Länder-Detailkarte(n))
  6. Das Projekt noch einmal exportieren und in der Vorschau das fertige Ergebnis ansehen. Wenn alles richtig gemacht wurde, kann jedes der angelegten Bundesländer randscharf selektiert werden.



     
  7. Auch die popup Funktion für die vergrößerte Darstellung der Bundeländer sollte funktionieren.



     
  8. Im Wesentlichen war's das 

Vielleicht noch ein Wort zum Aufruf der JS Funktion für die die Aktivierung der popup Ebene mit der Detailkarte.

Den Namen der jeweiligen Funktion findet man am besten heraus, wenn man zum Test einem Button einen Link auf die popup Ebene des jeweiligen Bundeslandes verpasst, dann in der Vorschau den Mauszeiger auf den Button stellt und in der Fußzeile den Namen der Funktion abliest.

 

Den so gefundenen Namen der Funktion, hier "xr_cpu(4)", in den HTML Code, ans Ende der länderspezifischen Koordinatenpaare schreiben.

Wie immer, gibt es auch heute wieder ein Schmankerl, die online Demo und die komplette Projektdatei zum Download, für eigene Experimente, inkl. aller Karten etc.

Die online Demo findet Ihr hier
Die Projektdatei (ZIP Archiv) könnt Ihr hier herunterladen.

Na dann, viel Erfolg

-------------------

P.S.

Die o. a. Links für die online Demo- und für den Download bleiben für ca. 1 Monat aktiv. Danach nehm' ich die Dateien vom Server (Platz sparen).

Wer später noch Bedarf hat, der kann mir gerne eine PN schreiben.

------------------

Edit: 07.08.  13:11 h

Ergänzung in der Anleitung für den "Zahlenfriedhof" eingefügt.

Zuletzt geändert von BeRo am 07.08.2012, 13:11, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

marboe schrieb am 07.08.2012 um 07:25 Uhr

WHOW 

Man beachte die Uhrzeit  *hihi  DANKE BeRo !! Ich schicke dir hiermit mal eine richtig fette virtuelle Umarmung!

Da ergeben sich für mich noch ganz andere Möglichkeiten. Auch wenn ich mittlerweile ein schönes Grafiktablett für die Bildbearbeitung habe bleibt es eine Fleißarbeit, die ich definitiv in den Urlaub verschieben muss. Ich lade mir zur Archivierung aber auf jeden Fall die Dateien runter.

Theoretisch kann ich alles nachvollziehen. Aber eine Frage ist noch übrig: Die Code-Zeile  id="nrwmap"/> <map name="Karte"> - wo kommt der ID-Name her? Der Name deiner .web Datei?

Dankbare Grüße Martina

 

P.S.: für alle die das nachbauen wollen: vor einigen Jahren hab ich mich damit ja näher beschäftigt. Damals war es so, dass man aus urheberrechtlichen Gründen nicht einfach eine Karte aus dem Netz kopieren durfte. Das wird sich nicht groß geändert haben. Es gibt aber Deutschlandkarten zur freien Verfügung - laufen dann unter einer bestimmten Lizenz. Bitte aufpassen!

BeRo schrieb am 07.08.2012 um 08:58 Uhr

@ marboe

[...] wo kommt der ID-Name her? [...]

Das ist ein "Blinddarm" 

Im Ernst. Die ID ist ein Überbleibsel aus einer anderen Anwendung, in der ich den Code verwendet habe. Ich habe lediglich übersehen, ihn für das Beispiel zu löschen.
Der Codeteil kann also getrost entfallen...

BTW

Dein Hinweis auf geltendes Copyright ist goldrichtig und sollte unbedingt beachtet werden, wenn Kartenmaterial auf der eigenen Website veröffentlicht wird. Ich werde sicherheitshalber noch einen Quellenvermerk anbringen.

Zuletzt geändert von BeRo am 07.08.2012, 08:58, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓