This forum uses cookies
This forum makes use of cookies to store your login information if you are registered, and your last visit if you are not. Cookies are small text documents stored on your computer; the cookies set by this forum can only be used on this website and pose no security risk. Cookies on this forum also track the specific topics you have read and when you last read them. Please confirm whether you accept or reject these cookies being set.

A cookie will be stored in your browser regardless of choice to prevent you being asked this question again. You will be able to change your cookie settings at any time using the link in the footer.

Themabewertung:
  • 0 Bewertung(en) - 0 im Durchschnitt
  • 1
  • 2
  • 3
  • 4
  • 5
Hintergrundbild wechseln
#11
Hast du das nicht gelesen was ich in Beitrag 5 geschrieben habe.
Lese das nochmal und teste mein Code nochmal . Zb das geht

<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

<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.
Hier sind alle meine Lösungen aus allen Foren. Ich helfe auch in Facebook-chat
Als Lösung markieren Zitieren
#12
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


Angehängte Dateien
.html   Bildwechsel.html (Größe: 1,19 KB / Downloads: 1)
Als Lösung markieren Zitieren
#13
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','...')'
"Gerne dürft ihr mir eine gute Bewertung da lassen aber auch gegenüber Kritik bin ich offen" Angel
Als Lösung markieren Zitieren


Gehe zu:


Benutzer, die gerade dieses Thema anschauen: 1 Gast/Gäste