ランダムに画像を出す

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

クリックするごとに img1,img2,img3 のうちどれかの画像がランダムに出ます

例によって元の絵を body の中に img タグで貼り付けます。そこにはやはり、id="area1" と名前を付けます。この名前は任意ですがページ内で同じ名前があってはいけません。

今回はこの画像を直接クリックすることにするので、imgタグの中に onclick= を書いています。

<p>
<img src="images/img0.png" alt="ここをクリック" id="area1" onclick="doreka()">
</p>

doreka() という関数を script タグの中で次のように定義します。

function doreka(){
     var a = Math.random() * 3;
     var n = Math.floor( a ) +1;
     var koreni = "images/img"+n+".png";
     document.getElementById("area1").src = koreni;
}

a や n は変数とよばれるものです。変数は値を記憶するために使用します。変数が最初に出てくる所では var を書いて続く文字列が変数の名前であることを宣言します。これは省略する事も可能ですが多少意味が異なる場合があります。

ここで使った変数の意味

a

random()で求めた、0以上、1未満の実数（小数以下を持つ数）を3倍した数

n

aの少数点以下を切り捨てして1を加えた数。1以上、3まで

koreni

nを使って、作った画像ファイル名にフォルダ名をつけたもの

ポイントはMath.random()とMath.floor

Math.random()

0以上、1未満の実数（小数以下を持つ数）

Math.random() * 100

0以上、100未満の実数（小数以下を持つ数）

Math.floor(Math.random() * 100)

0以上、99以下の整数（99を含む）

Math.floor(Math.random() * 100) + 1

1以上、100以下の整数（100を含む）

これで0以上から100未満の整数の乱数ができる。100のところに、作りたい乱数の最大値を入れると、それを上限とする乱数ができる。

Math.floor(Math.random() * 3) + 1

1以上、3以下の整数（3を含む）

Math.floor(Math.random() * 6) + 1

1以上、6以下の整数（6を含む）

Math.floor(Math.random() *4) + 9

9以上、12以下の整数（12を含む）

9から始まって４とおり(9,10,11,12)

時間がたつと元の「Click!」の画像に戻るように改良

上記のプログラムのままでも何度でもクリックできますが、時間がたつと元の「Click!」の画像にもどる方がわかりやすいでしょう。

var dekiru = true;
function dorekaon(){
   if (dekiru == true){
     dekiru = false;
     var a = Math.random() * 3;
     var n = Math.floor( a ) +1;
     var koreni = "images/img"+n+".png";
     document.getElementById("area2").src = koreni;
     setTimeout("modosu()",2000);
   }
}
function modosu(){
     document.getElementById("area2").src = "images/img0.png";
     dekiru = true;
}

dorekaon()はランダムな画像にしたあとに、2秒待ってmodosu()を呼び出します。modosu()は元の img0.png という画像にします。

dekiruという変数は待っている2秒の間にクリックされると画像が変化してしまうので、それを無効にするためのものです。functionの外の命令はファイルが読み込まれると同時に実行されます。初めは「クリックできる」状態にしておく必要があるのでfunctionの外に var dekiru = true; を書きます。

クリックされるとクリックできる状態かどうかをチェックしてできれば早々に「クリックできない」(dekiru = false;)としておきます。

modosu()が実行されたら「クリックできる」(dekiru = true;)にもどします。

「クリックできない」状態の時はクリックしてもなにもしません。

一般的なDOMを使って

htmlだけでなく上位のxmlに使えるやり方があります。一般のjavascriptよりもブラウザによる差が少ない方法です。しかし、一部IEでは使えない場合もあります。検証が十分でないので、参考までに掲載します。

旗が上がっていると画像が出ますが、旗をクリックして旗を下げると画像が出なくなるように仕組んであります。
ただし、サーバーを介さずローカルのファイルで動かすと画像も変わらなくなるようです。(メモリ上のhtmlデータは書換えはされています。画面が書き換えられていません。Firefoxの不具合かもしれません)

bodyの中に書く部分は上記と同じです。

<img src="images/img1.png" alt="ここをクリックする" id="area3">

javascript部分は、画像の切り替え部分はクリックで切替で説明したものとほぼ同じです。"images/img1.png" などとなっている所が koreni という変数にかわっているだけです。

もっとも違っているのは、.setAttribute("src",koreni); の他に .setAttribute("alt",n+"です") が加わっている所です。元の img タグの中の src="images/img0.png" だけではなく、alt="ここをクリックする" も替えてしまおうということです。

var domdekiru = true;
function domdorekaon(){
    if (domdekiru == true){
        domdekiru = false;
        var a = Math.random() * 3;
        var n = Math.floor( a ) +1;
        var koreni = "images/img"+n+".png";
        document.getElementById("area3").setAttribute("src",koreni);
        document.getElementById("area3").setAttribute("alt",n+"です");
        setTimeout("dommodosu()",2000);
    }
}
function dommodosu(){
    document.getElementById("area3").setAttribute("src","images/img0.png");
    document.getElementById("area3").setAttribute("alt","ここをクリックする");
    domdekiru = true;
}

alt は何らかの理由で画像が表示できないとき、またはページの読み上げソフトが音声にするときに使用するものです。画像を替えても alt がそのままだと画像が表示できないと画面が変化しません。その対策です。

Firefox は W3C の取り決めに忠実なので マウスを重ねても alt を表示しません。(このような目的には正式には title="なんとか" を使います。IEでは alt= の部分を表示します) そこで、擬似的に画像が表示されない状態を作れるようにしました。赤い旗をクリックして旗を下ろしてからクリックすると画像でなく文字で表示されます。