Ankündigung

Einklappen
Keine Ankündigung bisher.

Lage von Punkten anhand div-width ermitteln

Einklappen

Neue Werbung 2019

Einklappen
X
  • Filter
  • Zeit
  • Anzeigen
Alles löschen
neue Beiträge

  • Lage von Punkten anhand div-width ermitteln

    Hallo Forum,

    ich habe ein Problem mit meinem Vorhaben.
    Situation:
    Ich habe eine Grafik einer Deustschlandkarte
    PHP-Code:
     echo "<IMG src=".$imgDeutschlandkarte." style="height:autowidth:100%; border:0style:z-index=0">"
    über die ich dynamisch Punkte als Lagepunkte anzeigen möchte.
    Diese sind so definiert:

    PHP-Code:
     echo "<div style="width15px;height15px;border-radius:50%;background-colorred;border-colorred;z-index:2positionabsoluteleft:".$Left."px;top:".$Top."px;z-index:2;""
    Diese $Left und $Top sind jetzt statisch zur Bildgröße beim Laden des Dokumentes berechnet.

    Nun soll das ganze responsiv umgesetzt werden, d.h. die Deutschlandkarte wird kleiner mit verändern des Browserfensters.
    Nun ist das Problem, dass ich jetzt anhand dieser größe die Lagepunkte neu berechnen muss, sprich zur Laufzeit die Größe des divs oder besser noch der Grafik ermitteln muss und daraus dann die $Left und $Top Werte errechnen kann.

    Nun die große Frage: WIE???

    AJAX? js? jQuery?

    Ich bin gerade planlos...

    Vielen Dank vorab!
    mfg domi

  • #2
    Hi,

    vielleicht so . . .

    PHP-Code:
    <!DOCTYPE HTML>
    <
    html>
    <
    head>
    <
    title>Untitled</title>
    <
    style type="text/css">
    <!--
    .
    nordsee{
     
    /* Das Div liegt über der Nordsee */
     
    width10px;
     
    height10px;
     
    border-radius50%;
     
    background-colorred;
     
    border-colorred;
     
    z-index2;
     
    positionabsolute;
    }
    -->
    </
    style>
    <
    script src="jquery-1.10.1.js" type="text/javascript"></script>
    <script type="text/javascript">
    <!--
    $(document).ready( function(){
     /*
     * Startwerte festlegen
     */
     $("#karte").height($(window).height());
     $("#nordsee").css("top", $("#karte").height()/5);
     $("#nordsee").css("left", $("#karte").width()/5);
     /*
     * Fenstergröße ändern
     */
     $( window ).resize(function() {
      $("#karte").height($(window).height());
     $("#nordsee").css("top", $("#karte").height()/5);
     $("#nordsee").css("left", $("#karte").width()/5);
     });
    });
    // -->
    </script>
    </head>
    <body>
    <img src="deutschland.png" border="2" id="karte" alt="Grafik" title="Deutschland">
    <div id="nordsee" class="nordsee" title="Nordsee"></div>
    <p></p>
    </body>
    </html> 
    Bei Größenänderung des Browserfensters bleibt das DIV über der gleichen Stelle in der Karte.

    Gruß
    Günni

    Kommentar


    • #3
      Für solche Geschichten würde ich SVG empfehlen.

      Kommentar


      • #4
        Das ist doch eher ein Matheproblem. Günni sagt es ja schon: Definiere die Punktkoordinaten relativ zur Kartengröße. Dazu brauchst Du weder Ajax noch jQuery.
        [B]Es ist schon alles gesagt. Nur noch nicht von allen.[/B]

        Kommentar


        • #5
          Hi,

          prima, danke, damit funktioniert das genau so wie es sollte! Vielen Dank dafür!!!

          Das Matheproblem hatte ich ja bereits gelöst, das Problem war halt nur die Berechnung der Punkte bei Größenänderung des Browserfensters usw. .



          Kommentar

          Lädt...
          X