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.