interaktive landkarte

chg232 · 18. Oktober 2013

Guten Morgen!

Ich möchte für meine Volksmusikpage eine interaktive Landkarte erstellen. Und zwar so, dass im meinem Fall bei der Steiermarkkarte die Regionen anklickbar werden. Geht das?

Das hätte den Sinn, dass Veranstalter gezielt "nach Regionalität und kurzen Anfahrtswegen" suchen kann, bzw. gleich eine Zusammenstellung bekommt, woher die Volksmusikgruppen herkommen.

zwoemti · 18. Oktober 2013

Gibt schon ein Thema dazu. Damals hat es mit fischen zu tun gehabt. Ich denke genau das was du suchst. Kann leider nicht suchen für dich aber mit Landkarte solltest du an das Ziel kommen. Vielleicht erinnert sich ja noch jemand von den "älteren"

Gesendet von meinem C6603 mit Tapatalk 2

zwoemti · 25. Oktober 2013

Hier mal das Thema... falls du nicht weiterkommst fragen

480-landkarte-mit-bildpunkten-image-map-und-lightbox

Satan · 26. Oktober 2013

Hallo

Dass könnte man sich auch mit einem Grfikprogramm selöber machen.......Paint Shop Pro, Corel Draw oder Adobe....

Kleines Beispiel....Test 1

mfg Satan

andy67 · 27. Oktober 2013

Ich glaube nicht dass er das so meint mit Pointern die auf einer gewissen Stelle hinweisen !

Es gibt zwar ein Haufen Image Maps im Internet aber die meisten sind zu kompliziert Sie hier zu erklären, obwohl es ja im Prinzip ganz einfach ist. Das einfachste ist wohl nur HTML und CSS ohne Javaskript. Da muss man allerdings auf Effekte verzichten.

Im folgenden Beispiel nur auf die Regionen zu klicken und auf die jeweilige Seite gelangen. LINK

Wenn noch gewünscht Anleitung folgt !

bernie · 27. Oktober 2013

Hallo Andy

Das nenne ich Toparbeit!

jowina · 27. Oktober 2013

Hallo,

habe die Karte mal in PhotoShop zerlegt und die einzelnen Regionen als Ebenen über die Karte gelegt. Da ich kein Coder bin, überlasse ich es mal den Technikern, ob sie damit was anfangen können. In Gimp kann man jedenfalls recht einfach eine ImageMap erstellen. Ich habe aber nicht rausbekommen, wie ich die einzelnen Ebenen beim Mauskontakt sichbar mache.

Ich beobachte das Thema dann mal weiter, weil ich gespannt bin, was man da alles noch machen kann.

Hoffe die Karte hilft etwas und ist generell von der Grafik was gewünscht ist.

LG jowina

Labelle, könnte das nicht der HTML5 Animator? Denke Du wolltes Dir den zulegen oder?

Gast#gibsnichtmehr#910 · 27. Oktober 2013

Guten Abend,

habe das Thema auch mit Interesse verfolgt

jowina: ich will noch immer , die Testversion hab ich nicht mehr installiert. Es müsste sich auch mit dem ISpring-Converter umsetzen lassen. Leider läuft der mit mit meiner Uralt-Version von Office nicht.

andy67 · 27. Oktober 2013

Hi alle !

Ich hab das eigentlich mit dem Online Generator gemacht und entsprechend abgeändert ! LINK
Einen Hover Effekt mit den einzelnen Grafiken könnte man noch einbauen, aber dazu müsste man wieder ein Javaskript einfügen. Das passende hab ich aber nicht gefunden und selber machen ist zu Zeitaufwendig ! Vielleicht gibts ja ne einfachere Methode...

Hier ist jedenfalls der HTML / CSS Code

HTML

<style type="text/css">
.map_image { display: block; width: 600px; height: 425px; position: relative; background-position: 0 0; background-repeat: no-repeat; }
.map_image .map_link { display: block; position: absolute; text-indent: -999em; overflow: hidden; }
.map_image #map_link_0 { width: 232px; height: 110px; top: 71.99998474121094px; left: 71px; }
.map_image #map_link_1 { width: 191px; height: 120px; top: 59.99998474121094px; left: 284px; }
.map_image #map_link_2 { width: 209px; height: 96px; top: 174.99998474121094px; left: 114px; }
.map_image #map_link_3 { width: 150px; height: 106px; top: 187.99998474121094px; left: 303px; }
.map_image #map_link_4 { width: 103px; height: 144px; top: 121.99998474121094px; left: 436px; }
.map_image #map_link_5 { width: 128px; height: 80px; top: 292.99998474121094px; left: 324px; }
.map_image #map_link_6 { width: 80px; height: 90px; top: 267.99998474121094px; left: 448px; }
</style>
<div class="map_image" style="background-image: url('images/steiermark.jpg');">
<a class="map_link" id="map_link_0" title="Liezen" href="liezen.html"></a>
<a class="map_link" id="map_link_1" title="Obersteiermark-Ost" href="obersteiermark-ost.html"></a>
<a class="map_link" id="map_link_2" title="Obersteiermark-West" href="obersteiermark-west.html"></a>
<a class="map_link" id="map_link_3" title="Steirischer Zentralraum" href="steirischer-zentralraum.html"></a>
<a class="map_link" id="map_link_4" title="Oststeiermark" href="oststeiermark.html"></a>
<a class="map_link" id="map_link_5" title="Südweststeiermark" href="suedweststeiermark.html"></a>
<a class="map_link" id="map_link_6" title="Südoststeiermark" href="suedoststeiermark.html"></a>
</div>

Alles anzeigen

Es gibt aber noch einen anderen Generator wo man nur ein Skript einbinden muss und die einzelnen Felder mit Polygonen definieren muss ! Anschließend den HTML Code in eine HTML-Objekt reinkopieren !

Hier der LINK

Gast#gibsnichtmehr#910 · 27. Oktober 2013

Hi Andy

Hover geht auch Css. Schau mal hier: :hover: Mouseover-Effekt: Beispiel zur CSS-Referenz auf CSS 4 You - The Finest in Stylesheets
Kann mich leider grad nicht kümmern

Gast#gibsnichtmehr#910 · 28. Oktober 2013

Moin,

möglicherweise lässt sich die einzelnen Bereiche der Karte auch mit diesen Einstellungen hervorheben.
?highlight=transform

chg232 · 28. Oktober 2013

Hallo und danke für die Antworten!

Leider kann ich gerade an den Wochenenden nicht internet-worken. (Buschenschank)

andy67
Diese Lösung wärs. Hab dir PN geschickt.

chg232 · 28. Oktober 2013

Zuerst mit Filezilla die Bilddatei raufspielen, in Image oder?

Hab ich gemacht.

Dann den HTML-Text reinkopiert - hab ich gemacht.

Wenn ich mit der Maus übers Bild fahre, merke ich die Regionen, nur Bild sehe ich keines (nur Hintergrund) Hmmm.

chg232 · 28. Oktober 2013

Fehlt da was??

zwoemti · 28. Oktober 2013

ist das div wieder geschlossen am Ende vom Foto?

chg232 · 28. Oktober 2013

ja, hab lediglich die URL von FileZilla eingefügt.

Hier das ganze:

zwoemti · 28. Oktober 2013

ist falsch geschrieben.
keine ftp url sondern wenn dann http

und die Klammer ( fehlt auch

wenn dann

HTML

<div class="map_image" style="background-image: url('http://www.jungevolksmusik.at/images/STm.jpg');">

es reicht aber auch

HTML

<div class="map_image" style="background-image: url('images/STm.jpg');">

andy67 · 29. Oktober 2013

So hier sind noch ein paar Möglichkeiten von Image Maps mit Hover Effekt!

Einmal mit einem kleinen Hover Button LINK

und einmal mit überlagernden Grafiken LINK

Wobei es sicher noch eine einfachere CSS Hover Lösung geben würde, wo nur ein Rahmen und eine 50 % transparente Farbe generiert wird...

bernie · 29. Oktober 2013

Hallo

Würde die Zelle noch anders gestalten, damit das ganze Bild auf einmal zu sehen ist- ohne Scrollbalken.

Buschenschank? Wo?

andy67 · 29. Oktober 2013

Ja, das kommt davon wenn man das HTML-Objekt nicht in der Höhe anpasst ! (rechts unten)

Willkommen! Melden Sie sich an oder registrieren Sie sich.

interaktive landkarte

Teilen

Tags