Creating Image Controls

Image controls are very simple—they just display an image in a Web page. You can see this at work in the Images example on the CD-ROM, as discussed in the In Depth section of this chapter, and as shown in Figure 17.1. To associate an image with an Image control, you just assign the image's URL to the Image control's ImageUrl property. (You can browse to the image you want to use by clicking this property in the Properties window at design time. If the image file is local to the project, you just set the ImageUrl property to the name of the image file.) You also can set the image's width and height with the Width and Height properties.

Here's WebForm1.aspx from the Images example:

<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="WebForm1.aspx.vb" Inherits="Images.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <title>Images example</title>
    <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
    <meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema
        content="http://schemas.microsoft.com/intellisense/ie5">
  </HEAD>
  <body MS_POSITIONING="GridLayout">

    <form id="Form1" method="post" runat="server">
<asp:Image id=Image1 style="Z-INDEX: 101; LEFT: 107px; POSITION:
absolute; TOP: 73px" runat="server" Width="300px" Height="150px"
ImageUrl="file:///C:\inetpub\wwwroot\images\Image.jpg"></asp:Image>

    </form>
  </body>
</HTML>

Here's the HTML generated for the HTML <img> element that actually displays the image in the Images example (the image file I'm using is called Image.jpg):

<img id="Image1" src="Image.jpg" border="0" style=
"height:150px;width:300px;Z-INDEX: 101; LEFT: 107px;
POSITION: absolute; TOP: 73px" />

Tip

Image controls only display images. If you want to work with Click events and images, use an image button control instead, coming up next.