jQueryでCSSの背景画像を切り替えたい

見出しをクリック後にCSSで指定している背景画像を変えるため、jQueryでCSSを変更させてみたところ上手くいきません。

jQueryで指定する変更後の背景画像を絶対パスに換えたら上手くいったので、
パスの指定方法が悪いところまでは分かったのですが、相対パスでの指定方法がわからなくなりました。

WordPress環境で下記のコードを使用しています。
ご教授の程、よろしくお願い致します。


【 jQuery】
○ディレクトリ ： テーマフォルダ/js/change.js

jQuery(function() {
jQuery("h3 div.class").hide();
jQuery("h3").click(function() {
jQuery(this).next().slideToggle("fast");
jQuery(this).css("background-image" , "url('img/pic2.jpg')");
});
});


【CSS】
○ディレクトリ : テーマフォルダ/style.css

h3 {
background: #7c8187;
background-image: url(img/pic.jpg);
cursor: pointer;
}

【画像】
○ディレクトリ :
テーマフォルダ/img/pic.jpg
テーマフォルダ/img/pic2.jpg

No.1 ベストアンサー 回答者： 4017B 回答日時： 2011/04/30 10:06

jQueryに限った事ではありませんが。

・ページのHEAD内に記述する場合、そのページ（HTMLファイル）からの相対パス。
・外部JSからの読み込む場合、そのJSファイルからの相対パス。

～と言う事で。それでも上手くいかないのであれば、何か他に原因があるかもです。

この回答へのお礼

外部JSにした場合どのファイルから見た相対パスを打てばいいのか分からなかったので、非常に助かりました。

当方の事例の場合、外部JS(change.js)から見た画像の相対パスは「../img/pic2.jpg」になると思い試してみたところ、動作しませんでした。
続いて検証として全てのファイルを同階層に移し、パス指定をファイル名のみに変えても動作せず…何かがオカシイですね…。

WordPress環境下の為コレが原因かなと思い、change.js内のパスを「/wordpress/wp-content/themes/テーマフォルダ/img/pic2.jpg」に変更したところようやく画像の切替ができました。

なぜ上記のパスが必要かは理解できていません。精進します。
早速のご回答、誠にありがとうございました。

お礼日時：2011/04/30 14:04