Hintergrundbild wechseln

[Walchi]

Einen schönen Guten Abend,

ich bräuchte bitte Hilfe - habe ein Problem mit JavaScript. Bin hier noch eher Anfänger - sorry ...

Ich habe eine Seite, wo ein Hintergrundbild drin ist. Dies ist in der .html-Seite wie folgt eingebunden:

Code:

<div class="header_image"><script>var headImage =    "assets/images/Header_Tom/Winter/Winterspass_Header.jpg";</script>
<picture>
     <source media="(min-width:661px)" 
         srcset="assets/images/Header_Tom/Winter/Winterspass_Header-gross.jpg">
     <source media="(max-width:660px)" srcset="assets/images/Header_Tom/Winter/Winterspass_Header-
         klein.jpg">
     <img id="headImageImg" src="img/px.webp" data-src =
          "assets/images/Header_Tom/Winter/Winterspass_Header-gross.jpg" alt="" width="2000"   
           height="1000"/>
</picture>
<link href="assets/images/Header_Tom/Winter/Winterspass_Header-gross.jpg" rel="preload" as="image" media="(min-width:661px)"/>
<link href="assets/images/Header_Tom/Winter/Winterspass_Header-klein.jpg" rel="preload" as="image" media="(max-width:660px)"/></div>

So weit, so gut. In der Picture-Section wird das Hintergrundbild gesetzt - beim Bild Header-groß handelt es sich um ein 1000 x 500 er Bild, heruntergerechnet, was auf den 2000 x 1000 eingesetzt wird. Also ein unscharfes erstes Bild.

Gesetzt ist auch eine Variable headImage, wo das endgültige Foto mit den 2000 x 1000 drin ist.
Nach dem Laden der Seite sollte eine Function einfach den src auf das neue Foto austauschen. Das geht nicht.

Mein Versuch dazu (mal zum probieren als Click-Button drauf - kommt dann als Onload-Function rein) :

Code:

<p id="demo">JavaScript can change HTML content.</p>

<script>
function loadBild() {
var _name = headImage;
window.alert(_name);
_name = document.getElementById("headImageImg").src;                            
window.alert(_name);
picture = new Image();
picture.src = "assets/images/Header_Tom/Zimmer/Dachstein_Header-gross.jpg";    
document.getElementById("headImageImg").src = picture.src;
_name = document.getElementById("headImageImg").src;                            
window.alert(_name);
}
</script>

<button type="button" onclick='loadBild();document.getElementById("demo").innerHTML = "Hello JavaScript - Aufruf ist erfolgt"'>Click Me!</button>

Sorry, der Code ist durch das viele Probieren und den vielen window.alert drin verwirrend, aber dadurch sehe ich, dass der Code durchläuft und die Variablen passen. Im einzelnen passiert hier :

Am Anfang habe ich nur geschaut, ob in der Variable headImage der Wert drin ist. Ist für mich nur ein Test.
 
Dann mache ich ein new(Image), und lade das Foto, das ich drin haben will. Damit ich sicher sein kann, dass das Foto da ist und geladen ist, habe ich hier ein anderes Foto genommen, als in der Endversion. Und zwar eines, das auf der Website bereits drauf ist. Das muss ja dann schon geladen sein.

Dann weise ich dem Hintergrundbild die .src des Fotos zu.
Die window.alert sagen mir, dass sich der .src-Wert ändert. 

Aber das Bild bleibt gleich. Ich könnte mir vorstellen, dass ein Hintergrundbild anders in der Seite eingebettet ist als ein normales Foto. Und ich hier den Hintergrund neu zeichnen muss? Oder was kann schuld sein.

Die Seite ist als Versuchsseite scharf, und zwar hier:
https://www.alpenhof.com/de/preise/winte...spass.html

Was mache ich falsch? Ist ja eigentlich eine einfache Übung, aber ich stecke.

Danke für Eure Hilfe,

LG Walchi

[admin]

Kannst du das nochmal in kurz erklären?
Ich sehe auf deine Seite keine unscharfen Fotos, was soll da den getauscht werden.

Welches Foto soll den getauscht werden?
Warum machst du das Bild nicht gleich von Anfang an da rein?
Ich bin noch etwas verwirrt

[admin]

Aber hie mal ein Beispiel wie man ganz einfach Bild wechselt

[Walchi]

Hallo Admin,

danke für Deine Antwort.

Zuerst mal der Sinn des ganzen - wir betreiben eine Website - diese läuft unter ModX. Jetzt haben wir ein Geschwindigkeitsproblem (zumindest lt Page Insights). Besser ist es schon geworden, es wird einiges lazy geladen.

Aber wir wollen zuerst das Headerbild in einer geringen Auflösung drinhaben - und danach mit einer Funktion gegen das scharfe (ansonsten identische Bild) austauschen wollen. 

Auch deine Variante hat nicht funktioniert - zumindest nicht beim Headerbild. Habe jetzt die Website offline abgespeichert, und einen Teil nach dem anderen entfernt. Bis zum Kern hin. Und siehe da:

Code:

<picture>
<source media="(min-width:661px)" srcset="assets/images/Header_Tom/Winter/Winterspass_Header-gross.jpg">
<source media="(max-width:660px)" srcset="assets/images/Header_Tom/Winter/Winterspass_Header-klein.jpg">
<img id="headImageImg" src="img/px.webp" data-src="assets/images/Header_Tom/Winter/Winterspass_Header-gross.jpg" alt="" width="2000" height="1000"/>
</picture>

Wenn ich das img-Tag aus dem Picture-Tag rausnehme, kann ich es ändern. Aber ich brauche dieses Picture-Tag. um responsive zu sein? Und es kommt aus ModX - ich kann es nicht so einfach ändern.

Hat wer eine Idee, wie man innerhalb des picture-Tags das Bild ändern kann? Ich kann das aktuelle Bild auslesen, aber es nicht beschreiben. Meine Testseite ist angepasst, das man das Problem sieht,

Hat wer eine Idee - Google hat mir die Antwort zum Auslesen ausgespuckt, aber zum Schreiben habe ich nichts gefunden, 

LG Walchi

[admin]

Du solltest in dein Beispiel mal richtige Bilder rein machen und keine 1x1 Pixel große Dummys weil so kann man schlecht testen.
Du weißt aber schon was picture macht und was das img da drin tut oder?
Das img Element darin kommt nur zum Einsatz, wenn der Browser das <picture> nicht unterstützt , oder man im picture Element keine Übereinstimmung hat.

Bei dein code hast du alle Größen drin.
Einmal alles unter 660px und einmal alles über 660 Pixel.
Somit kommt das img Tag nicht zum Einsatz.

Dieser Code funktioniert,

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>

Das siehst du auch in der Konsole das das Bild in <img> geändert wurde, aber wie gesagt bei dein Source code kommt es sowieso nicht einsetzt.
Das kannst du testen, wenn du das min rausnimmst

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>

Im Browse siehst du das jetzt auch das ab 660px das img Element greift

[rzscout]

Hallo Walchi,
du machst die ganze Sache sehr kompliziert. Hier ein Link zu Thema picture-Element -> https://www.mediaevent.de/html/picture.html

Ich kann dir empfehlen wenn du das Bild als Grafik einbinden möchtest über ein Element, dann solltest du das img-Element verwenden. Mithilfe von srcset und sizes kannst du alles abdecken.

Siehe dir dazu diese Seite an -> https://www.mediaevent.de/html/img.html

Du solltest außerdem prefetch statt preload verwenden. Das macht die Seite schnell und das Ranking wird indirekt bei Suchmaschinen positiv beeinflusst.

Viel Erfolg

[Walchi]

Griaß enk,

und danke für die Antworten. Momentan bin ich in Arbeit,
melde mich dann, wenn und wie ich weiterkomme,

LG Michi

[Walchi]

So, jetzt habe ich mal probiert.

Die Seite läuft auf modX, ist von einer Web-Agentur programmiert. Habe gerade den Auftrag gegeben, die Seite zu beschleunigen. Hat auch im großen und ganzen funktioniert. Aber mit den Bildern bin ich nicht zufrieden, daher der Wunsch, ein kleines Foto zuerst anzuzeigen und dann nach Laden der Seite durch ein richtig scharfes zu ersetzen.

So erklärt es sich, dass auf alles, das vom CMS-System rüberkommt, nicht richtig zugreifen kann. Aber ich kann Codes in den body reinpacken. Aber z.B. nicht einfach sagen, ich nehme jetzt kein picture-Tag und löse es anders.

Zum Versuch - der Code von Admin ist auf meine Testseite gepackt. Er läuft durch, wechselt auch brav den .src des Hintergrundbildes aus. Aber das Foto ändert zwar seine Grösse, bleibt ansonsten aber stur, wie es ist,

Heute abend geht es weiter,

LG Michi

[rzscout]

Hi,
leider kenne ich mich mit modx garnicht aus. Eine Agentur hätte das eigentlich hinbekommen sollen. Warum ist die Agentur für sowas nicht in der Lage eine Lösung zu erstellen.

Ich habe auch eine eigene Agentur und weiß wie man passende Lösungen bekommt.

Was mir auffällt - es ist auf der Seite sehr unstimmig und Umsetzung sollte man verbessern. Man verliert schnell die Übersicht. Zudem ist dieses lazy-load auf der Seite langsam und nervt und sieht hässlich aus.

Viele Grüße

rzscout

[Walchi]

Guten Abend,

ich danke Euch allen für Eure Bemühungen.

Ich habe jetzt den Code von admin nicht zum laufen gebracht - er hat zwar den src geändert, aber das Bild blieb gleich. Ich dachte zuerst, es ist meine Seite mit den vielen Scripts drauf. 

Aber auch eine Mini <html><head>... etc Seite mit dem eingefügtem Code hat nicht das gewünschte Ergebnis gebracht.
Eigentlich sollte die bebrillte Dame gegen die andere ausgetauscht werden. Habe die html-Seite mal angefügt.
Ich verstehe schon, dass das <img> Foto leicht zum austauschen ist, aber durch den Picture-Tag gar nicht angezeigt wird. Aber ich habe diesen Tag halt mal in der Programmierung drin, und schaffe keinen Zugriff auf das Foto. Damit das halt auch wechselt.

Bin jetzt zu Plan B übergegangen, und habe das Bild direkt eingefügt. Jetzt geht auch das Wechseln - ich glaube, jetzt kann man sich auch das Verschärfen vorstellen. Sieht man auf meiner oben angeführten Testseite - lass Sie noch einige Tage oben. Aber mein Einfügen im CMS stellt das ganze an die falsche Stelle - deshalb ist der Seitenaufbau nicht ganz richtig.

Dies ist dann Aufgabe der Agentur. Mit dieser Vorleistung gehe ich jetzt zu denen und mache mal Wind. So wäre es bei der kürzlich erfolgten Page-Speed-Optimierung bestellt gewesen. Es wurde auch grundsätzlich programmiert, da eine Variable im Code drin ist, die sonst keinen Sinn machen würde. Aber es hat halt noch nie funktioniert ...

Also Danke mal Euch allen - 
auch mit der halben Lösung kann ich zur Agentur gehen,

LG Michi