Landkarte mit Seitenverlinkung

Was ist denn eine PH Verlinkung?

Beim Beispiel ist die Karte eine Hintergrundgrafik eines DIVs und die anklickbaren Punkte sind per absoluter Positionierund im DIV platziert.

Gruß
Ingo

Oder halt einfach mit Image-Map umsetzen, ist vielleicht einfacher.

http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm

Gimp kann das mit einer Grafik Datei auch umsetzen und in einem Format speichern was du dann nur noch hochladen musst.

Danke für den Hinweis, denn das wusste ich auch noch nicht. Eigentlich bearbeite ich meine Bilder immer mit PSP und da war schon die Beschreibung so, dass ich dachte manuell schneller zu sein. Auf Gimp greife ich eher selten zurück, doch das musste ich doch gleich einmal ausprobieren, ging einfach und schnell nach dieser Anleitung:

http://webmasterparadies.de/scripting/sons…n-mit-gimp.html

Eine Möglichkeit ist die Seiten oder Artikel zu verorten und dann einfach eine Landkarte anzeigen lassen, die automatisch alle Orte markiert - wie das mit dem WP OSM Plugin geht, siehst Du hier:
http://wp-osm-plugin.hanblog.net/exsamples/display-geotagged-posts/

Du kannst aber auch Flächen in der Karte zB per KML File klickbar machen:
http://wp-osm-plugin.hanblog.net/tutorial/how-t…-blog-with-kml/

Du solltest

a.) Deine Seite mit der nicht sichtbaren Karte hier verlinken, damit man einen Blick in den Quelltext werfen kann
b.) und notfalls, falls der Editor den Quelltext von Gimp zerschießen sollte, diesen per Plugin und Shortcode oder so hinzufügen, was auch ganz einfach ginge, wenn man es einmal gesehen hat.

Und wo ist die Grafik geblieben?
Ich sehe keine, warum nicht?
Möchtest Du die uns unterschlagen?

Hatte ebenfalls mit einem kleinen Tutorial und Plugin begonnen, nur ab Seite fehlt noch die Beschreibung.

http://www.coder-welten.com/image-maps-lan…n-mit-hotspots/

Ich bin gerade über dieses Posting hier gestolpert, weil ich genau so etwas gesucht habe. Ich will auf meiner Seite eine Karte für unsere Dorfchronik mit alten Häusern erstellen, die bereits abgerissen wurden aber für die Dorfgeschichte einen gewissen Wert haben. Auf der Karte sollten diese Häuser mit alten Bildern abgebildet werden, ein klick darauf sollte dann zu einer Seite mit der Geschichte des Hauses führen. Ich habe mir wochenlang Gedanken gemacht, wie ich das wohl bewerkstellige, und jetzt habe ich die perfekte Lösung dank eurer Hinweise gefunden :-). GIMP benutze ich schon lange, und das ist wirklich die beste kostenlose Bildbearbeitungssoftware, die es gibt. Allerdings hatte ich von imagemap bisher nichts mitbekommen.

Langer Rede kurzer Sinn: ich habe mich natürlich gleich daran gemacht und das ausprobiert. Das oben verlinkte Tutorial ist wirklich gut, ich hatte nach 5 Minuten tatsächlich eine Test-imagemap erstellt.

Allerdings fehlt da etwas ganz entscheidendes, und so brauchte ich noch weitere 5 Minuten, bis ich dahinterkam, warum das Bild auch bei mir nicht angezeigt wurde.

Wenn das Bild bearbeitet ist, dann muss dieses zu WP hochgeladen werden, wenn es noch nicht vorhanden ist.

Der Link zu dem Bild muss dann in den Quellcode anstelle von "unbenannt" zwischen die Hochkommata eingefügt werden, sonst wird das Bild nicht gefunden:

<img src="[COLOR=#ff0000]Hier muss der Link zum Bild hinein[/COLOR]" width="992" height="604" border="0" usemap="#map" />

Dann den Code in die zu erstellende Seite oder Beitrag in das Textfenster (nicht "visuell") des Editors einfügen.

Bei mir hat es dann einwandfrei funktioniert.

Gruß
Dex

Hallo Simone,

Du hast das Bild, aus dem die imagemap erstellt wurde, zu WP hochgeladen?

Du hast im HTML-Code das Wort "unbenannt" gegen den kompletten URL-Pfad zu Deinem Bild ausgetauscht? (Laut Seiteninformationen steht dort bei dir immer noch "unbenannt"!)?

• Den kompletten Pfad erhälst Du, in dem Du in der Mediathek das Bild auswählst, auf bearbeiten gehst und dann rechts aus Datei-URL diesen kopierst. Achte darauf, das es auch wirklich die komplette URL ist.

Du hast den Code in den Textbereich der Seite eingefügt (nicht in den visuellen Bereich!)?

Wenn Du alles so gemacht hast, dann sollte das Bild mit Deinen Verlinkungen dort auch erscheinen.

Genau, so schaut es aus mit "unbenannt" und ich würde es auch einmal gerne sehen, wie es bei Dir ausschaut und wie es sich bei einem responsiven Design wie Deinen verhält, wenn die Seite verkleinert wird.

Bei meinem stimmten bei Verkleinerung und somit Schrumpfung des Images durch das responsive Design die x- und y-Koordinaten nicht mehr. Als Ausweg musste ich innerhalb des Image-Tags zusätzlich max-width und max-height angeben. Damit das Bild dennoch nicht das Design bei Verkleinerung des Browserfensters sprengt, in einem Div legen und dieses als Style overflow:auto zuweisen.

Die Imagemap sieht bei mir nun etwa so aus:

<div style="width:100%; text-align:center; overflow:auto">
  <img src="www.example.com/europa.jpg" alt="Europa" usemap="#europa" 
  style="width:540px; max-width:540px; height:695px; max-height:695px" />
</div>
<map name="europa">
  <area shape="circle" coords="312,372,12" href="www.example.com/#berlin" alt="Berlin" title="Berlin" />
  <area shape="circle" coords="168,384,12" href="www.example.com/#london" alt="London" title="London" />
  <area shape="circle" coords="189,432,12" href="www.example.com/#paris"  alt="Paris"  title="Paris" />
</map>

Vorstellbar wäre auch eine JavaScript-Lösung, bei denen die Koordinaten bei Verkleinerung mit heruntergerechnet würden. Eventuell auch eine reine CSS Lösung, falls in der style.css mit dieser rembase gerechnet wurde und eine ähnliche Verrechnung wie bei

font-size:16px
    font-size:1.142857143rem; (16 / $rembase)

möglich sein sollte, wobei ich dabei aber wieder Bedenken hätte, in wie weit das bei den Browsern abwärtskompatibel wäre.

Hier mal ein ganz anderer Lösungsweg:

Mit dem plugin: google-maps-v3-shortcode-multiple-markers ist es möglich interaktive google Maps Karten zu erstellen.

Hier hab ich dieses Plugin eingesetzt: http://internate-kompass.de/unsere-internate/standorte/

Na ja, das ist aber von der Google API und die würde zum Beispiel Dexter722 rein gar nichts nutzen für seine Dorfchronik. Und die würde auch allgemein nur für Karten geeignet sein, aber nicht um zum Beispiel ein Klassenfoto mit Hotspots zu versehen, die dann zu den Seiten von ehemaligen Mitschülern verlinkt werden.

Zitat von Simone A.

Hallo Dex, das Bild mit der Endung map, will nicht hochgeladen werden: folgende Fehlermeldung erscheint: Test2.map Tut mir leid, aber aus Sicherheitsgründen ist dieser Dateityp nicht erlaubt.:cry:

.map ist keine Grafikdatei!

Grafikdateien enden auf .jpg, .png oder .gif

Zitat von Melewo

Na ja, das ist aber von der Google API und die würde zum Beispiel Dexter722 rein gar nichts nutzen für seine Dorfchronik. Und die würde auch allgemein nur für Karten geeignet sein, aber nicht um zum Beispiel ein Klassenfoto mit Hotspots zu versehen, die dann zu den Seiten von ehemaligen Mitschülern verlinkt werden.

Richtig, für eine Imagemap ist die Google Maps Lösung natürlich nicht geeignet - aber das ursprüngliche Thema dieser Diskussion war eine Landkarte in die man Verlinkungen einbauen kann ! ;-)

Und wenn ich mir das mit der Dorfchronik noch einmal durchlese, muss ich sagen, dass die Lösung mit google maps schon einiges für sich hätte. Als Marker würde ich kleine Grafiken der alten Häuser basteln.

Und zu Deinem Problem mit der Skalierung bei Größenänderung der Karte - dieses Problem entfällt, da bei google maps ja die tatsächlichen Geo - Koordinaten für die Standorte verwendet werden.

Also noch einmal zusammengefasst: Für Lösungen bei denen Landkarten benötigt werden ist die Verwendung von google maps ideal.
Bei Lösungen, bei denen Gegenstände oder Personen als Hotspot verwendet werden sollen muss man mit Imagemaps arbeiten - aber das ist ein anderes Thema.