[FRAGE] Funktion ändern

[yabexxl]

Hallo Profis,

ich bin Newbi in Sachen Javascript und habe folgendes Problem.
Im nachfolgenen Code wird bei Klick auf den Text eine Google-Maps Karte gemäß des Links im Iframe geladen.

Nun möchte ich, dass anstelle des Iframes dort ein Bild angezeigt wird.

<script type="text/javascript">
(function (d) {
  var container = d.querySelector("#gmap-opt-in"),
      wrap = d.querySelector("#gmap-opt-in .gmap-opt-in-wrap"),
      btn = d.querySelector("#gmap-opt-in .gmap-opt-in-button"),
      iframe = d.createElement("iframe");
  
  btn.addEventListener("click", function () {
    iframe.setAttribute("style", "border:0;");
    iframe.setAttribute("src", "https://www.google.com/maps/embed?pb=.....");
    iframe.setAttribute("frameborder", "0");
    container.removeChild(wrap);
    container.appendChild(iframe);
  }, false);
})(document);
</script>


<div class="ce-google-maps" id="gmap-opt-in">
  <div class="gmap-opt-in-wrap">
    <div class="gmap-opt-in-button-wrap">
      <div class="gmap-opt-in-button">
        <div style="text-align: center; text-transform:uppercase; font-weight: 700;">Karte anzeigen</div>
        <div style="font-size: 100%; line-height: 1.3;">Bitte klicken 
Sie, um die interaktive Google Map anzuzeigen. Dabei werden 
personenbezogene Daten wie Ihre IP-Adresse an Google in den USA 
übertragen.</div>
      </div>
    </div>
  </div>
</div>

Da ich keine Ahnung habe, was ich wie ändern muss, bin ich auf euer Schwarmwissen angewiesen und hoffe, dass Ihr mir helfen könnt.

100000 Dank,
Gruss
Andrea

 

[mikdoe]

Nun möchte ich, dass anstelle des Iframes dort ein Bild angezeigt wird.

Was denn für ein Bild? Und was genau möchtest du wissen, wo steckst du fest? Weißt du den URL zum Bild nicht oder wie man es einbindet/positioniert oder die Größe ändert oder ... oder ... oder ...?

 

[tsseh]

mit iframe = d.createElement("iframe"); erzeugst du ein iframe
https://developer.mozilla.org/de/docs/Web/API/Document/createElement
genauso gut kannst du ein bild erzeugen, das entsprechende html-element heißt img
https://developer.mozilla.org/de/docs/Web/HTML/Element/img
die entprechenden eigenschaften des elements setzt du dann genau wie beim iframe mit setAttribute
https://developer.mozilla.org/de/docs/Web/API/Element/setAttribute
wobei das auch einfacher geht, anstelle von iframe.setAttribute("style", "border:0;"); hättest du auch einfach schreiben können iframe.style = "border:0;";