Image Rand



乱数で石の数を設定して描画します。
サーバーにアップロードした PHP を呼び出すコードです。
<a href="http://maedakobe.rw.xsi.jp/php/imgrand.php">Image Rand</a>
次のリンクをクリックすると imgrand.php が呼び出されます。

実行する毎に石の数が変わるのを確かめて下さい。
Image Rand
石を5個ずつ縦に並べてみます。
縦に並べる
マウスを重ねると色が変わります。
重ねると色が変わる

PHP プログラムの説明

  1. 乱数で石の数を5個~10個に設定して描画します。
    PHP の変数名は $ で始めます。
    変数に型は無く、文字でも数値でも格納できます。
    imgrand.php のソースコードを Shift-JIS でタイプして C:\DATA\PHP\ に格納して下さい。
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=shift_jis">
    <title>Image Rand</title>
    </head>
    <body>
    <h2>乱数で石の数を決める</h2>
    <?php
        $n= rand(5,10);
        for($i=0; $i<$n; $i++)
        {   print "<IMG SRC=\"img/stone.gif\">\r\n";
        }
    ?>
    </body>
    </html>
    
  2. C:\BIN\php\php.exe にパスを通して作業します。
    imgrand.php のソースプログラムが吐き出したソースコードです。
    今回は乱数の値が「5」に設定されています。
    C:\Windows\System32>cd C:\DATA\PHP
    C:\DATA\PHP>php imgrand.php
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=shift_jis">
    <title>Image Rand</title>
    </head>
    <body>
    <h2>乱数で石の数を決める</h2>
    <IMG SRC="img/stone.gif">
    <IMG SRC="img/stone.gif">
    <IMG SRC="img/stone.gif">
    <IMG SRC="img/stone.gif">
    <IMG SRC="img/stone.gif">
    </body>
    </html>
    
    C:\DATA\PHP>
    
  3. imgrand.php をサーバーにアップロードします。
    PHP のファイルは Shift-JIS でタイプして下さい。
    imgrand.php が吐き出した文字列がブラウザに渡されてページが表示されます。

縦に並べる

  1. 乱数で石を5個~15個設定して、5個ずつ縦に並べてみます。
    imgrandv.php のソースコードを Shift-JIS でタイプしてアップロードして下さい。
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=shift_jis">
    <title>Image Rand</title>
    </head>
    <body>
    <h2>乱数で石の数を決める</h2>
    <?php
        $n= rand(5,15);
        for($i=0; $i<$n; $i++)
        {   $xp= floor($i/5)*80+40;
            $yp= 250-($i%5)*50;
            print("<img src=\"img/jewel.gif\" style=\"position:absolute;left:$xp"."px;top:$yp"."px;\">");
        }
    ?>
    </body>
    </html>
    
  2. 石の画像を縦方向に並べて表示してみました。
    floor() は少数点以下を切り捨てる関数です。
    img タグに style= で座標を指定して描画します。
    "." は PHP の文字列を連結する演算子です。
  3. PHP のプログラムが正常に実行できるか否かは「サーバー側の問題」ですが、この形式の IMG タグが使えるか使えないかはホームページを表示する「ブラウザの問題」です。

重ねると色が変わる

  1. マウスを重ねると石の画像が変わります。
    imgrand2.php のソースコードを Shift-JIS でタイプしてアップロードして下さい。
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=shift_jis">
    <title>Image Rand</title>
    </head>
    <body>
    <h2>重ねると色が変わる</h2>
    <?php
        $n= rand(5,10);
        for($i=0; $i<$n; $i++)
        {   print"<img src=\"img/jewel.gif\" onMouseover=\"this.src='img/jewel2.gif'\" onMouseout=\"this.src='img/jewel.gif'\">"; 
        }
    ?>
    </body>
    </html>
    
  2. 2枚の画像を使って、マウスを重ねると石の色を変えます。
    img src= が元の画像で、onMouseover= がマウスが重なったときの画像で、onMouseout= でマウスが離れたときの画像です。
  3. この機能もサーバーには関係なく、クライアント側でブラウザが実行します。

前田稔の超初心者のプログラム入門
PHP Program