• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

interaktive Karte Grundsätzliches - machbares ?

A

ATom

Mitglied
Hallo, ich möchte gerne mir eine Art interaktive Karte erstellen, in etwa so wie das hier super beschrieben ist :http://de.selfhtml.org/html/grafiken..._sensitive.htm.

Dazu hab ich aber ein paar Fragen.

Ich möchte gerne Standorte auf dieser Karte setzen nach 4-5 Kategorien sortiert. Also bspw. möchte ich an der Seite oder oben drüber die Kategorien haben a,b,c,d, etc. klickt man nun auf eine dieser Kategorien werden die standorte auf der karte angezeigt, klickt man auf eine andere kategorie eben die standorte der anderen kategorie usw.
es ist also nicht so wichtig für mich, dass ich die einzelnen standorte anklicken kann und dann weitergeleitet werde (wie bei dem selfhtml beispiel) oder zusätzliche infos bekomme, sondern wichtig ist eher das man schnell und einfach sich auf einer karte die jeweiligen standorte zu den kategorien anzeigen bzw aus- und einblenden lassen kann.


wie und womit mach ich das am besten ? habt ihr da Tipps für mich ?
ich glaube das beispiel von selfhtml stößt da so an seine grenzen ...

besten dank an euch, ich hoffe es passt hier rein, ich wusste nur nicht wo ich sonst die frage stellen sollte...
 
Werbung:
Hallo ATom,
nein, eine Image-Map hilft dir bei deinem Vorhaben nicht weiter. Du musst für jede Kategorie eine Bilddatei mit der betr. Karte anfertigen. Bei Klick auf die Kategorie tauscht Du dann das Bild aus. Dazu brauchst Du den Eventhandler onclick und die Funktion getElementById(). Würde dann so aussehen:
Code: 
onclick = 'document.getElementById ("id_des_bildes").src = "url_der_karte_fuer_diese_kategorie";'
"id_des_bildes" musst Du im img-Tag der Karte als id angeben. Näheres zu den Funktionen kannst Du ja wieder bei selfHTML nachlesen.
Viel Erfolg und viele Grüße - Ulrich
 
danke für die schnelle antwort. so ganz versteh ich das noch nicht wie ich das dann mit diesem eventhandler onclick machen muss, hast du da evtl ein link wo das an einem beispiel erklärt wird ?
 
Werbung:
Nein, einen Link habe ich leider nicht. Angenommen, deine Kategorie ist ein Button mit einer Bilddatei, dann musst Du den Eventhandler im img-Tag notieren:
Code: 
<img src="button.jpg" onclick='document.getElementById("id_des_bildes").src="url_der_karte_fuer_diese_kategorie";'>
Für den Button kannst Du natürlich auch Text in einem span oder div verwenden und dort den Eventhandler notieren.
Und bei der Bilddatei mit der Karte musst Du die ID notieren:
Code: 
<img src="karte1.jpg" id="id_des_bildes">
 
Hallo,

ich spring mal mit rein.

Grundsätzlich: mit Karte meinst jetzt nichts ausgeliehens aus Internet oder gescanntes sondern natürlich was freies oder selbst gezeichnetes :O).

Nun zu deiner Frage, also das mit der Grafik wie @Sempervivum meint ist eine möglichkeit, zwar die einfachste und startste aber damit auch unflexibelste.
In Zeiten von Javascript und damit jquery geht das viel besser und vor allem 100mal schicker und flexibler wenn doch mal ein Punkt dazu kommt oder weck oder doch mal mehr möchtest wie mehr infos.

Jetzt bist schlauer was :O).

Ich würde wenn ich nicht Google Mpas nehmen würde eine Karte Zeichnen oder eine Frei nehmen.
dies zuschneiden und in ein div packen und jetzt die anderen Punkte als extra div darauf positionieren.
Jeder gruppe eine zusätzliche classe geben und schon kannst mit jquery recht einfach steuer das gruppe A oder B oder beide angezeigt werden mit gleichzeitig übergänge das alles runder wirkt, wir sind hier ja nicht bei "Mein Hamster und Ich" soll je vernünftig sein :O).

Hier auch mal der erste teil vom code wie ich das meine
css teil
geändert da fehlerhaft
Code: 
#karte {position:relative;} 
/*Positionen der einzelnen punkte*/ 
.p1{position:absolute; top:10px; left: 35px;} 
.p2{position:absolute; top:85px; left: 72px;} 
.p3{position:absolute; top:67px; left: 150px;} 
.p4{position:absolute; top:150px; left: 45px;} 
.p5{position:absolute; top:22px; left: 50px;}
html
Code: 
<div id="karte">
    <img src="karten.png">
         <img class="gruppeA p1" src="bildchen.png" title="beschreibung">
         <img class="gruppeA p2" src="bildchen.png" title="beschreibung">
         <img class="gruppeB p3" src="bildchen.png" title="beschreibung">
         <img class="gruppeB p4" src="bildchen.png" title="beschreibung">
         <img class="gruppeB p5" src="bildchen.png" title="beschreibung">
</div>
wenn das steht kann man mit jquery sachen ausblenden.

Cheffchen
 
Zuletzt bearbeitet:
hi cheffchen, vielen vielen dank, nach so etwas bin ich auf der suche ! nochmal als hintergrund infos, also ich hab mir eine umriss karte von wiki commons geholt, diese bearbeitet, diverse länder grenzen wasser etc weg, dann der karte einen netten farbverlauf gegeben und jetzt kleine logos als standorte auf dieser karte gesetzt.

oder soll ich so wie ich das sehe, die karte als rohling also ohne die logos als standort markierungen einbinden und dann erst die logo bildchen an die vorher im css definierten stellen einbinden ?


habe das jetzt mal so gemacht , ergebnis karte wird dargestellt , un rechts unten daneben die 5 punkte also das logo bildchen. was mach ich falsch ? und vor allem wie mach ich das dann nach kategorien sortiert mit dem ein und ausblenden?
kannst du mir evtl so eine schritt für schritt erklärung geben, habe mit jquery bislang nicht gearbeitet
 
Zuletzt bearbeitet:
Werbung:
Es sind zwei Layer: unten die Karte, oben drauf die Markierungen. Das kannst du direkt ins HTML schreiben, so dass alles erst einmal angezeigt wird. Die anzusprechenden IDs der Markierungen würde ich mit einer fortlaufenden Nummer versehen.

Wenn das soweit steht steht, kommt ein kleines Script, wobei ich hier auch jQuery empfehle. Direkt nach dem Laden der Seite lässt du alle Markierungs-IDs durch eine for Schleife (deshalb die Nummern) laufen und hängst die Methode hide() an, damit werden alle unsichtbar. Natürlich wären statt der Schleife auch p Container möglich, die sich über each() ansprechen lassen. Wichtig ist eigentlich nur, dass sich das HTML möglichst einfach abstrahieren lässt. Du willst ja nicht für fünf Kategorien fünf Funktionen schreiben, die alle das selbe machen.

Die eigentliche Funktion soll beim Klick auf einen Kartenausschnitt alle zu diesem Zeitpunkt sichtbaren Markierungen unsichtbar und die mit dem Ausschnitt korrespondierenden Elemente sichtbar machen. Hört sich komplexer an als es ist. Im Prinzip brauchst du nur click(), show() und hide().
 
ok jetzt bin ich gerade raus, versteh grade nur züge und bahnhöfe achja schienen sidn auch noch dabei ;) sorry

gibt es irgend wo ne seite wo ich mir das angucken kann, wo das in etwa so ist wie ich will ?! und wie geht das mit jQuery höre davon zum ersten mal :(

danke euch !
 
Werbung:
ok, bin ich schon dabei. aber bevor es an das ein-ausblenden bla bla geht, bekomm ich die logos nicht auf der karte positioniert, egal was ich da für werte angebe das logo klebt unter der karte:(
 
hmm webspace hab ich nicht, also ich habe jetzt das so gemacht wie vorhin beschrieben:
css datei angelegt mit dem code drin:
Code: 
#karte {position:relative;}
/*Positionen der einzelnen punkte*/
.p1{position;absolute; top:10px; left 35px;}
.p2{position;absolute; top:85px; left 72px;}
.p3{position;absolute; top:67px; left 150px;}
.p4{position;absolute; top:150px; left 45px;}
.p5{position;absolute; top:22px; left 50px;}

und dann in einem html dokument das hier :

Code: 
<html>
    <head>

    </head>

    <body>

         <div id="karte">
    <img src="karten.png">
         <img class="gruppeA p1" src="bildchen.png" title="beschreibung">
         <img class="gruppeA p2" src="bildchen.png" title="beschreibung">
         <img class="gruppeB p3" src="bildchen.png" title="beschreibung">
         <img class="gruppeB p4" src="bildchen.png" title="beschreibung">
         <img class="gruppeB p5" src="bildchen.png" title="beschreibung">
</div>
</body>
</html>
 
Werbung:
Hast du Firebug schon installiert? Das sollte man tun, bevor die erste Zeile HTML geschrieben wurde, weil sich damit solche Probleme aufspüren lassen.

Wirf mal das CSS raus. Die vier Bilder sollten dann alle aufeinander folgend über der Karte liegen.
 
HAllo,

oh sehe gerade css war komplett falsch, halt nur so schnell rein gehauen.

css ist so richtig und dann passt das auch.
Code: 
#karte {position:relative;}
/*Positionen der einzelnen punkte*/
.p1{position:absolute; top:10px; left: 35px;}
.p2{position:absolute; top:85px; left: 72px;}
.p3{position:absolute; top:67px; left: 150px;}
.p4{position:absolute; top:150px; left: 45px;}
.p5{position:absolute; top:22px; left: 50px;}
hier mal ein test link wie das dann ist (die blauen punkte sind die positionierten sachen)
Positionierung - jsFiddle

ja Karte blanko, sonnst kannst die ja nichts ausblenden und wenn mal ein punkt löschen möchtest must die ganze karte neu zeichnen.

hmm webspace hab ich nicht,
Zum Vergrößern anklicken....
das ist schlecht und wieso machst das denn ;O).
Dropbox geht auch :O)

denn nur so können wir helfen ohne das wir echt alles vorkauen müssen und di hausaufgaben aufgeben und kontrollieren was gemacht hast :O)
Denn wir haben auch anderes zu tun :O)

Cheffchen
 
Werbung:
also das css ist doch genau dasselbe wie vorher ?!?! was ist an dem anderen falsch und an dem jetzt richtig ? habe beide mal nebeneiannder rein kopiert und verglichen 1 zu 1 das gleiche ...hääää

ok das problem hab ich gelöst, hatte ganz vergessen die css datei auch einzubinden per
Code: 
<link href="karte.css" type="text/css" rel="stylesheet" />

möööp, da kann ich ja lange suchen :)

dann jetz nochmal zu dem jquery zeug , ich will ja dann oben über der karte am besten so tab ähnlich die kategorien haben, die karte sol ldabei immer offen sein un per klick auf die entsprechende kategorie / tab sollen dann die standorte / logos ein geblendet werden. wie muss ich da jetzt nun konkret vorgehen?
 
Zuletzt bearbeitet:
Hallo,

das in header rein
Code: 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script type="text/javascript">
$(document).ready(function() {
   /*default also was beim öffen sein soll oder weg lassen dann alle*/ 
   $('#karte img[class^="gruppe"]').attr('style', 'display:none');
   $(".gruppeA").fadeIn("500") ;    

    $(".GruppeAanzeigen").bind("click",function(){
             $('#karte img[class^="gruppe"]').attr('style', 'display:none');
        $(".gruppeA").fadeIn("500") ;
    });

    $(".GruppeBanzeigen").bind("click",function(){
             $('#karte img[class^="gruppe"]').attr('style', 'display:none');
        $(".gruppeB").slideDown("500") ;
    });
});
</script>
und das im body zum drauf klicken, hauptsache die classe ist drin, also kannst auch Bild mit der classe zum draufklicken nehmen
Code: 
<span class="GruppeAanzeigen">GruppeA</span>
<span class="GruppeBanzeigen">GruppeB</span>
Schau dir das an, habe auch gleich mal 2 effekte rein gemacht.
Den code aber bitte jetzt auch anschauen und damit dürftest jetzt alleine weiter kommen.
hier das in Aktion: http://jsfiddle.net/Cheffchen/x2V9W/2/


Cheffchen
 
ohja das geht wie ne 1 !!!! habe gleich noch meine anderen gruppen hinzugefügt, perfekt !!!! man VIELEN VIELEN DANK !!!

noch eine frage bekomm ich die GruppeA GruppeB schaltflächen noch besser hin, aktuell erscheint ja ein cursor beim drüber gehen/klicken, geht das auch als Hand bzw mehr als button ?

hab dazu das gefunden
Code: 
$(".GruppeAanzeigen").mouseover(function() {
            $(this).css('cursor', 'pointer');
        });

aber irgend wie will es nicht funktionieren

lösung gefunden:
Code: 
$(".GruppeAanzeigen")[B].css( 'cursor', 'pointer' )[/B].bind("click",function(){
             $('#karte img[class^="gruppe"]').attr('style', 'display:none');
        $(".gruppeA").slideDown("500") ;
    });
 
Zuletzt bearbeitet:
Werbung:
Hallo,

fein das es auf die reie bekommst.

Das mit dem coursor ist glaube ich besser gleich per css zu machen anstellen den umweg über query>css.

also gleich so ccs:
Code: 
.GruppeAanzeigen, .GruppeBanzeigen {cursor:pointer}

Cheffchen
 
Hallo, ich muss leider den nun etwas älteren Beitrag nochmal hochholen.

Das mit der Karte läuft nach wie vor sehr gut, nur hab ich jetzt eine kleine Änderung. Das ganze soll jetzt nicht wie bisher mit dem Menü sozusagen auf der Seite oberhalb der Karte auswählbar bzw einblendbar sein. Sondern, Ich habe seperate Links also von den Gruppen, so eine Art Menü (das nicht auf der Seite der Karte liegt). Wenn ich nun auf den jeweiligen Link klicke soll gleich Gruppe A angezeigt werden.
Ich hoffe ihr versteht wie ich das meine. Also das Menü mi tden einzelnen Gruppen ist ein Menü das auf jeder Seite erscheint nicht nur auf der wo die tatsächliche Karte ist.

Hoffe ihr könnt mir nochmal helfen
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben