img src mit css oder js ändern?

[MrMurphy1]

Hallo

mir wäre eine Lösung mit JavaScript zu unsicher, da das häufig blockiert ist, zum Beispiel um unerwünschte Werbung zu unterdrücken.

Ich würde die Bilder mit mittels des Pseudoelements ::before überschreiben. Zusätzlich könnte das Originalbild noch mittels display:none versteckt werden. Dann müssen aber eventuell noch die Abstände korrigiert werden.

Um das zweite Bild zu überdecken könnte das CSS folgendermaßen aussehen:

.nav > ul > li:nth-child(2) {
   position: relative;
}
.nav > ul > li:nth-child(2)::before {
   content: url("pfad/bild");
   position: absolute;
}

oder wenn alle Bilder individuell ersetzt werden sollen

.nav > ul > li {
   position: relative;
}
.nav > ul > li::before {
   position: absolute;
}
.nav > ul > li:nth-child(1)::before {
   content: url("pfad/bild1");
}
.nav > ul > li:nth-child(2)::before {
   content: url("pfad/bild2");
}
.nav > ul > li:nth-child(3)::before {
   content: url("pfad/bild3");
}

Gruss

MrMurphy