リンクをクリックして画像を切り替えるには？

質問

下記のようなソースなのですが、2枚目の画像に切り替わらず、表示されません。
何が悪いのでしょう？

<header内>------------------------------------->

<SCRIPT type="text/javascript">
<!--
function showimg1(){
document.area.src = "/jp/shop/i/popup_usbcalc/cg4.jpg";
}
function showimg2(){
document.area.src = "/jp/shop/i/popup_usbcalc/cg4_zoom.jpg";
}
//-->
</SCRIPT>

------------------------------------->

<img src="cg4.jpg" alt="" name="area" /><br />
<table>
<tbody>
<tr>
<td>[ <a href="javascript:void()" onclick="showimg1()">リンク1</a> ]</td>
<td>[ <a href="javascript:void()" onclick="showimg2()">リンク2</a> ]</td>
</tr>
</tbody>
</table>

回答No.5

BLUEPIXY · ベストアンサー

>これってどういうことなのでしょうか？
ウチでも、そういう現象がでてたので、そうじゃないかなと思っていたんですけど、
多分、キャッシュの問題だと思います。
functionより前の部分で
var image = new Array(2);
image[0]=new Image();
image[1]=new Image();
image[0].src="cg4.jpg";
image[1].src="cg4_zoom.jpg";
//パスは正しいパスで書いてください。
の様にすることで、画像を保持しておくことができますから
そうすれば、
functionの中で、
document.area.src = "cg4.jpg";
か
document.area.src = image[0].src;
で、問題なく表示されると思います。

お礼

functionより前の部分で～を記述したら画像が表示されるようになりました！
キャッシュの問題でしたか。。。画像を表示してもしばらく経つとまた画像が表示できない現象もそう言えばありました。
根気良くお付き合いいただきましてありがとうございました！！

回答No.4

BLUEPIXY

>画像のパスは通常ルートから書かないものなのでしょうか？
#3の方も書いておられますけど、
やはり、パスが怪しいかと思いまして＃２のように書かせていただきました。
試しに、ＨＴＭＬ文書と同じフォルダに画像をコピーしてパス指定無しで
つまり
document.area.src = "cg4.jpg";
みたいに書いてみてそれで表示されるか
どうかというのをテストされたらどうでしょうか
このようにして表示されればパスの指定の問題ということになるかと思います。（それでも表示されなければべつの問題）
あと、表示されない画像を右クリックして「画像の表示」で表示されるということはないですか？

お礼

ご回答ありがとうございました。
パス指定なしで画像を指定しても現象が変わらなかったのですが、表示されない画像を右クリックして「画像の表示」をしたら画像が表示されるようになりました。これってどういうことなのでしょうか？
何度もご回答いただいて本当に感謝です、ちょっと自分でも調べてみたいと思います。

回答No.3

koutarou504

void() の件は済んでいる様なので、
ポイントは、
＞"/jp/shop/i/popup_usbcalc/cg4.jpg";
この定義の様です。
絶対パスの様に解釈するブラウザもあれば、
カレントディレクトリからの相対パスの様に解釈するブラウザもあり・・・。
詳細までは検証しきれていませんが
とりあえず変更される事をお勧めします。
（作者が期待する位置とブラウザが解釈する位置が違うと・・・。）

とりあえず Windows XP SP2 上での検証で
HTML ファイルの場所が
D:\HTML\TEST\test.htm
という条件で
IE6.0 では、
D:\jp\shop\i\popup_usbcalc\cg4.jpg
を表示し
Opera7.54u2 では
D:\HTML\TEST\jp\shop\i\popup_usbcalc\cg4.jpg
を表示しました。
Mozilla1.7.5 では・・・、変化なし。表示対象なし？

尚、"./jp/shop/i/popup_usbcalc/cg4.jpg";
と相対パスとした場合は、いずれも
D:\HTML\TEST\jp\shop\i\popup_usbcalc\cg4.jpg
を表示している事はどれも検証しています。

それでもダメなら、
あとは画像ファイルの読み込み権限くらいしか思いつきませんが。

お礼

ご丁寧な回答ありがとうございました。
早速画像とHTMLファイルを同じディレクトリに入れて検証してみましたが。。。結果は同じでした。権限の設定を調査してみたいと思います。

回答No.2

BLUEPIXY

試してみましたが、画像は切り替わりました。（ＩＥ＆ＦｉｒｅＦｏｘ）
srcで指定しているパスは合っていますか？
「／」ルートから始めているのも変な気がします。
あと
javascript:void()
ですが、
voidは引数を取る演算子ですので、
javascript:void(0)
とかなんでもいいので引数を渡してやる必要があります。

お礼

ご回答ありがとうございました。
因数を追記してみましたが、現象は変わりませんでした。
画像のパスも間違いありませんでした。画像のパスは通常ルートから書かないものなのでしょうか？

回答No.1

THX1138

document.area.src = "/jp/shop/i/popup_usbcalc/cg4.jpg";

としていますが、ドキュメント中の画像は自動的に images と言う名前のコレクションに収められるようになっているので、

document.images['area'].src = ...

とする必要があります。

お礼

ご回答どうもありがとうございました。
早速試してみましたが、現象は変わりませんでした。
サーバーの方で何か設定をしているかどうか管理者の方に聞いてみたいと思います。