プロが教えるわが家の防犯対策術！

Imageオブジェクトを使って赤か白かを判定

解決済

  • 質問者：noname#77475
  • 質問日時：
  • 回答数：1件

Imageオブジェクトがどんなものかよくわからずにソースを書いていますが、

<html>
<head>
<script type="text/javascript">
<!--
function Color(obj)
{
if (obj.style.backgroundColor == 'red')
obj.style.backgroundColor = 'white';
else
obj.style.backgroundColor = 'red';
}
// -->
</script>

</head>

<body>

<a href="javascript:Color(document.outlet1)">
<img src="co.png" alt="outlet1" id="outlet1"/></a>
<a href="javascript:Color(document.outlet2)">
<img src="co.png" alt="outlet2" id="outlet2"/></a>

<form action="judge.cgi" method="get">
<input type="submit" value="設定" />
</form>
</body>
</html>

画像にリンクを貼り、クリックするたびに赤と白が交互になるように設定しています。

目的は背景画像を選択してsubmitを押した後、judge.cgiに移動します。
そのときにURLにhttp://IPアドレス?outlet1=red&outlet2=whiteなどという風に表示したいのです。
JavaScriptのimages配列を使えば出来ると聞いたのですが使い方がよくわかっていません。
どなたかご存じないでしょうか？ぜひ回答のほうお待ちしております。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (1件)

No.1ベストアンサー

  • 回答者： tamaCo
  • 回答日時：

こんにちは。


残念ながら、Imageオブジェクトってそういう事をするためのものじゃないです。
＃画像の幅とか表示余白とかを設定するためのオブジェクトです。
http://www.tohoho-web.com/js/image.htm
下位オブジェクトに「backgroundColor」などありません。
またブラウザが「この画像は赤い」などと判断する事も出来ません。
1677万色表示可能なJPEG画像はどうしたらいいのでしょう。

こんな方法ではどうですか？赤白それぞれの画像を用意してください。
＃インデントのため全角スペース入れてます。コピペでは動きません。

<html>
<head>
<script type="text/javascript">
<!--
　function setColor(i){
　　with(document.frm){
　　　val = eval("outlet"+i).value;
　　　if(val == "white")
　　　　val = "red";
　　　else
　　　　val = "white";
　　　eval("img"+i).src = val + ".png";
　　　eval("outlet"+i).value = val;
　　}
　}
// -->
</script>
</head>
<body>
<form name="frm" action="judge.cgi" method="get">
<a href="javascript:setColor('1');"><img name="img1" src="red.png" alt="outlet1"></a>
<a href="javascript:setColor('2');"><img name="img2" src="white.png" alt="outlet2"></a>

<input type="hidden" name="outlet1" value="red">
<input type="hidden" name="outlet2" value="white">
<input type="submit" value="設定">
</form>
</body>
</html>

hiddenに「outlet」の値を入れればsubmit時に期待の表示をするはず。
↑ここがミソです。eval関数、覚えておくと便利ですよ。
解決するとよいのですが。
    • good
    • 0
    • 件
通報する
この回答へのお礼

eval関数・・・。
まだまだ勉強不足です。
覚えておいて次に生かしたいと思います。
おかげで解決しました。
ずーっとImageオブジェクトのことだけしか頭に無くて、
別の考えが思いつきませんでした。
tamaCoさんありがとうございます。

通報する
お礼日時：2006/11/30 13:10

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報