ボタンのクリックで Image を切り替える

C# ASP.NET で ImageButton を使って、クリック操作で画像を切り替えます。

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

プログラムの説明

  1. ImageButton に貼り付けた画像をクリックするとポストバックが発生します。
    そこでクリックする度に、二枚の画像を交互に切り替えるプログラムを作成してみましょう。
  2. WebMatrix を起動して [ASP.NET ページ] のアイコンを選択して新しいページを作成します。
  3. 左側のツールボックスから [ImageButton] をドラッグ&ドロップして、デザインウインドウへ持って行って下さい。
    右下のプロパティウインドウから [ImageUrl] を選択して画像ファイルを設定します。
    ちょっと長いのですが、私のホームページから直接画像を参照しています。
    http://www.eonet.ne.jp/~maeda/img/cs.jpg
  4. [ImageButton1] をダブルクリックすると、ソースコードが表示されるので、次のコードを追加して下さい。
    cs.jpg と mm.jpg の二枚の画像を切り替えるコードです。
        void ImageButton1_Click(object sender, ImageClickEventArgs e)
        {   if (ImageButton1.ImageUrl == "http://www.eonet.ne.jp/~maeda/img/cs.jpg")
                ImageButton1.ImageUrl = "http://www.eonet.ne.jp/~maeda/img/mm.jpg";
            else    ImageButton1.ImageUrl = "http://www.eonet.ne.jp/~maeda/img/cs.jpg";
        }
        
  5. 下のタブを「すべて」に切り替えるとソースコードが表示されるので、名前を付けて保存して下さい。
  6. 保存したファイルを ASP.NET サーバーにアップロードして下さい。
    画像ファイルは、私のホームページから直接参照するのでアップロードの必要はありません。
  7. 画像をクリックして二枚の画像が切り替わることを確認して下さい。

ソースコードが表示されない場合は、ブラウザのメニューから「ソースの表示」を選択して下さい。
imgbtn.aspx のソースコード

残念ながら2007年末でサーバーのサービスが終わり、接続出来なくなっているので悪しからず。 (;_;)
imgbtn.aspx を呼び出す

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