2種のイベント条件で画像を切り替えたい

質問

はじめまして。
JavaScriptを含め素人です。
2つの条件でWeb上の画像の切り替えたいのですが、良い方法を教えてください。
参考になる資料から、ボタンクリック、ラジオボタンクリック、画像クリックで画像を切り替える方法は、一通りテストしてみました。
2種のイベントからその最近の２種のイベントの条件（組み合わせで）で希望する画像に切り替え表示したいのですが、どのようにしたらできるのか分かりません。
例えば
上部の赤、金、銀の画像（またはラジオボタンと画像）を配置し
下部に、赤、金、銀の画像（またはラジオボタンと画像）を配置し、
初期の切り替え表示したいターゲット画像を赤、赤の組合せ画像とし
上部の　金が押されたら、金赤の組合せ画像
下部の銀が押されたら、金銀の組合せ画像
下部の金が押されたら金金の組合せ画像を表示したいのです。
組合せ画像はWeb上で組み合わせるのではなく実際の一枚の画像です。
添付ソースでは<IMG id=target3 alt=テスト画像3 src="../media/11.jpg" >の部分がターゲットの画像にとなります。（画像配置の参考として下さい）
画像の名前を合成すれば良いのか、画像アレイの番号を指定すれば良いのかなど、試してみましたが、撃沈です。
アドバイスよろしくお願いいたします。

回答No.4

noname#84373

だから^^;
if (e.tagName == 'IMG') chg(ue = e.id);

お礼

丁寧に教えていただき、ありがとうございました。
大変参考になりました。
私が勉強不足というか、奥が深いというか？
ガンバリます。

回答No.3

noname#84373

//@cc_on でIEの動作だけに一工夫できるようになります
詳しくは
http://msdn.microsoft.com/ja-jp/library/eb0w91wa(VS.80).aspx

たとえば、
/*@if(@_jscript) alert("IE"); @else@*/ alert("それ以外") /*@end@*/;

これでIEとそれ以外のブラウザを分けられるみたい。

なぜattachEventとかaddEventListenerを使うかだけど
document.getElementById('a').onclick = function () {alert("a");};
document.getElementById('a').onclick = function () {alert("b");};
document.getElementById('a').onclick = function () {alert("c");};

だと、上書きされて最後のｃしか実行されない
他との兼ね合いで勝手に上書きされても動くようにするため

もうひとつ。

#2で説明した
var e = evt ? evt.target : event.srcElement;
のevent.srcElementのeventだけど、クリックされた時の
イベントだと思うかもしれないけど、必ずそのときの
イベントだという保証がないらしい。（そのときの最新のイベントと解釈）
ところが、イベントを追加する方法だと、第１引数にはその時の
イベントがコピーされるらいしい。つまりこっちが確実。

回答No.2

noname#84373

昔ならこんな感じで書いてた。
<script type="text/javascript">

var ue = 'a';
var sita = 'd';

document.getElementById('uenodan').onclick = function (evt) {
var e = evt ? evt.target : event.srcElement;
ue = e.id;
chg();
}

document.getElementById('sitanodan').onclick = function (evt) {
var e = evt ? evt.target : event.srcElement;
sita = e.id;
chg();
}

function chg() {
var s = ue + sita + '.jpg';
document.getElementById('kekka').src = s;
document.getElementById('kekka').alt = s;
}

</script>

説明がへたっぴなので、比較して比べてください。

でも、自分のコードにミス発見。
if (e.tagName == 'IMG') chg(ue = e.id);
のようにするべきかな？

お礼

比較できるスクリプト、ありがとうございます。
どちらも動作確認し、これから、コードの意味を
調べていきます。

一点どちらのコードも
uedan, shitadan の画像の行で、画像以外の
部分をクリックすると　<div id="xxxxxx">のidの値
"uedan", "shitadan"が画像変更の値として挿入されてしまいます。
この場合クリックしたときのid値をチェックして置き換えるかどうか
判断すべきなのでしょうか。

お手数をかけすいませんが、よろしくお願いいたします。
重ねて、ありがとうございます。

回答No.1

noname#84373

<div id="uenodan">
<img src="ue_kin.jpg" width="120" height="120" alt="金" id="a">
<img src="ue_gin.jpg" width="120" height="120" alt="銀" id="b">
<img src="ue_dou.jpg" width="120" height="120" alt="銅" id="c">
</div>

<div id="sitanodan">
<img src="sita_kin.jpg" width="120" height="120" alt="金" id="d">
<img src="sita_gin.jpg" width="120" height="120" alt="銀" id="e">
<img src="sita_dou.jpg" width="120" height="120" alt="銅" id="f">
</div>

<div>
<img src="ad.jpg" alt="ad" width="360" height="120" id="kekka">
</div>

<script type="text/javascript">
//@cc_on
var ue = 'a';
var sita = 'd';

document.getElementById('uenodan')./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function(evt){
chg(ue = (evt./*@if(@_jscript) srcElement @else@*/ target /*@end@*/).id);
}, false);
document.getElementById('sitanodan')./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function(evt){
chg(sita = (evt./*@if(@_jscript) srcElement @else@*/ target /*@end@*/).id);
}, false);
function chg() {
var s = ue + sita + '.jpg';
with (document.getElementById('kekka')) src = s, alt = s;
}
</script>

お礼

早速、ご回答ありがとうございます。
動作確認できました。

ただ、JavaScript素人のため、スクリプトが
難解のところ多数です。
これから、不明点など勉強させてもらいますが、以下の
スクリプトの説明をしたいただけたら嬉しいです。
document.getElementById('uenodan')./*@if(1)attachEvent('on'+ @else@*/addEventListener(/*@end@*/'click', function(evt){
chg(ue = (evt./*@if(@_jscript) srcElement @else@*/ target /*@end@*/).id);
}, false);

お手数ですがよろしくお願いいたします。
ありがとうございました。