HtmlInputImage サーバー コントロール宣言構文
[このドキュメントはプレビューのみを目的としており、以降のリリースで変更される可能性があります。プレースホルダーとして空白のトピックが含まれています。]
<input type=image> HTML 要素に割り当てるサーバー側のコントロールを作成し、イメージが表示されるボタンを作成できるようにします。
<input
Type="Image"
EnableViewState="False|True"
Id="string"
Visible="False|True"
OnDataBinding="OnDataBinding event handler"
OnDisposed="OnDisposed event handler"
OnInit="OnInit event handler"
OnLoad="OnLoad event handler"
OnPreRender="OnPreRender event handler"
OnServerClick="OnServerClick event handler"
OnUnload="OnUnload event handler"
runat="server"
/>
解説
HtmlInputImage コントロールを使用して、<input type=image> HTML 要素をプログラムで制御します。 このコントロールを HtmlInputText や HtmlTextArea などのコントロールと組み合わせて使用して、ユーザー入力フォームを構築できます。 このコントロールは、サーバーで実行される <input type=image> 要素であるため、HTML と同じようにボタンのカスタマイズができます。 このコントロールは、ダイナミック HTML (DHTML) と HtmlButton コントロールをサポートしないブラウザーのために使用できます。
注意
このコントロールには、終了タグは必要ありません。
Web コントロールよりも優れた HTML コントロールの利点の 1 つは、サーバーとクライアントのコードそのものが衝突する場合を除き、サーバー側のイベントがクライアントで発生するイベントと衝突しない点です。 たとえば、動的 HTML (DHTML) イベントを使用して Web フォーム ページに含まれているイメージの外観を変更できます。
使用例
静的なイメージ ボタン コントロールと DHTML onMouseOver イベント (バナナのイメージを表示) および onMouseOut イベント (元のマンゴーのイメージを表示) を使用するイメージ ボタン コントロールを比較する例を示します。 どちらのイメージ ボタンにも OnServerClick イベント ハンドラーが含まれています。
<%@ Page Language="VB" AutoEventWireup="True" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>HtmlInputImage Control</title>
<script runat="server">
Sub Button1_Click(Source As Object, e As ImageClickEventArgs)
Span1.InnerHtml = "You clicked button1"
End Sub
Sub Button2_Click(Source As Object, e As ImageClickEventArgs)
Span1.InnerHtml = "You clicked button2"
End Sub
</script>
</head>
<body>
<h3>HtmlInputImage Sample</h3>
<form id="Form1" runat="server">
<input type="image"
id="InputImage1"
src="/images/mango.jpg"
onserverclick="Button1_Click"
runat="server" />
<br />
<input type="image"
id="InputImage2"
src="/images/mango.jpg"
onmouseover="this.src='/images/banana.jpg';"
onmouseout="this.src='/images/mango.jpg';"
onserverclick="Button2_Click"
runat="server" />
With rollover effect (HTML 4.0)
<br />
<span id="Span1" runat="server" />
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="True" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>HtmlInputImage Control</title>
<script runat="server">
void Button1_Click(object Source, ImageClickEventArgs e)
{
Span1.InnerHtml="You clicked button1";
}
void Button2_Click(object Source, ImageClickEventArgs e)
{
Span1.InnerHtml="You clicked button2";
}
</script>
</head>
<body>
<h3>HtmlInputImage Sample</h3>
<form id="Form1" runat="server">
<input type="image"
id="InputImage1"
src="/images/mango.jpg"
onserverclick="Button1_Click"
runat="server" />
<br />
<input type="image"
id="InputImage2"
src="/images/mango.jpg"
onmouseover="this.src='/images/banana.jpg';"
onmouseout="this.src='/images/mango.jpg';"
onserverclick="Button2_Click"
runat="server" />
With rollover effect (HTML 4.0)
<br />
<span id="Span1" runat="server" />
</form>
</body>
</html>