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 컨트롤을 사용하여 HTML <input type=image> 요소를 프로그래밍할 수 있습니다. 이 컨트롤을 HtmlInputText, HtmlTextArea 및 기타 컨트롤과 함께 사용하여 사용자 입력 폼을 만들 수 있습니다. 이 컨트롤은 서버에서 실행되는 <input type=image> 요소이므로 HTML과 동일한 단추 사용자 지정 기능을 제공합니다. 또한 이 컨트롤은 DHTML(동적 HTML) 및 HtmlButton 컨트롤을 지원하지 않는 브라우저를 위해 다른 기능을 제공합니다.
참고
이 컨트롤에는 닫는 태그를 사용하지 않아도 됩니다.
웹 컨트롤과 비교했을 때, HTML 컨트롤의 장점은 서버 코드와 클라이언트 코드 자체가 서로 충돌하지 않는 한 서버측 이벤트와 클라이언트측 이벤트가 충돌하지 않는다는 것입니다. 이런 경우 DHTML 이벤트를 사용하면 Web Forms 페이지에 포함하는 이미지의 모양을 수정할 수 있습니다.
예제
다음 예제에서는 정적 이미지 단추 컨트롤을 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>