<asp:ImageMap> Control
The <asp:ImageMap> control is used to create an image
that contains clickable hotspot regions. When a user clicks a hot spot, the control can either
call a subprogram or link to a specified URL. It works like a combination of
<asp:Image> and <asp:ImageButton> controls.
Figure 5-18. General format for <asp:ImageMap> control.
The URL of the image is given in the ImageUrl property, and
alternate text is specified in the AlternateText property.
You can define any number of hot spot regions within the image using
<asp:CircleHotSpot>, <asp:RectangleHotSpot>,
and/or <asp:PolygonHotSpot> controls to specify the shapes
of the regions that are made sensitive to mouse clicks.
The behavior of a clicked hot spot is given by the HotSpotMode
property for a RectangleHotSpot, CircleHotSpot, or PolygonHotSpot to react to a click on the hot
spot It is given for the ImageMap itself to react to a click on an area of the image that is not
specifically defined as a rectangle, circle, or polygon hot spot.
The HotSpotMode is set to one of two values to determine the action
to take when a hot spot is clicked. The Navigate mode causes
navigation to a page given in the NavigateUrl property of the
associated hot spot control. The PostBack mode activates the
subprogram named in the OnClick event handler of the ImageMap
control. A PostBackValue string coded in the hot spot control
is passed to the subprogram. The PostBackValue serves a purpose similar
to that of a CommandName property coded for a command button or command
image. The HotSpotMode can be set to Inactive
to remove the click sensitivity of a hot spot.
Creating an Image Map
An image map can be created from any graphic image by defining rectangular, circular, or
polygonal shapes overlying portions of the image. These shapes become the clickable hot spots
to issue URL navigations or subprogram calls. The information needed to define these shapes are
Rectangle - the pixel coordinates of the top-left and bottom-right corners
Circle - the pixel coordinates of the center and its radius
Polygon - the pixel coordinates of each corner point
These x and y (horizontal and vertical) pixel coordinates can be determined
from within any paint program. For example, the graphic image shown in Figure 5.19 is opened in
the Windows Paint program. This image displays actual shapes to be mapped; however, these
shapes can be superimposed over any photograph or drawn image.
Figure 5-19. Determining shape coordinates of an image map.
Determining coordinate positions for the shapes is a simple matter of using the software's
pointer tool to fixate on a pixel position in the image and reading the x and y coordinates
of that position. In the above illustration, the Paint program's Pencil tool is positioned at
various points in the image, and their coordinates are read from the status bar at the bottom
of the window. Shown here is the Pencil positioned at the bottom-right corner of the rectangle
with coordinates 216,148 appearing in the status bar. These coordinates
are relative to the top-left corner (coordinates 0,0) of the entire
image.
Needed x,y coordinates for all three shapes in the above illustration are shown:
Rectangle - top-left:49,36; bottom-right:216,148
Circle - center:368,200; radius:76
Polygon - corner points: 143,187 237,249 222,333 107,333 76,254 (reading clockwise or counter-clockwise around the shape)
Once these coordinates are known, they can be used to configure
<asp:RectangleHotSpot>, <asp:CircleHotSpot>, and
<asp:PolygonHotSpot> controls for their enclosing
<asp:ImageMap> control.
Using Image Maps for Navigation
Image map hot spots can be used to navigate to different pages when different shapes are clicked.
Below is shown the final version of the above image map where different shapes link to different
Web sites.
Figure 5-20. An ImageMap used for navigation.
<form Runat="Server">
<asp:ImageMap Runat="Server"
ImageUrl="ImageMap.jpg"
AlternateText="Web search image map"
HotSpotMode="Navigate">
<asp:RectangleHotSpot
AlternateText="Go to Google"
Left="49"
Top="36"
Right="216"
Bottom="148"
NavigateUrl="http://www.google.com"
Target="_blank"/>
<asp:CircleHotSpot
AlternateText="Go to AltaVista"
X="368"
Y="200"
Radius="76"
NavigateUrl="http://www.altavista.com"
Target="_blank"/>
<asp:PolygonHotSpot
AlternateText="Go to Yahoo"
Coordinates="143,187, 237,249, 222,333, 107,333, 76,254"
NavigateUrl="http://www.yahoo.com"
Target="_blank"/>
</asp:ImageMap>
</form>
Listing 5-21. Code for an ImageMap used for navigation.
The image used for the ImageMap is given in the ImageUrl property.
This picture is located in the same directory as the page. The HotSpotMode
property is set to "Navigate" to indicate that all hot spots on the
image map are URL links. This property can, instead, be set for individual hot spots if some are URL
links and others are subprogram calls.
The rectangle area of the image is defined with an <asp:RectangleHotSpot>
control. Recall that two sets of coordinates are needed to describe this shape. The
Left and Top properties give the
x and y coordinates of the top-left corner of the rectangle; the
Right and Bottom properties give the coordinates
of the bottom-right corner. NavigateUrl specifies the URL to the linked
page, and Target="_blank" opens the page in a new browser window.
The circle area of the image is defined with an <asp:CircleHotSpot>
control. The X and Y properties
give the coordinates of the center point of the circle; the Radius
property gives the radius of the circle in pixels.
The polygon area of the image is defined with an <asp:PolygonHotSpot>
control. Coordinates are needed for each corner point of the polygon, starting at any
point and moving clockwise or counter-clockwise around the shape. The
Coordinates property supplies these x,y coordinates in a text string,
with pairs of comma-separated coordinates themselves separated by commas.
Using Image Maps to Call a Subprogram
In addition to providing URL links, an ImageMap control can use hot spots to call a subprogram.
All hot spots call the same subprogram, passing to it a value that identifies which hot spot was
clicked. Below, a variation of the previous image map calls a subprogram which displays
output identifying the clicked hot spot.
Which shape was clicked?
Figure 5-21. An ImageMap used for subprogram calls.
<SCRIPT Runat="Server">
Sub Get_Shape (Src As Object, Args As ImageMapEventArgs)
Message.Text = "<b>""" & Args.PostBackValue & """</b> was clicked"
End Sub
</SCRIPT>
<form Runat="Server">
<asp:ImageMap Runat="Server"
ImageUrl="ImageMap2.jpg"
AlternateText="Subprogram call image map"
HotSpotMode="PostBack"
OnClick="Get_Shape"
Style="float:left">
<asp:RectangleHotSpot
AlternateText="Pass 'Rectangle'"
Left="49"
Top="36"
Right="216"
Bottom="148"
PostBackValue="Rectangle"/>
<asp:CircleHotSpot
AlternateText="Pass 'Circle'"
X="368"
Y="200"
Radius="76"
PostBackValue="Circle"/>
<asp:PolygonHotSpot
AlternateText="Pass 'Polygon'"
Coordinates="143,187, 237,249, 222,333, 107,333, 76,254"
PostBackValue="Polygon"/>
</asp:ImageMap>
Which shape was clicked? <asp:Label id="Message" Runat="Server"/>
</form>
Listing 5-22. Code for an ImageMap used for subprogram calls.
When an ImageMap services a subprogram call, its HotSpotMode property
must be set to PostBack. In addition, the ImageMap is given an
OnClick event handler naming the subprogram to call when any of the
hot spots is clicked.
Hot spot areas are assigned PostBackValue properties supplying string
values that are passed to the subprogram when clicked. These values are used to identify the clicked
hot spot. Thus, the subprogram can take different actions depending on which shape was clicked.
PostBackValue properties work identical to CommandName
properties used to configure command buttons and command links.
In the above example, the Get_Shape subprogram is called from the
ImageMap. It displays the PostBackValue received from the clicked hot
spot. Notice that the signature of the subprogram includes the
ImageMapEventArgs argument, required for ImageMap calls. The argument's
PostBackValue property contains the string passed from the clicked
hot spot.
Using Image Maps for Database Display
The subprogram called in the above example performs very little processing in order to keep
the example simple. However, any type or complexity of processing can be performed, including
accessing and displaying database information, with variations occuring depending on which hot
spot is clicked. The following ImageMap selects display of book types from the
BooksDB.mdb database. It calls a subprogram that issues different
SQL statements to populate a GridView display.
| BookID | BookTitle | BookPrice |
| DB111 | Oracle Database | $69.99 |
| DB222 | Databases in Depth | $29.95 |
| DB333 | Database Processing | $136.65 |
| DB444 | Access Database Design | $34.95 |
| DB555 | SQL Server 2005 | $29.99 |
Figure 5-22. Using an ImageMap to issue SQL statements for a GridView display.
This ImageMap defines six hot-spot rectangles superimposed on the single graphic of six buttons.
Each hot spot is associated with a PostBackValue giving the book type
to display. These values are the BookType field values in the database.
When they are passed to the Show_Books subprogram, the script concatenates
the received value within an SQL string to return records of that BookType
for display in a GridView. You should recognized the script as identical to previous scripts
for the same application activated with <asp:Button> and
<asp:LinkButton> controls.
<SCRIPT Runat="Server">
Sub Show_Books (Src As Object, Args As ImageMapEventArgs)
Dim SQLString As String
SQLString = "SELECT BookID, BookTitle, BookPrice FROM Books " & _
"WHERE BookType = '" & Args.PostBackValue & "'"
BookSource.SelectCommand = SQLString
End Sub
</SCRIPT>
<form Runat="Server">
<asp:ImageMap Runat="Server"
ImageUrl="BooksMap.jpg"
AlternateText="Show Books"
HotSpotMode="PostBack"
OnClick="Show_Books">
<asp:RectangleHotSpot
Left="5"
Top="34"
Right="131"
Bottom="57"
AlternateText="Show Database Books"
PostBackValue="Database"/>
<asp:RectangleHotSpot
Left="5"
Top="63"
Right="131"
Bottom="86"
AlternateText="Show Graphics Books"
PostBackValue="Graphics"/>
<asp:RectangleHotSpot
Left="136"
Top="34"
Right="263"
Bottom="57"
AlternateText="Show Hardware Books"
PostBackValue="Hardware"/>
<asp:RectangleHotSpot
Left="136"
Top="63"
Right="263"
Bottom="86"
AlternateText="Show Software Books"
PostBackValue="Software"/>
<asp:RectangleHotSpot
Left="266"
Top="34"
Right="394"
Bottom="57"
AlternateText="Show Systems Books"
PostBackValue="Systems"/>
<asp:RectangleHotSpot
Left="266"
Top="62"
Right="394"
Bottom="87"
AlternateText="Show Web Books"
PostBackValue="Web"/>
</asp:ImageMap>
<asp:AccessDataSource id="BookSource" Runat="Server"
DataFile="../Databases/BooksDB.mdb"
SelectCommand="SELECT BookID, BookTitle, BookPrice FROM Books
WHERE BookType = 'Database'"/>
<p><asp:GridView DataSourceID="BookSource" Runat="Server"/></p>
</form>
Listing 5-23. Code to use an ImageMap to issue SQL statements for a GridView display.