style.backgroundImageに代入するパスは相対?絶対?
<javascript type="text/javascript">
<!--
function changeTab(param)
{
for(var i = 1; i <= 2; i++) {
var tab = document.getElementById("tab" + i);
if(i == param) {
tab.style.backgroundImage = "url(../img/tab1.gif)";
} else {
tab.style.backgroundImage = "url(../img/tab2.gif)";
}
}
}
-
- >;
</javascript>
<ul>
<li id="tab1"><a href="#" onclick="changeTab(1); return false;">タブ1</a></li>
<li id="tab2"><a href="#" onclick="changeTab(2); return false;">タブ2</a></li>
</ul>
ってしてタブ1やタブ2の文字がクリックされると、タブが押されたように見た目が切り替わるようなのを作ってました。
話題は上で赤字になっているbackgroundImageのことなんだけど、backgroundImageに代入する"url(画像ファイルのパス)"のことでちょっとはまってしまった。
cssでbackground-imageを定義するときは、url(〜)の形でcssファイルから見たときの相対パスか、ルートからの絶対パスで書くと思うんだけど、javascriptからstyle.backgroundImageを操作するとき相対パスで値を代入すると、IEは意図したように動くのにFirefoxは動かなかった。絶対パスでルートから書いたパスを代入すると両ブラウザとも動いた。
どっちのブラウザがおかしいんだろ。