interaktive Karte Grundsätzliches - machbares ?

Cheffchen · 22 Mai 2013

Hallo,

versteh deine frage nicht?

im js code zweite zeile wird ja die default anzeige gemacht.
einfach dort die passende gruppe eintragen.

oder wenn nicht an jeden einzelnen header rann kommst auf den einzelnen Seiten dann kannst das auch im body bereich eintragen und js drauf klicken lassen.

<script type='text/javascript'>
$(document).ready(function() {
$(".GruppeBanzeigen").click();
});
</script>

Cheffchen

ATom · 22 Mai 2013

hmm ja Danke,
aber also ja das funktioniert zwar so. Aber dann bräuchte ich den ganzen Java Kram eigentlich nicht, da jetzt gleich ohne Effekt und alles die Karte angezeigt wird, also so würde es jetzt auch reichen wenn ich einfach eine jpg oder png Grafik erstelle mit der Karte und alle Standorten drauf und die dann einfach als Bild da rein packe.

Schöner wäre es wenn ich eben links im Menü auf "Standorte A" Klicke und sich im "Mainframe" die Karte öffnet und dann eben wieder mit diesem Effekt des Einblendens, dann die einzelnen Standorte hinzugefügt/ eingeblendet werden. Also das Problem ist das ich ja nur einmal klicke und dann die Karte mi tStandorten gleich da ist. Es müsste aber so sein das wenn ich klicke gegbenfalls erst die leere Karte erscheint und dann evtl. 1 sec später oder eben mit einer kleinen Verzögerun gdie Standorte A eingeblendet werden, also das einblenden dann eben automatisch ohne klick...
Geht das irgend wie ?

Cheffchen · 22 Mai 2013

Hallo,

das es sehr schwer ist dir zu folgen ist dir wohl nicht ganz klar.

Ich weiss nicht so richtig wo das problem ist da ja auch nichts zeigst, ich kann vielleicht einiges erannen was vielleicht möchtest aber dann auch wieder nicht.

wenn das click() eingügst öffnert der doch eine gruppe mit dem einblenden.
Und die frage ist was hast schon selber versucht, denn das ist ein Forum :O)

Cheffchen

ATom · 22 Mai 2013

Code:

<link href="karte.css" type="text/css" rel="stylesheet" />
</p>
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<script type="text/javascript">
    // <![CDATA[
    $(".GruppeAanzeigen").css('cursor', 'pointer').bind("click", function() {
        $('#karte img[class^="gruppe"]').attr('style', 'display:none');
        $(".gruppeA").slideDown("500");
    });
    // ]]>
    
</script>
<div id="karte"><img src="images/img/karte_leer1.png" /><img class="gruppeA p2" src="images/img/Standorte/bremen.png" title="Bremen" />
</div>

Das ganze ist liegt lokal in einer Joomla Installation, deswegen kann ich schwer was zeigen.
Dort habe ich eben in einer Modulposition eine Art Menü mit den Punkten Standort a,b,c; diese habe ich als Link zu einem Beitrag Standort A. In diesem habe ich dann den obigen Code eingefügt.
Und wenn ich jetzt auf Standort A klicke kommt eben gleich die Karte mit allen Standorten darauf, aber eben ohne den Effekt das die Standorte eingeblendet werden.

Cheffchen · 22 Mai 2013

Hallo,

ja klar ist ja auch anders der code als früher gezeigt.
(Positionierung - jsFiddle)
der effekt startet gleich und wartet nicht bis die Seite geladen ist, deswgen siehst den nicht, der dauert ja auch nicht so lang.

die jquery gehört in head bereich der Homepage.
der rest js code eigentlich auch oder wenigsten unterhalb der Karte.

also möchtest:
+ 1 Karte mit allen Punkten
+ das aber per Link einzelne punkte angesprochen werden können und damit angezeigt werden.

das geht wenn den Links ein parameter mit gibst zb ?ort=a und das dann per jquery auslesen und halt a anzeigst.
Versuch dich, hast ja jetzt die richtung.

Cheffchen

ATom · 22 Mai 2013

Puh ich stehe wieder mal fest. Habe das jetzt versucht zusammenzubasteln also der Link sieht jetz wie folgt aus :

Code:

<a href="index.php?ort=a&amp;option=com_content&amp;view=article&amp;id=104:standorte&amp;catid=85:standorte">Standorte A</a>

Dann muss doch in dem Beitrag der aufgerufen wird was in der Art hin ?! :

Code:

<script type="text/javascript">
    // <=!=[=C=D=A=T=A=[
    var ort = getURLort("ort");
    // output: a
    function getURLort(strOrtName) {
        var strReturn = "";
        var strHref = window.location.href;
        if (strHref.indexOf("?") > -1) {
            var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
            var aQueryString = strQueryString.split("&");
            for (var iort = 0; iort < aQueryString.length; iort++) {
                if (aQueryString[iort].indexOf(strortName.toLowerCase() + "=") > -1) {
                    var aort = aQueryString[iort].split("=");
                    strReturn = aort[1];
                    break;
                }
            }
        }
        return unescape(strReturn);
    }
    // ]=]=>
    
</script>

Aber ich seh gerade garnicht mehr durch.
Hast du evtl ein besseres Schlagwort wonach ich suchen kann. Also wie mein Vorhaben genau heißt was ich jetzt machen muss/ was ich brauche ?
Mit der ANzeige Umsetzung des jquery komm ich gerade nicht mehr klar.
Besten Dank

Cheffchen · 22 Mai 2013

Hallo,

sieht doch gut aus, so oder vielleicht so ähnlich hätte ich das auch gemacht.
ist die ausgabe von "var ort" auch a also alert(ort); eine zeile nach dieser einfügen zum test.

Wenn das hast änder das ort=a im Link an was passenden, also vieleicht ort=A da das A dann auch teil der classe ist und das einfacher zusammen setzten kann.

das müsste dann ans ende, damit tut der Browser so als würde einer auf den Menü mit der classe .GruppeAanzeigen drücken wurde.

$(".Gruppe"+ort+"anzeigen").click();

Dies dürfte so funktionieren wenn halt die fehler von oben beseitigst.

Cheffchen

ATom · 24 Mai 2013

Also das geht noch nicht so richtig, udn ich komm auch nicht so recht hinterher, bin mir nicht mehr sicher wo was rein muss.

Mein Code sieht jetzt so aus :

Code:

<script type="text/javascript">
    // <![CDATA[
    // <=!=[=C=D=A=T=A=[
    var ort = getURLort("ort");
    alert(ort);
    // output: a
    function getURLort(strOrtName) {
        var strReturn = "";
        var strHref = window.location.href;
        if (strHref.indexOf("?") > -1) {
            var strQueryString = strHref.substr(strHref.indexOf("?")).toLowerCase();
            var aQueryString = strQueryString.split("&");
            for (var iort = 0; iort < aQueryString.length; iort++) {
                if (aQueryString[iort].indexOf(strortName.toLowerCase() + "=") > -1) {
                    var Aort = aQueryString[iort].split("=");
                    strReturn = Aort[1];
                    break;
                }
            }
        }
        return unescape(strReturn);
        $(".Gruppe" + ort + "anzeigen").click();
    }
    // ]=]=>
    // ]]>
    
</script>
<p><strong>Hier finden sie unsere Ausbilder für:</strong>
</p>
<ul style="list-style-type: circle;">
    <li><a href="index.php?ort=A&amp;option=com_content&amp;view=article&amp;id=104:standorte-fuer-lad&amp;catid=85:standorte">Lad</a></li>
    <li><a href="index.php?option=com_content&amp;view=article&amp;id=104:standorte-fuer-gef&amp;catid=85:standorte" target="_blank">Gef</a></li>
    
</ul>

wenn ich das so teste bekomm ich auf der seite das angezeigt:

wenn ich die alert passage wieder raus nehme ist das weg, aber die karte wird nach wie vor nich tso eingeblendet wie ich mir das wünsche.

kannst du mir evtl nochmal sagen was ich wo rein schreiben muss?

Cheffchen · 24 Mai 2013

Hallo,

so wird das nichts oder sehr schwei mit den schnippzeln.

fang doch einfach mal von vorn an.
ich kann mich halt bloss auf meine Links (zb#25) beziehen.
Bau eine karten mit der Technik, dürftest ja schon gehabt haben.
Jetzt schaust das die die URL ausgelesen bekommst, also gleich vor dem script code der karte fügst die Funktion ein und da nach die abfrage

var ort = getURLort("ort");
alert(ort);

Jetzt dürfte noch alles gehen und wenn per Link die Karte anschaust sollt ein fenster aufgehen mit der variable ort.
bevor das nicht hast brinkt die der click unten auch nichts.

Cheffchen

ATom · 30 Mai 2013

Hi, habe leider erst jetzt wieder Zeit gefunden. Ich komme aber nicht klar. Könntest du das mal genauer beschreiben wie das mit dem Hash funktioniert?

Meine Überlegung ist jetzt das ich "einfach" das bestehende Menü

Code:

[COLOR=#800000]<script type=[COLOR=#0000FF]"text/javascript"[/COLOR]>[/COLOR] $(document).ready(function(){      
 /*default also was beim öffen sein soll oder weg lassen dann alle*/       
$('#karte img[class^="gruppe"]').attr('style', 'display:none');      
 $(".GruppeAanzeigen").css( 'cursor', 'pointer' ).bind("click",function(){              
$('#karte img[class^="gruppe"]').attr('style', 'display:none');        
 $(".gruppeA").slideDown("500") ;     });      
$(".GruppeBanzeigen").css( 'cursor', 'pointer' ).bind("click",function(){              
$('#karte img[class^="gruppe"]').attr('style', 'display:none');        
 $(".gruppeB").slideDown("500") ;     });     
$(".GruppeCanzeigen").css( 'cursor', 'pointer' ).bind("click",function(){              
$('#karte img[class^="gruppe"]').attr('style', 'display:none');         
$(".gruppeC").slideDown("500") ;     })      
$(".GruppeDanzeigen").css( 'cursor', 'pointer' ).bind("click",function(){              
$('#karte img[class^="gruppe"]').attr('style', 'display:none');        
 $(".gruppeD").slideDown("500") ;     });     
$(".GruppeEanzeigen").css( 'cursor', 'pointer' ).bind("click",function(){              
$('#karte img[class^="gruppe"]').attr('style', 'display:none');        
 $(".gruppeE").slideDown("500") ;     });  }); [COLOR=#800000]</script>[/COLOR]     [COLOR=#000080]</head>[/COLOR]      [COLOR=#000080]
<body>[/COLOR]     [COLOR=#000080]<h3>[/COLOR] Hier finden sie unsere Ausbilder für:[COLOR=#000080]</h3>[/COLOR]     [COLOR=#000080]
<span class=[COLOR=#0000FF]"GruppeAanzeigen"[/COLOR]>[/COLOR][COLOR=#000080]<font color=[COLOR=#0000FF]"#0000FF"[/COLOR]>[/COLOR][COLOR=#000080]<b>[/COLOR]A[COLOR=#000080]</b>[/COLOR][COLOR=#000080]</font>[/COLOR] |[COLOR=#000080]</span>[/COLOR]     [COLOR=#000080]
<span class=[COLOR=#0000FF]"GruppeBanzeigen"[/COLOR]>[/COLOR][COLOR=#000080]<font color=[COLOR=#0000FF]"#0000FF"[/COLOR]>[/COLOR][COLOR=#000080]<b>[/COLOR]B[COLOR=#000080]</b>[/COLOR][COLOR=#000080]</font>[/COLOR] |[COLOR=#000080]</span>[/COLOR]     [COLOR=#000080]
<span class=[COLOR=#0000FF]"GruppeCanzeigen"[/COLOR]>[/COLOR][COLOR=#000080]<font color=[COLOR=#0000FF]"#0000FF"[/COLOR]>[/COLOR][COLOR=#000080]<b>[/COLOR]C[COLOR=#000080]</b>[/COLOR][COLOR=#000080]</font>[/COLOR]| [COLOR=#000080]</span>
[/COLOR][COLOR=#000080]<span class=[COLOR=#0000FF]"GruppeDanzeigen"[/COLOR]>[/COLOR][COLOR=#000080]<font color=[COLOR=#0000FF]"#0000FF"[/COLOR]>[/COLOR][COLOR=#000080]<b>[/COLOR]D[COLOR=#000080]</b>[/COLOR][COLOR=#000080]</font>[/COLOR]| [COLOR=#000080]</span>[/COLOR]     
[COLOR=#000080]<span class=[COLOR=#0000FF]"GruppeEanzeigen"[/COLOR]>[/COLOR][COLOR=#000080]<font color=[COLOR=#0000FF]"#0000FF"[/COLOR]>[/COLOR][COLOR=#000080]<b>[/COLOR]E[COLOR=#000080]</b>[/COLOR][COLOR=#000080]</font>[/COLOR] [COLOR=#000080]</span>[/COLOR]

von meiner programmierten Karte in das Modul schreibe. Bleibt dann nur das Problem, wie ich die Karte an der richtigen stelle mit den Standorten dargestellt bekomme also wie ich dem Menü sozusagen sage er sol leben nicht einen Link sowieso öffnen (bspw. von einem Beitrag) sondern eben die Karte anzeigen in dem Contentbereich?!?!

Kannst du mir das evtl noch ein bisschen genauer erklären wie ich jetzt vorgehen muss. Ich bin fachlich gerade ausgestiegen :(

Cheffchen · 30 Mai 2013

Hallo,

also du hast die Karte wie oben eingebunden, ok.

dann fügst das ein, gleich hinter $(document).ready(function(){

Code:

    // Read a page's GET URL variables and return them as an associative array.
    function getUrlVars()
    {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }

    // URL Auslesen, wenn get aktie vorhanden value in feld aktie schreiben.
    var url = getUrlVars();
    var ort = url["ort"];
    if(url[0]=="ort"){
      altert(ort);
    }

jetzt dürfte wenn auf die Seite Linkst und das wie schon hattest die links so aussehen ..index.php?ort=A&optio... ein fenster auf gehen wo dann halt nur A drin steht oder halt was im link bei ort steht, wenn ds ist kann die alert zeile löschen und dann schauen wir weiter.

Cheffchen

ATom · 30 Mai 2013

Hallo entschuldige bitte, ich weiß es nicht einfach mit mir und ich bin dir sehr sehr dankbar das du diese Geduld hier aufweist.
Ich muss jetzt aber nochmal Grundlegendes klären.
Also ich habe jetzt die Datei des Beitrages in diesem beitrag binde ich jetzt das hier so ein :

Code:

<link href="karte.css" type="text/css" rel="stylesheet" />
    <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
    <script type="text/javascript">
        // <![CDATA[
        $(document).ready(function() {
            // Read a page's GET URL variables and return them as an associative array.
            function getUrlVars() {
                var vars = [],
                    hash;
                var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
                for (var i = 0; i < hashes.length; i++) {
                    hash = hashes[i].split('=');
                    vars.push(hash[0]);
                    vars[hash[0]] = hash[1];
                }
                return vars;
            }
            // URL Auslesen, wenn get aktie vorhanden value in feld aktie schreiben.
            var url = getUrlVars();
            var ort = url["ort"];
            if (url[0] == "ort") {
                altert(ort);
            }
            /*default also was beim öffen sein soll oder weg lassen dann alle*/
            $('#karte img[class^="gruppe"]').attr('style', 'display:none');
            $(".GruppeAanzeigen").css('cursor', 'pointer').bind("click", function() {
                $('#karte img[class^="gruppe"]').attr('style', 'display:none');
                $(".gruppeA").slideDown("500");
            });
            $(".GruppeBanzeigen").css('cursor', 'pointer').bind("click", function() {
                $('#karte img[class^="gruppe"]').attr('style', 'display:none');
                $(".gruppeB").slideDown("500");
            });
            $(".GruppeCanzeigen").css('cursor', 'pointer').bind("click", function() {
                $('#karte img[class^="gruppe"]').attr('style', 'display:none');
                $(".gruppeC").slideDown("500");
            })
            $(".GruppeDanzeigen").css('cursor', 'pointer').bind("click", function() {
                $('#karte img[class^="gruppe"]').attr('style', 'display:none');
                $(".gruppeD").slideDown("500");
            });
            $(".GruppeEanzeigen").css('cursor', 'pointer').bind("click", function() {
                $('#karte img[class^="gruppe"]').attr('style', 'display:none');
                $(".gruppeE").slideDown("500");
            });
        });
        // ]]>
        
    </script>
</p>
<h3>Hier finden sie unsere Ausbilder für:</h3>
<div id="karte"><img src="images/img/karte_leer1.png" /><img class="gruppeA p2" src="images/img/Standorte/bre.png" title="Bre" /><img class="gruppeA p3" src="images/img/Standorte/ber.png" title="Ber" /><img class="gruppeA p4" src="images/img/Standorte/sol.png" title="Soltau" /><img class="gruppeA p5" src="images/img/Standorte/bern.png" title="Bern" /><img class="gruppeA p6" src="images/img/Standorte/diek.png" title="Diek" /><img class="gruppeA p7" src="images/img/Standorte/neu.png" title="Neu" /><img class="gruppeA p8" src="images/img/Standorte/hil.png" title="Hil" /><img class="gruppeA p9" src="images/img/Standorte/eve.png" title="Eve" /><img class="gruppeA p10" src="images/img/Standorte/lünen.png" title="Lünen" /><img class="gruppeA p11" src="images/img/Standorte/hamburg.png" title="Hamburg" /><img class="gruppeA p12" src="images/img/Standorte/dudenhofen.png" title="Dudenhofen" /><img class="gruppeA p13" src="images/img/Standorte/pfö.png" title="Pfö" /><img class="gruppeA p14" src="images/img/Standorte/für.png" title="Für" /><img class="gruppeA p15" src="images/img/Standorte/sel.png" title="Sel" /><img class="gruppeA p20" src="images/img/Standorte/wie.png" title="Wie" /><img class="gruppeA p21" src="images/img/Standorte/mün.png" title="Mün" /><img class="gruppeA p19" src="images/img/Standorte/beh.png" title="Beh" /><img class="gruppeA p1" src="images/img/Standorte/kir.png" title="Kir" />
</div>

Also nur für Standorte A

So dann geh ich zu der Datei wo das Menü ist und füge dort nur das hier ein:

Code:

<ul style="list-style-type: circle;">
    <li><a class="GruppeAanzeigen" href="index.php?ort=A&amp;option=com_content&amp;view=article&amp;id=104:standorte-fuer-A&amp;catid=85:standorte">A</a></li>
    <li><a class="GruppeBanzeigen" href="index.php?ort=B&amp;option=com_content&amp;view=article&amp;id=104:standorte-fuer-B&amp;catid=85:standorte">B</a></li>
    <li><a class="GruppeCanzeigen" href="index.php?ort=C&amp;option=com_content&amp;view=article&amp;id=104:standorte-fuer-C&amp;catid=85:standorte">C</a></li>
    <li><a class="GruppeDanzeigen" href="index.php?ort=D&amp;option=com_content&amp;view=article&amp;id=104:standorte-fuer-D&amp;catid=85:standorte">D</a></li>
</ul>

Ich vermute ich bin ganz verkehrt.

Oder kommen die JS Anweisungen alle zu der Datei mit dem Menü mit rein?

Cheffchen · 30 Mai 2013

Hallo,

is blöd wenn man nicht sieht was machst und so unterschietliches wissen.

Grundsätzliches ist glaube ich noch nicht klar.

Du hast eine Seite Mit der Karte (code von Oben) wo alle Punkte hinterlegt sind A-E usw.

Jetzt möchtest per link auf diese Seite sagen können das nicht standard A angezeigt wird sondern zb E, richtig?
Oder hab ich dich total falsch verstanden.

Wenn den code von oben eingefügt hast und zu der Seite Verlingst mit ort A oder E, müsste ein fenster aufgehen wo halt A oder E drin steht.

Cheffchen

ATom · 30 Mai 2013

Also naja wenn ich das so habe. Wie du geschrieben hast, ich habe eben die Seite mit der Karte. Dort ist jetzt dieser Code :

Code:

<div id="karte">
    <img src="http://forum.jswelt.de/images/img/karte_leer1.png">

         <img class="gruppeA p2" src="http://forum.jswelt.de/images/img/Standorte/bre.png" >
         <img class="gruppeA p3" src="http://forum.jswelt.de/images/img/Standorte/ber.png" >
         <img class="gruppeA p4" src="img/Standorte/sol.png" >
         <img class="gruppeA p5" src="http://forum.jswelt.de/images/img/Standorte/bern.png" >
         <img class="gruppeA p6" src=images/img/Standorte/diek.png" >
         <img class="gruppeA p7" src="http://forum.jswelt.de/images/img/Standorte/neu.png" >
         <img class="gruppeA p8" src="http://forum.jswelt.de/images/img/Standorte/hil.png" >
         <img class="gruppeA p9" src=images/img/Standorte/ev.png" >
         <img class="gruppeA p10" src="http://forum.jswelt.de/images/img/Standorte/lü.png" >
         <img class="gruppeA p11" src="http://forum.jswelt.de/images/img/Standorte/ha.png">
         <img class="gruppeA p12" src="http://forum.jswelt.de/images/img/Standorte/du.png" >
         <img class="gruppeA p13" src="http://forum.jswelt.de/images/img/Standorte/pfö.png" >
         <img class="gruppeA p14" src="http://forum.jswelt.de/images/img/Standorte/für.png" >
         <img class="gruppeA p15" src="http://forum.jswelt.de/images/img/Standorte/sels.png" >
         <img class="gruppeA p20" src="http://forum.jswelt.de/images/img/Standorte/wie.png" >
         <img class="gruppeA p21" src="http://forum.jswelt.de/images/img/Standorte/mü.png">
         <img class="gruppeA p19" src="/images/img/Standorte/beha.png" >
         <img class="gruppeA p1" src="img/Standorte/kir.png" >


         <img class="gruppeB p15" src="http://forum.jswelt.de/images/img/Standorte/sel.png" >
         <img class="gruppeB p6" src="http://forum.jswelt.de/images/img/Standorte/die.png" >
         <img class="gruppeB p4" src="http://forum.jswelt.de/images/img/Standorte/solt.png" >
         <img class="gruppeB p5" src="http://forum.jswelt.de/images/img/Standorte/ber.png" >
         <img class="gruppeB p12" src="http://forum.jswelt.de/images/img/Standorte/dude.png" >
         <img class="gruppeB p7" src="http://forum.jswelt.de/images/img/Standorte/neu.png" >
         <img class="gruppeB p8" src="http://forum.jswelt.de/images/img/Standorte/hild.png">
         <img class="gruppeB p22" src="http://forum.jswelt.de/images/img/Standorte/ma.png" >
         <img class="gruppeB p13" src="http://forum.jswelt.de/images/img/Standorte/pfö.png" >
         <img class="gruppeB p14" src="http://forum.jswelt.de/images/img/Standorte/fürs.png" >
         <img class="gruppeB p1" src="/images/img/Standorte/kirc.png" >

         <img class="gruppeC p1" src="/images/img/Standorte/kirch.png" >
         <img class="gruppeC p15" src="http://forum.jswelt.de/images/img/Standorte/selsi.png" >
         <img class="gruppeC p9" src="http://forum.jswelt.de/images/img/Standorte/evers.png" >
         <img class="gruppeC p4" src="http://forum.jswelt.de/images/img/Standorte/sol.png" >

         <img class="gruppeD p5" src="/images/img/Standorte/ber.png" >
         <img class="gruppeD p2" src="http://forum.jswelt.de/images/img/Standorte/bre.png">
         <img class="gruppeD p18" src="http://forum.jswelt.de/images/img/Standorte/oyt.png" >
         <img class="gruppeD p13" src="img/Standorte/pför.png" >

         <img class="gruppeE p1" src="/images/img/Standorte/kirc.png" >
         <img class="gruppeE p24" src="/images/img/Standorte/sitt.png">
         <img class="gruppeE p23" src="/images/img/Standorte/ze.png">




</div>

Und dann eine extra Seite / Modul sozusagen wo ich das Menü habe. Mit diesem Code:

Code:

<head>
     <link href="../karte.css" type="text/css" rel="stylesheet" />
     <script src="http://code.jquery.com/jquery-latest.js"></script>

     <script type="text/javascript">

$(document).ready(function(){

// Read a page's GET URL variables and return them as an associative array.
    function getUrlVars()
    {
        var vars = [], hash;
        var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
        for(var i = 0; i < hashes.length; i++)
        {
            hash = hashes[i].split('=');
            vars.push(hash[0]);
            vars[hash[0]] = hash[1];
        }
        return vars;
    }

    // URL Auslesen, wenn get aktie vorhanden value in feld aktie schreiben.
    var url = getUrlVars();
    var ort = url["ort"];
    if(url[0]=="ort"){
      altert(ort);
    }



   /*default also was beim öffen sein soll oder weg lassen dann alle*/



   $('#karte img[class^="gruppe"]').attr('style', 'display:none');


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

    $(".GruppeBanzeigen").css( 'cursor', 'pointer' ).bind("click",function(){
             $('#karte img[class^="gruppe"]').attr('style', 'display:none');
        $(".gruppeB").slideDown("500") ;
    });
    $(".GruppeCanzeigen").css( 'cursor', 'pointer' ).bind("click",function(){
             $('#karte img[class^="gruppe"]').attr('style', 'display:none');
        $(".gruppeC").slideDown("500") ;
    })
     $(".GruppeDanzeigen").css( 'cursor', 'pointer' ).bind("click",function(){
             $('#karte img[class^="gruppe"]').attr('style', 'display:none');
        $(".gruppeD").slideDown("500") ;
    });
    $(".GruppeEanzeigen").css( 'cursor', 'pointer' ).bind("click",function(){
             $('#karte img[class^="gruppe"]').attr('style', 'display:none');
        $(".gruppeE").slideDown("500") ;
    });

});
</script>

+ natürlich die eigentlichen Menüpunkte/ Links:

<ul style="list-style-type: circle;"> <li><a class="GruppeAanzeigen" href="index.php?ort=A&option=com_content&view=article&id=104:standorte-fuer-A&catid=85:standorte">A</a></li> <li><a class="GruppeBanzeigen" href="index.php?ort=B&option=com_content&view=article&id=104:standorte-fuer-B&catid=85:standorte">B</a></li> <li><a class="GruppeCanzeigen" href="index.php?ort=C&option=com_content&view=article&id=104:standorte-fuer-C&catid=85:standorte">C</a></li> <li><a class="GruppeDanzeigen" href="index.php?ort=D&option=com_content&view=article&id=104:standorte-fuer-D&catid=85:standorte">D</a></li> </ul>

Wenn ich jetzt auf A klicke wird die gesamte Karte angezeigt. Also alle Standorte die es gibt. Keine Zugehörigkeit der jeweiligen Gruppen mehr erkennbar.

Also in der ursprungs version am Anfang auf Seite 2 oder 3 da war das Menü ja noch direkt in der Karte sozusagen mit drin, also da stand doch "Standorte unserer Ausbilder: ..." mit den Links vor dem <div "karte"> . Dieses Menü soll jetzt aber eben nicht mit i nder Karte also auf der Seite der Karte sein, sondern eben seperat. Und wie wir ja schon besprochen hatten meintest du das dann mi tdem Link auslesen etc.
Also das Menü soll genau das gleiche im Prinzip machen als wäre es noch auf der Seite der Karte wie in der Ursprungsversion.
D.h. also wenn ich im Menü auf Standorte A klicke soll sich erst eine leere Karte öffnen auf der dann die jeweiligen Standorte zu A eingeblendet werden. Das dann analog zu B,C,D usw. Aber das ist ja dann nur Formsache wenn ich das bei dem ersten erstmal hinbekomme

Cheffchen · 30 Mai 2013

Hallo,

oh sehe gerade hatte ein fehler

altert(ort); soll natürlich alert(ort); sein.
wie gesagt sollte ein fenster aufgehen.

Cheffchen

ATom · 30 Mai 2013

Jo geht und steht A drin.
nehm ich das alert dann raus, öffnet sich die leere karte, klick ich dann erneut auf den link, erscheinen kurz alle standorte für A , verschwinden dann aber auch wieder

Cheffchen · 30 Mai 2013

Hallo,

ok das mit alert war nur ein Test ob das soweit funzt.
jetzt musst in der zeile wo das alert(ort); drin stand, kannst auch drin lassen und einfach 2 // einfügen als anfang dann ist das auskommantiert.
Das musst einfügen in der schleife mit dem alert

Code:

$(".Gruppe"+ort+"anzeigen").click();

ach so die Links musst drin stehen lassen selbst wenn die unsichbar machst, denn die code zeile tut so als würde einer auf den link clickt, aber wenn keiner da kann nichts passieren. Oder läst die ganz normal drin wie vorher

Code:

<span class="GruppeAanzeigen"></span> 
<span class="GruppeBanzeigen"></span> 
<span class="GruppeCanzeigen"></span>
<span class="GruppeDanzeigen"></span>     
<span class="GruppeEanzeigen"></span>

So jetzt dürfte das passen, rechnung folgt :O)

Cheffchen

ATom · 31 Mai 2013

das sieht soweit schon richtig richtig gut aus.
Einziges Manko das ich nur die Standorte auf der Karte sehe wenn die Seite lädt sobald sie fertig geladen hat, steht die leere Karte da. ...?

Cheffchen · 3 Juni 2013

Hallo,

versteh ich nicht und ohne was zu sehen kann ich auch nichts sagen, so fitt bin ich mit jquery auch nicht das ich alles in blindflug kann.

Cheffchen

ATom · 3 Juni 2013

also ich hab das mal eben auf unsere Vereinsseite hochgeladen, die karte hat natürlich nichts mit dem Verein zu tun, aber zur Anzeige geht es ja erstmal kurz so, und es ist nur der Link A hinterlegt:
Strausberg Mustangs

zudem erscheinen jetzt Online hier garkeine Standorte mehr.
lokal beim laden also nur wenn ich auf den Link A klicke kommt kurz das gewünschte, verschwindet dann aber sobald die seite geladen ist wieder:

interaktive Karte Grundsätzliches - machbares ?

Senior HTML'ler

Mitglied

Senior HTML'ler

Mitglied

Senior HTML'ler

Mitglied

Senior HTML'ler

Mitglied

Senior HTML'ler

Mitglied

Senior HTML'ler

Mitglied

Senior HTML'ler

Mitglied

Senior HTML'ler

Mitglied

Senior HTML'ler

Mitglied

Senior HTML'ler

Mitglied