jQuery: img.src => matched string ersetzen

[147852369]

Hallo Forum,

wie kann ich das Wort "logo" durch "logo_header" in src ersetzen?

Ich könnte das folgendermaßen machen:

        $("img#logo").hover(
            function() {
                this.src = document.URL + 'templates/mytp/images/template/logo_hover.png';
            }, function() {
                this.src = document.URL + 'templates/mytp/images/template/logo.png';
            }
        );

Aber dann müsste ich bei jedem Kunden "mytp" manuell ersetzen, da sich der Templatename und manchmal auch der komplette Pfad ändert.
Ich dachte, ich könnte einfach in src nach logo suchen und durch logo_header ersetzen, damit es so dynamisch bleibt.

 

[Tronjer]

Das ist kein guter Stil. Bilder sollten relativ referenziert und vor allem die Ordnerstrukturen beibehalten werden.

In dem Fall könntest den jeweiligen Kunden als Data-Attribut im HTML übergeben.

<!--- Kunde Meier -->
<img id="#logo" data-customer="meier" src="templates/meier/images/template/logo.png">

// ungetestet
$('#logo').hover(
  function(
    $(this).prop('src', 'templates' + data['customer'] + '/images/template/logo_hover.png');
  ),
  .........
);

Sollten sich die Ordnerstrukturen dagegen häufig ändern, musst du die Stringfunktionen von vanilla JS bemühen. Wandel den gesamten Pfad mit split() und '/' als delimiter in ein Array um, schneide das letzte Element aus und ersetze es mit dem jeweiligen Bild.

 

[Sempervivum]

Na, ich glaube, das geht auch einfacher mit der replace-Funktion

in src nach logo suchen und durch logo_header ersetzen

$("img#logo").hover(
            function() {
                this.src = this.src.replace(/logo\.png$/, "logo_hover.png");
            }, function() {
                this.src = this.src.replace(/logo_hover\.png$/, "logo.png");
            }
        );

 

[147852369]

@Sempervivum: Das ist das, was ich gesucht habe.
@Tronjer: Ich habe mich nicht eindeutig ausgedrückt. Ich meinte nicht Kunden im Sinne von Datensätzen. Ich will das eine Script mehrmals benutzen. In meinem Falle für Joomla-Templates, wo eben der Templatename nicht immer gleich ist.