Hintergrundbild wechseln

[admin]

Hast du das nicht gelesen was ich in Beitrag 5 geschrieben habe.
Lese das nochmal und teste mein Code nochmal . Zb das geht

Code:

<picture>
<source media="(max-width:660px)" srcset="https://basti1012.bplaced.net/image/2.png">
<img id="headImageImg" src="https://basti1012.bplaced.net/image/2.png" data-src="https://basti1012.bplaced.net/image/2.png" alt="" width="2000" height="1000"/>
</picture>
<script>

  
function wechseln(){
var newbild=document.querySelector('picture img');
  console.log(newbild)
  newbild.src='https://basti1012.bplaced.net/image/4.png';
      newbild.style.width='100%';
          newbild.style.height='auto';
    console.log(newbild)
  }
  wechseln();
</script>

Wenn der Bildschirm breiter als 660 Pixel ist, dann siehst du das neue Bild
Und bei dem Code

Code:

<picture>
<source media="(min-width:661px)" srcset="https://basti1012.bplaced.net/image/2.png">
<source media="(max-width:660px)" srcset="https://basti1012.bplaced.net/image/2.png">
<img id="headImageImg" src="https://basti1012.bplaced.net/image/2.png" data-src="https://basti1012.bplaced.net/image/2.png" alt="" width="2000" height="1000"/>
</picture>
<script>

  
function wechseln(){
var newbild=document.querySelector('picture img');
  console.log(newbild)
  newbild.src='https://basti1012.bplaced.net/image/4.png';
      newbild.style.width='100%';
          newbild.style.height='auto';
    console.log(newbild)
  }
  wechseln();
</script>

wirst du das getauschte Bild nie sehen, weil du unter 660 Pixel und über 660 Pixel alles abgedeckt hast.

Ändere das HTML so wie in meinen ersten Code hier und du siehst das ab 660 Pixel ein neues Bild zu sehen ist.

Mach mal Testseite fertig mit dem ersten Code hier.
Man könnte auch das Media Attribute mit Javascript ändern , dann sollte es auch gehen.

[Walchi]

Guten Morgen,

ich hatte zwar mein Thema gestern schon abgeschlossen, aber richtig gut schläft man erst, wenn ein Problem gelöst ist.

Meine Versuche, im Picture-Element das aktive Bild auszutauschen, sind gescheitert. Es war kein Bildwechsel sichtbar.

Jetzt habe ich den gesamten Html-Teil des Picture-Elements ausgetauscht, und so geht es. Im Anhang wieder der Code der lauffähigen Mini-Html-Seite. Damit schließe ich auch meine Offline-Testseite,

danke allen für die Hilfe,

LG Michi

---

Hallo Admin,

sorry, wie ich meinen Beitrag geschrieben habe, habe ich deinen neuen noch nicht gesehen gehabt. Bin nicht auf die 2. Seite gegangen.

Ja, so geht dein Code auch, weil er keinen Media-Eintrag für Bildschirmbreiten > 660 pixel hat,
umd damit auf das .img zugreift. Und den kann ich schreiben.
Jetzt habe ich das auch gecheckt.

Dann werde ich wohl eine brauchbare Lösung schaffen,
den Rest sollte ich hinbekommen, das habe ich eigentlich schon öfter gemacht,

LG Michi

[rzscout]

Also bei mir funktioniert deine HTML-Datei. Die Frage ist ob du es nicht etwas übertreibst. Verwende doch einfach ein img-Element und binde dort ein srcset ein und auch media. Danach kannst du abfragen ob das Bild geladen wurde, danach kannst du über zwei Wege die Inhalte ändern entweder direkt über 'img.srcset' oder über 'img.setAttribute('srcset','...')'