Displaying Images


The ASP.NET framework includes two controls for displaying images: the Image and ImageMap controls. The Image control simply displays an image. The ImageMap control enables you to create a client-side, clickable, image map.

Using the Image Control

The page in Listing 2.26 randomly displays one of three images. The image is displayed by setting the ImageUrl property of the Image control contained in the body of the page.

Listing 2.26. ShowImage.aspx

[View full width]

<%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server">     Sub Page_Load()         Dim rnd As New Random()         Select Case rnd.Next(3)             Case 0                 imgRandom.ImageUrl = "Picture1.gif"                 imgRandom.AlternateText = "Picture 1"             Case 1                 imgRandom.ImageUrl = "Picture2.gif"                 imgRandom.AlternateText = "Picture 2"             Case 2                 imgRandom.ImageUrl = "Picture3.gif"                 imgRandom.AlternateText = "Picture 3"         End Select     End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head  runat="server">     <title>Show Image</title> </head> <body>     <form  runat="server">     <div>     <asp:Image                  Runat="server" />     </div>     </form> </body> </html> 

The Image control supports the following properties (this is not a complete list):

  • AlternateText Enables you to provide alternate text for the image (required for accessibility).

  • DescriptionUrl Enables you to provide a link to a page that contains a detailed description of the image (required to make a complex image accessible).

  • GenerateEmptyAlternateText Enables you to set the AlternateText property to an empty string.

  • ImageAlign Enables you to align the image relative to other HTML elements in the page. Possible values are AbsBottom, AbsMiddle, Baseline, Bottom, Left, Middle, NotSet, Right, TextTop, and Top.

  • ImageUrl Enables you to specify the URL to the image.

The Image control supports three methods for supplying alternate text. If an image represents page content, then you should supply a value for the AlternateText property. For example, if you have an image for your company's logo, then you should assign the text "My Company Logo" to the AlternateText property.

If an Image control represents something really complexsuch as a bar chart, pie graph, or company organizational chartthen you should supply a value for the DescriptionUrl property. The DescriptionUrl property links to a page that contains a long textual description of the image.

Finally, if the image is used purely for decoration (it expresses no content), then you should set the GenerateEmptyAlternateText property to the value TRue. When this property has the value TRue, then an alt="" attribute is included in the rendered <img> tag. Screen readers know to ignore images with empty alt attributes.

Using the ImageMap Control

The ImageMap control enables you to create a client-side image map. An image map displays an image. When you click different areas of the image, things happen.

For example, you can use an image map as a fancy navigation bar. In that case, clicking different areas of the image map navigates to different pages in your website.

You also can use an image map as an input mechanism. For example, you can click different product images to add a particular product to a shopping cart.

An ImageMap control is composed out of instances of the HotSpot class. A HotSpot defines the clickable regions in an image map. The ASP.NET framework ships with three HotSpot classes:

  • CircleHotSpot Enables you to define a circular region in an image map.

  • PolygonHotSpot Enables you to define an irregularly shaped region in an image map.

  • RectangleHotSpot Enables you to define a rectangular region in an image map.

The page in Listing 2.27 contains a navigation bar created with an ImageMap control. The ImageMap contains three RectangleHotSpots that delimit the three buttons displayed by the navigation bar (see Figure 2.16).

Figure 2.16. Navigating with an ImageMap control.


Listing 2.27. ImageMapNavigate.aspx

[View full width]

<%@ Page Language="VB" %> <!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  runat="server">     <title>ImageMap Navigate</title> </head> <body>     <form  runat="server">     <div>     <asp:ImageMap                  ImageUrl="ImageBar.jpg"         Runat="server">         <asp:RectangleHotSpot             NavigateUrl="Home.aspx"             Left="0"             Top="0"             Right="100"             Bottom="50"             AlternateText="Navigate to Home" />         <asp:RectangleHotSpot             NavigateUrl="Products.aspx"             Left="100"             Top="0"             Right="200"             Bottom="50"             AlternateText="Navigate to Products" />         <asp:RectangleHotSpot             NavigateUrl="Services.aspx"             Left="200"             Top="0"             Right="300"             Bottom="50"             AlternateText="Navigate to Services" />     </asp:ImageMap>     </div>     </form> </body> </html> 

Each RectangleHotSpot includes Left, Top, Right, and Bottom properties that describe the area of the rectangle. Each RectangleHotSpot also includes a NavigateUrl property that contains the URL to which the region of the image map links.

Rather than use an image map to link to different pages, you can use it to post back to the same page. For example, the page in Listing 2.28 uses an ImageMap control to display a menu. When you click different menu items represented by different regions of the image map, the text contained in the TextBox control is changed (see Figure 2.17).

Figure 2.17. Posting back to the server with an ImageMap control.


Listing 2.28. ImageMapPostBack.aspx

[View full width]

<%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR /xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server">     Sub mapMenu_Click(ByVal sender As Object, ByVal e As ImageMapEventArgs)         Select Case e.PostBackValue             Case "ToUpper"                 txtText.Text = txtText.Text.ToUpper()             Case "ToLower"                 txtText.Text = txtText.Text.ToLower()             Case "Erase"                 txtText.Text = String.Empty         End Select     End Sub </script> <html xmlns="http://www.w3.org/1999/xhtml" > <head  runat="server">     <title>ImageMap PostBack</title> </head> <body>     <form  runat="server">     <div>     <asp:ImageMap                  ImageUrl="MenuBar.gif"         HotSpotMode="PostBack"         Runat="server" OnClick="mapMenu_Click">         <asp:RectangleHotSpot             PostBackValue="ToUpper"             Left="0"             Top="0"             Right="100"             Bottom="30"             AlternateText="To Uppercase" />         <asp:RectangleHotSpot             PostBackValue="ToLower"             Left="100"             Top="0"             Right="200"             Bottom="30"             AlternateText="To Uppercase" />         <asp:RectangleHotSpot             PostBackValue="Erase"             Left="200"             Top="0"             Right="300"             Bottom="30"             AlternateText="To Uppercase" />     </asp:ImageMap>     <br />     <asp:TextBox                  TextMode="MultiLine"         Columns="40"         Rows="5"         Runat="server" />     </div>     </form> </body> </html> 

Notice that the ImageMap control has its HotSpotMode property set to the value PostBack. Also, the ImageMap is wired to a Click event handler named mapMenu_Click.

Each HotSpot contained in the ImageMap control has a PostBackValue property. The mapMenu_Click handler reads the PostBackValue from the region clicked and modifies the text displayed by the TextBox control.

The ImageMap control supports the following properties (this is not a complete list):

  • AccessKey Enables you to specify a key that navigates to the ImageMap control.

  • AlternateText Enables you to provide alternate text for the image (required for accessibility).

  • DescriptionUrl Enables you to provide a link to a page which contains a detailed description of the image (required to make a complex image accessible).

  • GenerateEmptyAlternateText Enables you to set the AlternateText property to an empty string.

  • HotSpotMode Enables you to specify the behavior of the image map when you click a region. Possible values are Inactive, Navigate, NotSet, and PostBack.

  • HotSpots Enables you to retrieve the collection of HotSpots contained in the ImageMap control.

  • ImageAlign Enables you to align the image map with other HTML elements in the page. Possible values are AbsBottom, AbsMiddle, Baseline, Bottom, Left, Middle, NotSet, Right, TextTop, and Top.

  • ImageUrl Enables you to specify the URL to the image.

  • TabIndex Enables you to specify the tab order of the ImageMap control.

  • Target Enables you to open a page in a new window.

The ImageMap control also supports the following method:

  • Focus Enables you to set the initial form focus to the ImageMap control.

Finally, the ImageMap control supports the following event:

  • Click Raised when you click a region of the ImageMap and the HotSpotMode property is set to the value PostBack.




ASP. NET 2.0 Unleashed
ASP.NET 2.0 Unleashed
ISBN: 0672328232
EAN: 2147483647
Year: 2006
Pages: 276

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net