クリックをトリガーにして画像を変えたいです

[新着] Webテンプレートを仮オープンしました



0   名前: hige : 2007/02/08(木) 00:12  ID:geLt6WJP sub-Q5
サムネイル画像が3枚あり、その下にメイン画像がある画面を考えています。
サムネイル画像をクリックする毎にメイン画像が変わることを考えています。
それぞれのonClickで関数をコールし、

document.getElementById("main").src="http://localhost/hoge/"+img_name;

を実行して画像を変えようとしています。
上記ソースですとIE6では動くのですが、Firefox2では動きません。
どうしたら宜しいでしょうか。

1   名前: 匿名 : 2007/02/08(木) 00:12  ID:iK.3Z8B0 sub-kJ
ミスってる箇所はそこじゃない。他にある。

なお、Firefox 2.0 相手なら、こんなことは CSS に任せてしまえば良い。
http://www.lucky-bag.com/archives/2006/11/pure-css-slide-show.html

2   名前: hige : 2007/02/08(木) 00:12  ID:PB1jwFIH sub-t1
匿名さん返信ありがとう御座います。

ミスっている個所はどこでしょうか。
今後のためにご指摘頂けますでしょうか。

JavaScriptだけで実現はできないのでしょうか。

3   名前: 匿名 : 2007/02/08(木) 00:12  ID:iK.3Z8B0 sub-kJ
悪いが俺はエスパーではないんだ。書かれてもいない部分を、どうやって指摘すれば良いんだい?

>>0 だけならミスはない。だから「他に原因がある」と考えられる。これが、現時点で言える最大限のことだ。

問題が再現する最小の検証コードを提示するか、それができないのであれば問題が生じるページそのものを見せてほしい。

なお、IE で動くのに Firefox で動かない場合、95% の確率でスクリプトの書き方に問題がある。Firefox のせいではない(5% くらいは複雑な事項やバグが絡む)。

4   名前: hige : 2007/02/08(木) 00:12  ID:PB1jwFIH sub-t1
匿名さん返信ありがとう御座います。
説明が足りませんで申し訳御座いませんでした。
以下のようなソースを記述しておりますが、IE6では動きますが、Firefox2では動きません。
アドバイス頂けますでしょうか。



<html>

<head>
<script language="JavaScript">
function hoge(img_name){
document.getElementById("main").src=img_name;
}
</script>
</head>

<body>
<a href="JavaScript:hoge('1.jpg')"><img src="1.jpg"></a><a href="JavaScript:hoge('2.jpg')"><img src="2.jpg"></a><br>
<br><br><br>
<img src="1.jpg" id="main">
</body>

</html>

5   名前: 匿名 : 2007/02/08(木) 00:12  ID:iK.3Z8B0 sub-kJ
>>2
> 5% くらいは複雑な事項やバグが絡む

はまりやすい注意事項をもう 1 つ思い出した。Firefox の設定で、「他サーバからの画像を受信しない」「スクリプトによる画像変更を許可しない」が有効になっていないか確認してみてほしい(設定名はうろ覚え)。

我ながら嫌味っぽい文体ですまん。

>>3
修正すべき点(HTML 文法ミスその他)はあるが、少なくともそれで(も)動くはず。

6   名前: hige : 2007/02/08(木) 00:12  ID:Q9n79ALy sub-Q5
匿名さん返信ありがとう御座います。

頂いた設定名のヒントを元に設定を確認しましたが、

ツール>コンテンツ>画像を自動的に読み込む on
ツール>コンテンツ>JavaScriptを有効にする on
ツール>コンテンツ>詳細設定> 全てon

となっており、問題なさそうでした。

匿名さんからご指摘頂きました
「他サーバからの画像を受信しない」
「スクリプトによる画像変更を許可しない」
という設定は上記とは違いますでしょうか。

宜しくお願い致します。

7   名前: カヅサツ ◆ThCi95HEzw : 2007/02/08(木) 00:12  [URL]  ID:O5hEMlpW sub-r2
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
	"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
ul{
	margin: 0px;
	padding: 0px;
}
li{
	list-style-type: none;
	display: inline;
}
</style>
<script type="text/javascript">
function ChangeImage(obj,url){
	document.getElementById(obj).src = url;
}
</script>
</head>
<body>
<ul>
	<li><img src="http://www.google.co.jp/intl/ja_jp/images/logo.gif" alt="google"
		onclick="ChangeImage('main',this.src);"></li>
	<li><img src="http://i.yimg.jp/images/mht/2006/0401_10_c.gif" alt="google"
		onclick="ChangeImage('main',this.src);"></li>
</ul>
<p><img src="1.jpg" id="main" alt=""></p>
</body>
</html>

8   名前: hige : 2007/02/08(木) 00:12  ID:SQRKYQSp sub-Q5
カヅサツさん返信ありがとう御座います。

急な出張が入ってしまったため、返信が遅れてしまいましてすみません。

頂いたソースで試したのですが、Firefoxでは画像が変わりませんでした。
どこか足りない部分があればご教授頂けますでしょうか。

9   名前: 匿名 : 2007/02/08(木) 00:12  ID:DBPONIH8 sub-Vn
Operaではどう?上手くいく?

10   名前: hige : 2007/02/08(木) 00:12  ID:SQRKYQSp sub-Q5
匿名さん返信ありがとう御座います。

Opera9.10で試したところうまくいきました。
Firefoxのみダメということですね・・・

11   名前: 匿名 : 2007/02/08(木) 00:12  ID:UMe4AhfY sub-Gs
ロケーションバーに about:config と打ち込んで

dom.disable_image_src_set が false
permissions.default.image が 1

になっているか確認。

それでも駄目なら、別の端末で試してみる。設定に関して管理者に問い合わせる(社内 LAN?)。

12   名前: hige : 2007/02/08(木) 00:12  ID:PB1jwFIH sub-t1
匿名さん返信ありがとう御座います。

dom.disable_image_src_set

ture
になっていました。

設定を変えることにより問題を解決することができました。
長い間最後までご教授下さいましてありがとう御座います。
非常に助かりましたし、勉強にもなりました。

一覧へ戻る