img src mit css oder js ändern?
Rainer
- css
- javascript
Hallo,
ich möchte die Quelle einer Bilddatei ändern und habe leider nur Zugriff über CSS oder JS. Ist das überhaupt möglich? Hier der Ausschnitt:
<div class="nav">
<h4>Allgemein</h4>
<ul>
<li><img style="vertical-align: bottom;" src="theme/default/images/icon_nav.png" alt="" width="16" height="16" /> <a href="?page=admin_index&sid=dbd8....." >Übersicht</a></li>
<li><img style="vertical-align: bottom;" src="theme/default/images/icon_nav.png" alt="" width="16" height="16" /> <a href="?page=admin_accounts_index&sid=dbd8jf....." >Benutzeraccounts</a></li>
<li><img style="vertical-align: bottom;" src="theme/default/images/icon_nav.png" alt="" width="16" height="16" /> <a href="?page=admin_domain_index&sid=dbd8....." >Domains</a></li>
</ul>
</div>
Rainer
Hallo
ich möchte die Quelle einer Bilddatei ändern und habe leider nur Zugriff über CSS oder JS. Ist das überhaupt möglich?
Ja, mit JavaScript ist das möglich. Mit CSS jedoch nicht. Suche über das DOM das entsprechende HTML-Element heraus und setze den Wert des Attributs src mit setAttribute.
Tschö, Auge
Hallo,
und setze den Wert des Attributs src mit setAttribute.
Warum sollte man das so erledigen? Viel zu umständlich.
Einfach: img.src = 'abc.jpg'
Reinhard
Hallo
und setze den Wert des Attributs src mit setAttribute.
Warum sollte man das so erledigen? …
Weil das für einen Lernenden den Vorteil hat, universell zu sein.
… Viel zu umständlich.
Mag sein. Das gilt aber genau für diesen Fall (und ein paar weitere). In anderen Fällen muss er doch wieder zu setAttribute greifen.
Einfach:
img.src = 'abc.jpg'
Wenn er sich einig wird, welche Angabe er austauschen will und sich für die Source eines img
entscheidet, ja. Für die Zuweisung eines Hintergrundbildes, gerade bei Elementen, denen immer das gleiche Bild zugewiesen wird, würde ich hingegen zur Zuweisung oder zum Austausch einer Klasse greifen.
Tschö, Auge
Mahlzeit,
… Viel zu umständlich.
Mag sein. Das gilt aber genau für diesen Fall (und ein paar weitere). In anderen Fällen muss er doch wieder zu setAttribute greifen.
hast du dafür ein Beispiel zur Hand? Mir ist so ein Fall nämlich noch nicht untergekommen. Zumindest kann ich mich atm nicht an einen solchen erinnern.
Einfach:
img.src = 'abc.jpg'
Wenn er sich einig wird, welche Angabe er austauschen will und sich für die Source eines
img
entscheidet, ja. Für die Zuweisung eines Hintergrundbildes, gerade bei Elementen, denen immer das gleiche Bild zugewiesen wird, würde ich hingegen zur Zuweisung oder zum Austausch einer Klasse greifen.
Ich auch, aber auch dann nicht über setAttribute(), sondern über eine Zuweisung an className, oder über addClass().
Ciao,
Martin
Hmmm ---
.nav>ul>li>img {content: url("https://......../img_admin/icon_nav.png");}
eben mal getestet und funktioniert. Also doch mit CSS möglich?
Hallo
Hmmm ---
Was „Hmmm“?
.nav>ul>li>img {content: url("https://......../img_admin/icon_nav.png");}
eben mal getestet und funktioniert. Also doch mit CSS möglich?
Was willst du?
Willst du die Quellangabe eines img-Elements ändern, wovon in im Eröffnungsposting die Rede war? Oder willst du die Quellangabe eines mit CSS zugewiesenen Hintergrundbildes ändern, wovon du nun schreibst?
Tschö, Auge
Hallo,
.nav>ul>li>img {content: url("https://......../img_admin/icon_nav.png");}
Oder willst du die Quellangabe eines mit CSS zugewiesenen Hintergrundbildes ändern, wovon du nun schreibst?
Hmmm? Wo schreibt er hier von background-image?
Gruß
Kalk
Hallo
.nav>ul>li>img {content: url("https://......../img_admin/icon_nav.png");}
Oder willst du die Quellangabe eines mit CSS zugewiesenen Hintergrundbildes ändern, wovon du nun schreibst?
Hmmm? Wo schreibt er hier von background-image?
*grmpf*
Das tut er tatsächlich nicht. Die Doku-Seite zu content sagt mir aber, dass er damit auf dem Holzzweg gewesen wäre [1] und es doch wieder um background geht, was nun tatsächlich der Fall ist.
Ich hatte das, den tatsächlichen Code mit content
überlesen habend, quasi erahnt. ;-)
Tschö, Auge
<zitat>
Mit der Eigenschaft content können Sie auf vielfältige Art und Weise für die Pseudoelemente before und after Inhalte erzeugen.</zitat>
(Hervorhebung von mir.) ↩︎
@@Auge
Die Doku-Seite zu content sagt mir aber, dass er damit auf dem Holzzweg gewesen wäre
Immer diese Sekundärliteratur zweifelhafter Drittanbieter[1]. ;-)
Der aktuelle (Achtung: Ironie!) Working Draft CSS3 Generated and Replaced Content Module vom 2003-05-14 beschränkt die content
-Eigenschaft wie auch CSS 2.2 auf ::before
- und ::after
-Pseudoelemente.
Der Editor’s Draft vom 2015-06-24 tut das nicht mehr. Mal sehn, was die Zukunft bringt.
LLAP 🖖
Warum beginnt die Zählung bei Literatur mit 2, bei Anbietern eigentlich bei 3? ↩︎
Hallo
Der aktuelle Working Draft CSS3 Generated and Replaced Content Module vom 2003-05-14 beschränkt die
content
-Eigenschaft wie auch CSS 2.2 auf::before
- und::after
-Pseudoelemente.Der Editor’s Draft vom 2015-06-24 tut das nicht mehr.
Allzu viel würde ich da nicht hineininterpretieren wollen. Schon alleine wegen des permanent sichtbaren Kastens und seines Inhalts …
Not Ready For Implementation
This spec is not yet ready for implementation. It exists in this repository to record the ideas and promote discussion.
… (Hervorhebung: iche) und des „Issues 2“, welches da sagt:
We should be clear about which pseudo-elements can use the content property.
Von daher schließe ich mich deinem letzten Satz („Mal sehn, was die Zukunft bringt.“) an und lehne mich vorerst [1] gemächlich zurück.
Tschö, Auge
Vorerst mag einen langen Zeitraum umschreiben. 2003 bis 2015 ist ja auch nicht grad' kurz. ↩︎
@@Auge
Du meinst: Suche über das DOM das entsprechende HTML-Element
LLAP 🖖
Hi,
ich möchte die Quelle einer Bilddatei ändern und habe leider nur Zugriff über CSS oder JS. Ist das überhaupt möglich?
Ja, mit JavaScript ist das möglich. Mit CSS jedoch nicht. Suche über das DOM das entsprechende HTML-Element heraus und setze den Wert des Attributs src mit setAttribute.
warum von hinten durch die Brust ins Knie? Ich würde direkt die src-Eigenschaft des gefundenen Javascript-Elementobjekts setzen.
So long,
Martin
Hallo
warum von hinten durch die Brust ins Knie? Ich würde direkt die src-Eigenschaft des gefundenen Javascript-Elementobjekts setzen.
jaja …, nochma druff! ;-)
Tschö, Auge
@@Rainer
ich möchte die Quelle einer Bilddatei ändern und habe leider nur Zugriff über CSS oder JS.
Warum nicht auf das HTML? Dort wären die Änderungen sinnvollerweise durchzuführen:
<div class="nav">
wäre gern <nav>
.<a href="?page=admin_index&sid=dbd8....." >
müssten berichtigt werden: &
wäre in HTML als &
zu escapen.Du könntest das Bild per .nav img { display: none }
nicht anzeigen lassen und stattdessen ein Hintergrundbild für .nav li
verwenden. Oder besser für .nav a
; warum sollte das Icon nicht auch anclickbar sein?
Allerdings wird die durch die img
-Elemente referenzierte Bilddatei – obwohl nicht angezeigt – dennoch geladen.
LLAP 🖖
Genau, das war die einzige Lösung welche in allen rel. Browsern (IE,FF,CHROME) funktioniert. Hier das Ergebnis:
.nav>ul>li>img {display:none;} .nav>ul>li {background: url("https://......../img_admin/icon_nav.png") no-repeat;padding-left:18px;}
Hallo
Genau, das war die einzige Lösung welche in allen rel. Browsern (IE,FF,CHROME) funktioniert. Hier das Ergebnis:
.nav>ul>li>img {display:none;} .nav>ul>li {background: url("https://......../img_admin/icon_nav.png") no-repeat;padding-left:18px;}
Es geht also offensichtlich (?) um den einmaligen Austausch des Bildes. Das ging aus deinem OP leider nicht hervor. Was ist denn mit der Möglichkeit, das Bild selbst auszutauschen bzw. zu ändern? Du würdest dir so die Manipulation des CSS-Quelltextes sparen.
Tschö, Auge
Klar, kein Problem. Als Serveradmin hab ich Zugriff auf HTML und auch die IMG. Es ist die Verwaltungssoftware des Servers. Da kommt in regelmäßigen Abständen ein Update. Die SW ist "Whitelabel" - allerdings nur für/über eigene CSS und JS. Alles andere wird dabei überschrieben. Das Problem hab ich nun mit dem CSS gelöst.
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