Im a-Tag ein Background-Image ersetzen

[Teilzeitphilosoph]

Moinz.
Ich bin mir nich ganz sicher, ob ich hier richtig bin aber ich probiers einfach mal.
Mittels JQuery möchte ich gerne ein BG-I in einem a-Tag austauschen. Dazu hab ich folgenden Code

function change(){
   $('a.myLnk').css("background-image", "url(../img/newPic.gif)");
}

Die Funktion wird sofort beim Start aufgerufen. Ein Alert klappt 1a.

Und im HTML sieht es so aus

...
<a href="newSite" class="myLnk">Hier lang</a>
...

CSS:
a.myLnk:link, a.myLnk:active, a.myLnk:visited { padding-left: 12px; background: url("../img/oldPic.gif") no-repeat left; font-size: 12px; color: #58585a; text-decoration: none; }

Und vielleicht auch noch wichtig: Im Firebug kann ich, wenn ich über den Link gehe, das hier sehen:

element.style {
background-image:url("../img/newPic.gif");
}

a.myLnk:link, a.myLnk:active, a.myLnk:visited {
background:url("../img/oldPic.gif") no-repeat scroll left center transparent;
color:#58585A;
font-size:12px;
padding-left:12px;
text-decoration:none;
}

Das Problem: Es passiert nix...mein kleines Gif verschwindet komplett und ich weiß -noch- nicht warum. Hat jemand ne Idee?
Es gibt gewiss auch andere Wege aber ich muss JQuery nehmen.

-bedank-

 

[ComFreek]

1.) Eventuell existiert die Datei nicht.

2.) Ich bin mir nicht sicher, ob das was ausmacht, aber müssen bei url keine Anführungsstriche sein:?

background-image: url('...');

 

[Teilzeitphilosoph]

Doch, die Datei existiert. Wenn ich im Firebug den Pfad von Hand anpasse, klappt alles.
Das mit dem Anführungsstrichen in der URL hab ich getestet aber es hat nix gebracht...leider.

 

[ComFreek]

Heißt, das, dass background-image gar nicht gesetzt wird?
Nunja mit jQuery kenne ich mich (noch, lerne es gerade) nicht so gut aus, vielleicht kann die ja ein Andere helfen.

 

[CPoly]

Blöde Idee:
Ist vielleicht das Bild newPic.gif links mittig (left center) weiß oder transparent und du siehst es nur nicht? Kannst du mir Firebug (auf der rechten Seite bei "Styles") mit der rechten Maus "Grafik in neuen Tab öffnen" machen und das ist die korrekte Datei?

Edit:
Wenn

element.style {
background-image:url("../img/newPic.gif");
}

da ist, kann JQuery schon nicht mehr die Ursache sein. Es muss also ein Fehler in dieser einen Zeile sein.

 

[Teilzeitphilosoph]

Ich bin mir nich ganz sicher, ob das nich doch was im JQ ist. Zwar stimmt der Pfad aber der Firebug gibt mir kein richtiges Vorschaubild, wenn ich mit der Maus über den Link gehe. Er zeigt mir immer noch das alte Pic an.
Ich hab das neue Bild mit einem rotem Quadrat ausgetauscht....nüscht. Irgendwas muss ich übersehen haben....

Und was mich auch interessieren würde: Wie kann ich mittels JQuery z.B. die Änderung nur bei a.myLnk:hover ausführen? Ein

$('a.myLnk:hover')

hat nix gebracht.

 

[CPoly]

Kannst du vielleicht ein kleines Beispiel-HTML-Dokument erstellen und uns geben, dann können wir auch rumtesten?

Bei welchem Ereignis führst du denn jetzt die Ersetzung durch, wenn nicht bei hover?

$('a.myLnk').hover(function() {
    $(this).css("foo", "bar");
}, function() {
    $(this).css("foo2", "bar2");
});

Edit:
Vielleicht beißt sich auch das

a.myLnk:link, a.myLnk:active, a.myLnk:visited {
}

mit der Inline-Deklaration. Nimm mal nur

a.myLnk {
}

 

[Teilzeitphilosoph]

Ich hab´s. Es stellte sich heraus, dass der Pfad komplett sein muss. Mit "../" klappt nichts aber bei der vollen URL läuft es perfekt. Wieder was gelernt. ^^
Meinen Dank für die Antworten!

 

[rd4eva]

Ich hab´s. Es stellte sich heraus, dass der Pfad komplett sein muss. Mit "../" klappt nichts aber bei der vollen URL läuft es perfekt. Wieder was gelernt.

Sorry aber das ist falsch.
Das es mit eine absolutem Pfad funktioniert ist logisch. Es funktioniert aber durchaus auch mit einem relativen Pfad, voraussgesetzt dieser stimmt, wovon ich in deinem Fall mal nicht ausgehe.

 

[Teilzeitphilosoph]

Damit hast du absolut recht und das ist auch der nächste Schritt. Aber soweit bin ich froh, dass es klappt.