ランダムな場所の画像を変える

どれが選択されるかわからない

ここをクリックすると誰かが旗を挙げます

マウスを離すと全員旗を下ろします。

bodyに次の様にidのついた画像とクリックする場所を用意します。

クリックする場所に onclick と onmouseout を書きます。

<p>
<img id="r1" src="images/redof.png" alt="" />
<img id="r2" src="images/redof.png" alt="" />
<img id="r3" src="images/redof.png" alt="" />
<img id="r4" src="images/redof.png" alt="" />
<img id="r5" src="images/redof.png" alt="" />
<img id="r6" src="images/redof.png" alt="" />
</p>
<p onclick="dorekaon()" onmouseout="minnaoff()">ここをクリックすると誰かが旗を挙げます</p>

scriptの部分に次の様に書きます。

function dorekaon(){
     var a = Math.random() * 6;             //変数aを0以上~6未満の数にする
     var rid="r" + (Math.floor( a ) +1 );   //aを使ってridの値を作る
     document.getElementById(rid).src = "images/redon.png";
}
function minnaoff(){
     document.getElementById("r1").src = "images/redof.png";
     document.getElementById("r2").src = "images/redof.png";
     document.getElementById("r3").src = "images/redof.png";
     document.getElementById("r4").src = "images/redof.png";
     document.getElementById("r5").src = "images/redof.png";
     document.getElementById("r6").src = "images/redof.png";
}

dorekaon() では Math.random()とMath.floor() を使って1~6の数字をランダムに出し、r1~r6のidを作って、その画像を替えています。

minnaoff() では全部旗を下げた画像に戻しています。

一度戻してから上げる

赤い旗ではすでに上げている人に旗を上げさせると何も動かないので、クリックに反応しない感じになります。そこで既に旗を上げているときは一度下ろしてから上げ直すように修正します。

ここをクリックすると誰かが旗を挙げます

scriptには次の用に書きます。みんな青い旗を下ろした図にするminnabluoff()は省略しましたが必要です。

var bid;
function darekaon(){
     var a = Math.random() * 6;
     bid="b" + (Math.floor( a ) +1 );
     document.getElementById(bid).src = "images/bluof.png";
     setTimeout("darekaon2()",100);
}
function darekaon2(){
     document.getElementById(bid).src = "images/bluon.png";
}

bidがランダムに決まると一度旗を下ろし、100ミリ秒つまり0.1秒まってからdarekaon2()を呼び出します。

darekaon2()は旗をあげるようにします。bidの値は複数の関数にまたがって参照されるのでfunctionの外で定義されています。

body部は赤い旗の時とほとんど同じです。idの値がbで始まるだけです。ついた画像とクリックする場所を用意します。

クリックする場所に onclick と onmouseout を書きます。

<p>
<img id="b1" src="images/bluof.png" alt="" />
<img id="b2" src="images/bluof.png" alt="" />
<img id="b3" src="images/bluof.png" alt="" />
<img id="b4" src="images/bluof.png" alt="" />
<img id="b5" src="images/bluof.png" alt="" />
<img id="b6" src="images/bluof.png" alt="" />
</p>
<p onclick="darekaon()" onmouseout="minnabluoff()">ここをクリックすると誰かが旗を挙げます</p>

課題 ファイル名 rand.html

Math.random()を使って画像を切り替えるページをつくりなさい。とりあえずここで使用した画像を使ってもよいが、うまくいったら、自分の画像と入れ替えること。画像の大きさは任意でよいが、同じ大きさのほうがよい。

最終的には必ず自作の画像にすること。

index.htmlからは「ランダム」という名前のリンクから行けるようにすること。


ウェブページ(Nov.2010)
聖愛中学高等学校
http://www.seiai.ed.jp/
Mar.2009 改訂