Ankündigung

Einklappen
Keine Ankündigung bisher.

[Erledigt] Radio Button

Einklappen

Neue Werbung 2019

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

  • [Erledigt] Radio Button

    Hallo,

    kann mir einer Helfen wie ich mit Radio Buttons die Bilder wechsel in Openlayers 3?

    Code:
    Code:
    <div id="tree" class="span2">
                            <fieldset id="layerA">
                                <label class="radio" for="bild-switch_1">
                                    <input id="bild-switch_1" class="bild-switch_1a" type="radio" name="bilder" value="bild1" onchange="checkedRadioBtn()" checked />Bild1
                                 </label>
                                <label class="radio" for="bild-switch_2">
                                    <input id="bild-switch_2" class="bild-switch_1a" type="radio" name="bilder" value="Bild2" onchange="checkedRadioBtn()" />Bild2
                                 </label>
                                <label class="radio" for="bild-switch_3">
                                    <input id="bild-switch_3" class="bild-switch_1a" type="radio" name="bilder" value="Bild3" onchange="checkedRadioBtn()" />Bild3
                                 </label>
                            </fieldset>
                    </div>
    und Javascript:
    Code:
    function checkedRadioBtn(){
        var radios = document.getElementsByName('input');
        var value;
        for(var i =0; i< radios.length; i++){
            if(radios[i].type === 'radio' && radios[i].checked){
                value = radios[i].value;
            }
        }
    };
    mein Javascript ist nicht ganz fertig. Ich weiß nicht wie ich die Bilder wechsel. Wenn ich Radio Bild1 klicke dann soll der mir anzeigen, wenn Bild2 dann Bild 2 anzeigen.

    Ich freue mich sehr auf eine Hilfe und Ratschläge!

    lg

  • #2
    PHP-Code:
    document.getElementById('bild_switch_1').onclick = function(){
      
    //Bild 1 einblenden
    }

    document.getElementById('bild_switch_2').onclick = function(){
      
    //Bild 2 einblenden
    }

    /*
    Weiterer Code... Hau mich blau, schlag mich tot
    */ 

    Kommentar


    • #3
      Hallo,

      Danke für deine Antwort coolio.

      Ich habe jetzt folgendes gemacht:
      Code:
      function checkedRadioBtn(){
      document.getElementById('bild-switch_1').onclick = function(){
             newL = new ol.layer.Image({
                  source: new ol.source.ImageStatic({
                      url: 'Bild1.png', 
                      imageSize: [122, 44],
                      projection: proj,
                      imageExtent: proj.getExtent()
                  })
              });    
          }
          
          document.getElementById('bild-switch_2').onclick = function(){
              newL = new ol.layer.Image({
                  source: new ol.source.ImageStatic({
                      url: 'Bild2.png', 
                      imageSize: [722, 154],
                      projection: proj,
                      imageExtent: proj.getExtent()
                  })
              });
          }
      map.removeLayer(oldlayer);
      map.addLayer(newL);
      }
      Wenn ich auf die Radiobutton klicke, dann geschieht nichts. Mein erster Gedanke und Programmiercode war dies:
      Code:
      function checkedRadioBtn(){
      
          var newL;
      if(document.getElementById("bild-switch_1").checked){
      
              newL = new ol.layer.Image({
                   source: new ol.source.ImageStatic({
                      url: 'Bild1.png', 
                      imageSize: [122, 44],
                      projection: proj,
                      imageExtent: proj.getExtent()
                  })
              });
              
          }else if(document.getElementById("bild-switch_2").checked){
      
              newL = new ol.layer.Image({
                   source: new ol.source.ImageStatic({
                      url: 'Bild2.png', 
                      imageSize: [722, 154],
                      projection: proj,
                      imageExtent: proj.getExtent()
                  })
              });
           ...
       map.removeLayer(baseLayer);
           map.addLayer(newL);
      };
      Dies funktioniert bei mir, er switch die Bilder, aber mir ist aufgefallen, dass er nicht das vorherige Bild entfernt sondern er fügt einfach das Bild auf das vorherige oben drauf. Wie kriege ich das hin, dass dies nicht passiert?

      Hier der komplette Code:
      http://jsfiddle.net/B9qkU/
      Ich bedanke mich im Voraus!

      Kommentar


      • #4
        Hier ein kleiner Denkanstoß, damit du das jeweils aktuelle Bild einblenden und die andren ausblenden kannst.
        PHP-Code:
        var elements document.getElementsByClassName('bild-switch_1a'); //HTML Collection
        var current null;

        document.getElementByID('bild_switch_1').onclick = function(){
          
        current this;
          
        // Code, Code und nochmal Code
        }

        //...

        for(var el in elements){
          if(
        elements[el] == current){
             
        //Bild für jeweiligen Radio einblenden z.B.
             
        document.getElementByID('bild' elements[el]).style.display 'block';
          }
          else{
            
        //alles andere ausblenden, z.B.
            
        document.getElementByID('bild' elements[el]).style.display 'none';
          }

        Kommentar


        • #5
          Vielen Dank coolio.

          Es funktioniert jetzt richtig.
          Hier der Code:
          Code:
          var allLayers = map.getLayers(baseLayer).getArray()[0];
          map.removeLayer(allLayers);
          
          if(document.getElementById("bild-switch_1").checked){
                  //set new layer
                  newL = new ol.layer.Image({
                      source: new ol.source.ImageStatic({
                          url: 'Bild1.png', 
                          imageSize: [733, 152],
                          projection: pixelProjection,
                          imageExtent: pixelProjection.getExtent()
                      })
                  });
          ...
          
           map.addLayer(newL);
          Habe vor dem klick zuerst den layer holen (getLayers) und dann den löschen. Und es funktioniert. Wie findest du diesen Lösungsansatz?

          Deinen kann ich auch ausprobieren.

          Kommentar


          • #6
            Moment, moment, moment - du blendest die layer somit nur beim Aufruf aus, nicht aber, wenn du erneut einen radio button anklickst, also solltest du, um dein Vorhaben realisieren zu können das Ganze noch in ne Funktion packen und die bei jedem Klick aufrufen. Sonst überblendest du die Layer ja nur, wie zuvor.

            Kommentar


            • #7
              Also es sieht so aus:
              Code:
              function checkedRadioBtn(){
                  var newL;
                  
                  //get Layers and then remove it, because of that overlap the pictures
                  var allLayers = map.getLayers(baseLayer).getArray()[0];
                  map.removeLayer(allLayers);
                  
                  if(document.getElementById("bild-switch_1").checked){
                      //set new layer
                      newL = new ol.layer.Image({
                          source: new ol.source.ImageStatic({
                              url: 'data/schiffBaudock.png', 
                              imageSize: [733, 152],
                              projection: pixelProjection,
                              imageExtent: pixelProjection.getExtent()
                          })
                      });
                      
                  }else if(document.getElementById("bild-switch_2").checked){
                      //set new layer
                      newL = new ol.layer.Image({
                          source: new ol.source.ImageStatic({
                              url: 'data/Schiffganz.png', 
                              imageSize: [2476, 574],
                              projection: pixelProjection,
                              imageExtent: pixelProjection.getExtent()
                          })
                      });
                      ...
               map.addLayer(newL);
              };
              HTML:
              Code:
              <div id="tree" class="span2">
                                      <fieldset id="layerA">
                                          <label class="radio" for="bild-switch_1">
                                              <input id="bild-switch_1" class="bild-switch_1a" type="radio" name="bilder" value="bild1" onchange="checkedRadioBtn()" checked />Bild1
                                           </label>
                                          <label class="radio" for="bild-switch_2">
                                              <input id="bild-switch_2" class="bild-switch_1a" type="radio" name="bilder" value="Bild2" onchange="checkedRadioBtn()" />Bild2
                                           </label>
                                          <label class="radio" for="bild-switch_3">
                                              <input id="bild-switch_3" class="bild-switch_1a" type="radio" name="bilder" value="Bild3" onchange="checkedRadioBtn()" />Bild3
                                           </label>
              ...
                                      </fieldset>
                              </div>
              Müsste doch richtig sein, oder?

              Kommentar

              Lädt...
              X