画像を縦に並べて表示

C# ASP.NET で img の style を使って、1〜15個の画像を縦に並べて表示します。
style オプションが使えるか否かはサーバーには関係なく、使用するブラウザの問題です。

前田稔(Maeda Minoru)の超初心者のプログラム入門

プログラムの説明

  1. WebMatrix を起動して [ASP.NET ページ] から新しいページを作成します。
  2. デザイン画面に直接 "乱数で1〜15個の石を表示します" とタイプして下さい。
  3. 乱数で画像の数を決めて表示する [Button] をドラッグ&ドロップして下さい。
  4. [Button1] をダブルクリックして、ソースコードをタイプして下さい。
    style オプションで画像の座標(left, top)を設定します。
    xp, yp は int 型なので String に変換して指定しています。
        void Button1_Click(object sender, EventArgs e)
        {
            Random  rand = new Random();
            String  str;
            int     i,j,xp,yp;
        
            str = "";
            j= rand.Next(15)+1;
            for(i=0; i<j; i++)
            {   xp= (i/5)*80+100;
                yp= 400-(i%5)*50;
                str = str + "<IMG SRC=\"../image/jewel.gif\" style=\"position:absolute;left=" +
                            Convert.ToString(xp) + ";top=" + Convert.ToString(yp) + "\">";
            }
            Label1.Text= str;
        }
        
  5. 次に img タグを格納する [Label] をドラッグ&ドロップして下さい。
  6. ソースコードに名前を付けて保存して、ASP.NET サーバーにアップロードして下さい。
  7. ブラウザから呼び出して、ボタンをクリックして下さい。
    クリックするごとに乱数で画像の個数を設定して、縦に並べて表示します。

imgvertical.aspx のソースコード

imgvertical.aspx を呼び出す

超初心者のプログラム入門(C# on-line game)