✔ Radio Buttons

[ByeBye 274521]

Hallo,

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

Mein 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:

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

 

[Sempervivum]

Leg ein img-Tag an und gib ihm eine ID. Dann kannst du darauf mit getElementById zugreifen und das src-Attribut setzen:

document.getElementById("id_deines-img-tags").src = value;

Ich glaube, in dem Code, den Du oben gepostet hast, hast Du die Erweiterung vergessen:

value = radios[i].value + ".jpg";

Viel Erfolg und viele Grüße - Ulrich

 

[ByeBye 274521]

Danke für die Antwort. Da ich mit Openlayers arbeite, kann ich mit einem <img .../> kein Bild einfügen. Also es geht, aber dann muss ich mti dem zoomen, Koordinaten u.a. nochmal implementieren. Also ich habe jetzt meinen Code verändert.

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);
};

Er switch mir die Bilder wenn ich auf ein Radiobutton klicke, aber mir fällt auf, dass mein vorheriges Bild nicht entfernt wird, sondern das Bild wird einfach obendrauf eigefügt. Ich sehe auch das vorherige Bild davor, wenn das Bild danach etwas kleiner ist.

Hoffe auf einen Tipp und Ratschläge! Bedanke mich im Voraus!

 

[ByeBye 274521]

Hier der komplette Code.http://jsfiddle.net/B9qkU/

 

[ByeBye 274521]

Jetzt wird nur ein Bild gesehen udn kein weiteres Bild wird überlappt.

var allLayers = map.getLayers(baseLayer).getArray()[0];
map.removeLayer(allLayers);

Trotzdem vielen Dank für deine Hilfe Sempervivum! Bei weiteren Fragen, darf ich mich doch an dich/euch wieder wenden, oder?

 

[SpiceLab]

Bei weiteren Fragen, darf ich mich doch an dich/euch wieder wenden, oder?

Yes JQ Can

 

[ByeBye 274521]

Meine nächste Frage wäre noch, wie kann ich das noch kompakter machen? Wie man oben sieht, habe ich jede Menge if-Bedingungen gemacht. Ich habe jetzt über 200 Zeilencode. Kann man diese if-Bedingungen irgendwie kürzen?

 

[SpiceLab]

Der JS-Code wäre dahingehend umzuschreiben, dass die (individuellen) Angaben zum Bildpfad, Bildgröße etc. der Funktion checkedRadioBtn() als Parameter übergeben werden:

function checkedRadioBtn(url, imageSize) { ... }

<input ... onchange="checkedRadioBtn('Pfad-zum-Bild' , 'Bilddimension')" />

 

[ByeBye 274521]

hmm...aber ich muss ja trotzfem diese ganzen if-Bedingungen machen, wenn ich trotzdem ein paar Parameter einsetze. Oder denke ich in der Hinsicht falsch?

 

[rd4eva]

hmm...aber ich muss ja trotzfem diese ganzen if-Bedingungen machen, wenn ich trotzdem ein paar Parameter einsetze. Oder denke ich in der Hinsicht falsch?

Nein die if-Bedingungen kannst du dir dann sparen. Url und imageSize sind ja die einzigen Eigenschaften die du jeweils veränderst. Und genau die Eigenschaften übergibst du ja dann schon.
Du kannst also einfach folgendes machen

<input ... onchange="checkedRadioBtn('Bild1.png' , [733, 152])" />

function checkedRadioBtn(url, size){
newL = new ol.layer.Image({
  source: new ol.source.ImageStatic({
  url: url,
  imageSize: size,
  projection: pixelProjection,
  imageExtent: pixelProjection.getExtent()
  })
  });
map.removeLayer(baseLayer);
  map.addLayer(newL);
}