Rainer: img src mit css oder js ändern?

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

  1. 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

    --
    Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
    Terry Pratchett, „Gevatter Tod“
    1. 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

      1. 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

        --
        Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
        Terry Pratchett, „Gevatter Tod“
        1. 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

    2. Hmmm ---

      .nav>ul>li>img {content: url("https://......../img_admin/icon_nav.png");}

      eben mal getestet und funktioniert. Also doch mit CSS möglich?

      1. 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

        --
        Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
        Terry Pratchett, „Gevatter Tod“
        1. 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

          1. 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

            --
            Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
            Terry Pratchett, „Gevatter Tod“

            1. <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.) ↩︎

            1. @@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 🖖

              --
              Ist diese Antwort anstößig? Dann könnte sie nützlich sein.

              1. Warum beginnt die Zählung bei Literatur mit 2, bei Anbietern eigentlich bei 3? ↩︎

              1. 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

                --
                Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
                Terry Pratchett, „Gevatter Tod“

                1. Vorerst mag einen langen Zeitraum umschreiben. 2003 bis 2015 ist ja auch nicht grad' kurz. ↩︎

    3. @@Auge

      Suche über das DOM das entsprechende HTML-Element

      Du meinst: Suche über das DOM das entsprechende HTML-Element

      LLAP 🖖

      --
      Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
    4. 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

      1. 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

        --
        Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
        Terry Pratchett, „Gevatter Tod“
  2. @@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:

    • Das zur zur Verzierung dienende Bild ganz aus dem Markup zu entfernen.
    • <div class="nav"> wäre gern <nav>.
    • Die Links wie <a href="?page=admin_index&sid=dbd8....." > müssten berichtigt werden: & wäre in HTML als &amp; 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 🖖

    --
    Ist diese Antwort anstößig? Dann könnte sie nützlich sein.
    1. 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;}

      1. 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

        --
        Es schimmerte ein Licht am Ende des Tunnels und es stammte von einem Flammenwerfer.
        Terry Pratchett, „Gevatter Tod“
        1. 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.

  3. 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