条件分岐で違う画像を表示。

質問

javascriptで簡単なYES,NOゲームを作りました。
ウィンドウの同じ場所に、それぞれの結果によって違う画像を表示したいと思っています。

今現在
↓
<script language="javascript">
if(confirm("xxx？"))
{if(confirm("xxx？"))
{if(confirm("xxx？"))
{ alert("111") }
else alert("222") }
else alert("333") }
else alert("444")
</script>

こうしたい
↓
if(confirm("xxx？"))
{if(confirm("xxx？"))
{ if(confirm("xxx？"))
{ alert("111"); ■の場所に1.jpgの画像を表示; }
else alert("222"); ■の場所に2.jpgの画像を表示; }
else alert("333"); ■の場所に3.jpgの画像を表示; }
else alert("444"); ■の場所に4.jpgの画像を表示;
</script>

■ここに画像を表示■

『■ここに…』のところに名前を付けて、『■の場所に…』と言うところで、その名前の場所に画像を読み込むようにすればいいのだと思ったのですが、知識が少ない為どうもうまくいきません。

どうか、宜しくお願い致します。

回答No.2

noname#23734

>『■ここに…』のところに名前を付けて
<div id="name"></div>
↓で上のタグを「ここ」とすることができます。
document.getElementById('name')<----DOMと呼ぶらしい便利なもの
document.all('name')<-----IEだけ「ここ」と解る方法
のように「ここに」とブラウザに教える方法もいろいろ有ります。
調べてみてください。

「ここに」の中の○番目のimg要素
「ここに」.getElementsByTagName('img')[○]

ドキュメントの中の○番目のimg要素
document.images[○]<----画像オブジェクトと呼ぶらしい。

ドキュメントの中の△と名前がつけられた要素
document.△<-----なんだかよくわかりません。

ドキュメントの中の○番目のimg要素のsrcの参照/設定
document.images[○].src<-----srcプロパティと呼ぶらしい。
document.images[○].src=URL

DOMの属性用メソッド？らしい。
document.getElementsByTagName('img')[○].getAttribute('src')
document.getElementsByTagName('img')[○].setAttribute('src',URL)

画像関係は、他にもいろいろありますので調べて見てください。
「画像」「変更」「javascript」「src」「DOM」
このキーワードの組み合わせで結構面白いものが引っ掛かってきます。

回答No.1

noname#39970

<script><!--
// ----------
// ・・・・・略
document.getElementByID("im_01").setAttribute("src","1.jpg");
// ・・・・・略
// ----------
//--></script>

<img src="0.jpg" id="im_01">