Images are an important aspect of most web sites. ASP.NET provides several ASP.NET server controls for displaying images. Two of them, the Image and the ImageMap controls, are covered in this section. The AdRotator control will be covered in the next chapter.
The Image control has limited functionality: it is used for displaying an image on a web page or, alternatively, displaying some text if the image is unavailable. It raises no events for user interaction, other than those inherited from Control, such as Init and Load. If you need to have button functionality (i.e., to capture mouse clicks), you should use the ImageButton control, described earlier in this chapter.
In addition to the properties inherited from the WebControl class, the Image control has the properties shown in Table 4-18.
Table 4-18. Properties of the Image control
|
Name |
Type |
Get |
Set |
Values |
Description |
|---|---|---|---|---|---|
|
|
String |
x |
x |
The text displayed in the control if the image is unavailable. In browsers that support the ToolTips feature, this text is also displayed as a ToolTip. | |
|
|
ImageAlign |
x |
x |
See Table 4-19. |
Alignment options relative to the text of the web page. See Table 4-19. |
|
|
String |
x |
x |
The URL pointing to the location of an image to display. |
The ImageUrl property can be either relative or absolute, as described fully in the sidebar "File Locations" in the section “Button Controls.”
There are ten possible values for the ImageAlign property, as shown in Table 4-19. If you need better control of image and text placement, you will probably want to put the Image control in a table.
Table 4-19. Members of the ImageAlign enumeration
|
Values |
Description |
|---|---|
|
|
Not set. This is the default value. |
|
|
Aligns the lower edge of the image with the lower edge of the largest element on the same line. |
|
|
Aligns the middle of the image with the middle of the largest element on the same line. |
|
|
Aligns the upper edge of the image with the upper edge of the highest element on the same line. |
|
|
Aligns the lower edge of the image with the lower edge of the first line of text. Same as |
|
|
Aligns the lower edge of the image with the lower edge of the first line of text. Same as |
|
|
Aligns the middle of the image with the lower edge of the first line of text. |
|
|
Aligns the upper edge of the image with the upper edge of the highest text on the same line. |
|
|
Aligns the image on the left edge of the page with text wrapping on the right. |
|
|
Aligns the image on the right edge of the page with the text wrapping on the left. |
In Example 4-36, ImageDemo, shown in Figure 4-21, you will see how the various ImageAlign values affect the appearance of a web page. The code-behind for this example is listed in Example 4-37.
Example 4-36. default.aspx for ImageDemo
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Image Control</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Image Control</h1>
<font name="Garamond" size ="4">
This is a sample paragraph which is being used
to demonstrate the effects of various values
of ImageAlign. As you will see, the effects
are sometimes difficult to pin down, and vary
depending on the width of the browser window.
</font>
<asp:Image ID="img1" runat="server"
AlternateText="Dan"
ImageUrl="Dan at vernal pool.jpg" />
<hr />
<asp:Button runat="server" Text="Sample Button" />
<asp:Image ID="img2" runat="server"
AlternateText="Dan" ImageUrl="Dan at Vernal pool.jpg" />
<hr />
<asp:DropDownList ID="ddl" runat="server" AutoPostBack="True">
<asp:ListItem text="NotSet" />
<asp:ListItem text="AbsBottom" />
<asp:ListItem text="AbsMiddle" />
<asp:ListItem text="Top" />
<asp:ListItem text="Bottom" />
<asp:ListItem text="BaseLine" />
<asp:ListItem text="TextTop" />
<asp:ListItem text="Left" />
<asp:ListItem text="Right" />
</asp:DropDownList>
</div>
</form>
</body>
</html>
Example 4-37. default.aspx.cs for ImageDemo
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
switch (ddl.SelectedIndex)
{
case 0:
img1.ImageAlign = ImageAlign.NotSet;
img2.ImageAlign = ImageAlign.NotSet;
break;
case 1:
img1.ImageAlign = ImageAlign.AbsBottom;
img2.ImageAlign = ImageAlign.AbsBottom;
break;
case 2:
img1.ImageAlign = ImageAlign.AbsMiddle;
img2.ImageAlign = ImageAlign.AbsMiddle;
break;
case 3:
img1.ImageAlign = ImageAlign.Top;
img2.ImageAlign = ImageAlign.Top;
break;
case 4:
img1.ImageAlign = ImageAlign.Bottom;
img2.ImageAlign = ImageAlign.Bottom;
break;
case 5:
img1.ImageAlign = ImageAlign.Baseline;
img2.ImageAlign = ImageAlign.Baseline;
break;
case 6:
img1.ImageAlign = ImageAlign.Middle;
img2.ImageAlign = ImageAlign.Middle;
break;
case 7:
img1.ImageAlign = ImageAlign.TextTop;
img2.ImageAlign = ImageAlign.TextTop;
break;
case 8:
img1.ImageAlign = ImageAlign.Left;
img2.ImageAlign = ImageAlign.Left;
break;
case 9:
img1.ImageAlign = ImageAlign.Right;
img2.ImageAlign = ImageAlign.Right;
break;
default:
img1.ImageAlign = ImageAlign.NotSet;
img2.ImageAlign = ImageAlign.NotSet;
break;
}
}
}HTML provides the <map> element to implement images with multiple hyperlinks. These are known as image maps. The ImageMap server control provides this functionality in ASP.NET.
The ImageMap control derives from the Image class, and adds a number of properties and a single event, Click, to that class to provide the image map functionality. These properties are listed in Table 4-20.
Table 4-20. Properties of the ImageMap control
|
Name |
Type |
Get |
Set |
Values |
Description |
|---|---|---|---|---|---|
|
|
String |
✗ |
✗ |
The text will be displayed in the control if the image is unavailable. In browsers that support the ToolTips feature, this text is also displayed as a ToolTip. | |
|
|
Boolean |
✗ |
✗ |
|
If This property is provided to support the web pages compatible with assistive technology devices, such as screen readers. |
|
|
HotSpotMode |
✗ |
✗ |
|
Specifies the default hotspot mode, or action taken when a hotspot is clicked, for the control. Individual hotspots may specify different modes. |
|
|
HotSpotCollection |
✗ |
A collection of |
Each ImageMap control contains a collection of HotSpots: clickable regions of the image corresponding to HTML <area> tags within the image map. HotSpots will either raise a Click event on the server, if the HotSpotMode is set to PostBack, or will immediately navigate to the URL specified by the NavigateUrl property, if the HotSpotMode is set to Navigate.
There are three types of hotspots:
-
RectangleHotSpot Defines a rectangular region of the image with
Top,Bottom,Left, andRightproperties, all in pixels relative to the upper-left corner of the image.-
CircleHotSpot Defines a circular region of the image with
XandYproperties specifying the center of the circle, in pixels relative to the upper-left corner of the image, and theRadiusproperty, specifying the radius of the circle in pixels.-
PolygonHotSpot Defines a many-sided region of the image with a comma-separated list of
XandYcoordinates of endpoints of line segments outlining the region, in pixels relative to the upper left corner of the image.
All of the HotSpot objects have in common the properties listed in Table 4-21.
Table 4-21. Properties of the HotSpot object
|
Name |
Type |
Get |
Set |
Values |
Description |
|---|---|---|---|---|---|
|
|
String |
✗ |
✗ |
The text displayed in the control if the image is unavailable. In browsers that support the ToolTips feature, this text is also displayed as a ToolTip. | |
|
|
HotSpotMode |
✗ |
✗ |
|
Specifies the default hotspot mode, or action taken when a hotspot is clicked, for the control. Individual hotspots may specify different modes. |
|
|
String |
✗ |
✗ |
Specifies the URL to navigate to when a hotspot with a | |
|
|
String |
✗ |
✗ |
The value of the clicked | |
|
|
String |
✗ |
✗ |
Specifies the browser window in which the target page will be displayed. The values of the |
All of these properties and the Click event are demonstrated in the next example, ImageMapDemo. This web page is shown in Figure 4-22 after the Yes hotspot has been clicked. This example has two image maps. The one at the top of the page contains three rectangular hotspots and a circular hotspot. The second image map has three polygonal hotspots defined: one above the band, one below, and the band itself.
The content file for this example is shown in Example 4-38 and the code-behind file is shown in Example 4-39. The only code of interest in the latter is the event handler method, imgmapYesNoMaybe_Click (highlighted), which is executed whenever a hotspot with a HotSpotMode set to PostBack is clicked.
Example 4-38. default.aspx for ImageMapDemo
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>ImageMapDemo</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>ImageMap Control</h1>
<h2>Rectangular & Circular HotSpots</h2>
<asp:ImageMap ID="imgmapYesNoMaybe" runat="server"
ImageUrl="YesNoMaybe.gif"
HotSpotMode="Postback" OnClick="imgmapYesNoMaybe_Click">
<asp:RectangleHotSpot
PostBackValue="Yes"
Bottom="60" Top="21" Left="17" Right="103"
AlternateText="Damn right" />
<asp:RectangleHotSpot
HotSpotMode=PostBack
PostBackValue="No"
Bottom=60 Top=21 Left=122 Right=208
AlternateText="Hell no"/>
<asp:RectangleHotSpot
PostBackValue="Maybe"
Bottom=122 Top=83 Left=16 Right=101
AlternateText="Well..., I'll think about it"/>
<asp:CircleHotSpot
HotSpotMode="Navigate"
X=165 Y=106 Radius=25
NavigateUrl=http://localhost/websites/targetpage.aspx
Target=_blank AlternateText="I'll have to think about it."/>
</asp:ImageMap>
<asp:Label ID="lblMessage" runat="server" />
<h2>Polygon HotSpots</h2>
<asp:ImageMap ID="imgmapPlot" runat="server"
ImageUrl="plot.gif"
HotSpotMode="PostBack"
OnClick="imgmapYesNoMaybe_Click">
<asp:PolygonHotSpot Coordinates="4,245,4,3,495,3,495,45,"
AlternateText="Above the band"
PostBackValue="Above the band" />
<asp:PolygonHotSpot Coordinates="4,245,495,45,495,112,3,264"
AlternateText="In the band"
PostBackValue="In the band" />
<asp:PolygonHotSpot Coordinates="495,45,495,112,495,320,4,320"
AlternateText="Below the band"
PostBackValue="Below the band" />
</asp:ImageMap>
</div>
</form>
</body>
</html>Example 4-39. default.aspx.cs for ImageMapDemo
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
}
protected void imgmapYesNoMaybe_Click(object sender,
ImageMapEventArgs e)
{
lblMessage.Text = "The PostBackValue is " + e.PostBackValue;
}
}In the declaration of the first image map, imgMapYesNoMaybe, an image file is specified, YesNoMaybe.gif, which is located in the same directory as the page itself. Alternatively, a relative directory path could be specified, such as:
ImageUrl="images\YesNoMaybe.gif"
or an absolute directory path, such as:
ImageUrl="c:\websites\images\YesNoMaybe.gif"
or an Internet or intranet location, such as the following:
ImageUrl="HTTP://www.SomeWebSite.com/images/YesNoMaybe.gif"
The default HotSpotMode for this image map is set to PostBack. The Yes and Maybe hotspots assumes this value, the No hotspot explicitly specifies the same value, and the question mark hotspot uses a different HotSpotMode of Navigate. In this latter case, the NavigateUrl and Target properties provide direction as to where and how to navigate. For the postback hotspots, the OnClick attribute of the image map hooks the Click event to the imgmapYesNoMaybe_Click method contained in the code-behind file, shown highlighted in Example 4-39.
The second image map, imgmapPlot, defines three irregularly shaped hotspots, defined by a set of X,Y coordinates. In this example, the hotspots are simple, with only four straight sides each. In a more typical usage, say a map of the United States with each state defined as a hotspot, you might have many dozens of nodes specified. The more nodes, the finer and more accurate the hotspot. However, don’t go too crazy trying to make the outline perfect because most users click near the middle of the hotspot, and if they are too close to the edge of the region and get the adjoining region by mistake, they will just hit the Back button and try again a little more carefully.
The Click event argument is of type ImageMapEventArgs. It exposes a single public property. PostBackValue. This corresponds to the HotSpot property of the same name declared with each HotSpot in the example. This property is retrieved in the Click event handler in Example 4-39 and used to populate the Text property of the Label control on the page.
Get Programming ASP.NET, 3rd Edition now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
