Introduction
Image Control is added to the standard control library in ASP.NET 2.0. When working with this control I found it be quite interactive. In my previous projects I have simulated the behaviour of this control using javascript. But this control makes developer's life much easier. Let us now create a small application that will interact with the user when he clicks on the Image and tells him where exactly he has clicked.
Please note that the co-ordinates for the Image as per the 1024-768 pixels.
Image Map Sample Application
1. Let us create an asp.net project and add an image control to the default.aspx.
2. Add the an image called PieChart.aspx to the project.
3. We are going to add two labels under the form tag in a div to display the name of the color clicked by the user.
<div>
<asp:Label ID="areaClicked" runat="server" Text="Area Clicked : "></asp:Label>
<asp:Label ID="imageColor" runat="server" Text=""></asp:Label>
</div>
4. Set the imageURL of the image as piechart.jpg as shown
<asp:ImageMap ID="ImageMap1" runat="server" ImageUrl="~/PIECHART.JPG"
OnClick="ImageMap1_Click1">
5. There are 3 types of HotSpots which are available with ImageMap : Circle,Rectangle and Polygon. We will see how to use all of them in this example.
6. First let us create a Circular HotSpot such that it will cover the tips of all the colors. Please note that the HotSpot mode should be postback i.e. on clicking this area on the image the form will be posted back and on post back the value received will be "C".ALong with that we also need to set the X and Y co-ordinates ( these are the center co-ordinates of the pie-circle ) and define the radius = 100 which will form a circle with radius 100 pixels around the sport with X-Y co-ordinates.
<asp:CircleHotSpot X="468" Y="230" HotSpotMode="PostBack" AccessKey="C"
Radius="100" NavigateUrl="~/Default.aspx" PostBackValue="C"/>
7. ImageMap provides one good feature called AccessKey which also you to access the HotSpot area directly using the keyboard. Let us set the AccessKey for Circle as "C".
8. Now let us add polygonhot spot for each of the colors as shown below. Note that in case of polygon hotspot we need to set the co-ordinates of the hotspot. We need to set the mode = postback and access keys for each one as shown below.
<asp:PolygonHotSpot HotSpotMode="PostBack" avigateUrl="~/Default.aspx"
Coordinates="468,230,470,21,318,31,180,77" AccessKey="G" AlternateText="Green"
PostBackValue="G"/>
<asp:PolygonHotSpot HotSpotMode="PostBack" NavigateUrl="~/Default.aspx"
Coordinates="468,230,180,77,42,235,219,403" AccessKey="B" AlternateText="Blue"
PostBackValue="B"/>
<asp:PolygonHotSpot HotSpotMode="PostBack" NavigateUrl="~/Default.aspx"
Coordinates="468,230,266,418,623,425,875,300" AccessKey="R" AlternateText="Red"
PostBackValue="R"/>
<asp:PolygonHotSpot HotSpotMode="PostBack" NavigateUrl="~/Default.aspx"
Coordinates="468,230,470,21,673,45,875,300" AccessKey="Y" AlternateText="Yellow"
PostBackValue="Y"/>
<asp:PolygonHotSpot HotSpotMode="PostBack" NavigateUrl="~/Default.aspx"
Coordinates="468,230,221,406,244,412,265,417" AccessKey="V" AlternateText="Violet"
PostBackValue="V"/>
9. Now let us add an alternate text to each of the hotspots. This text will be shown as tooltip.
<asp:CircleHotSpot X="468" Y="230" HotSpotMode="PostBack" AccessKey="C" Radius="100"
NavigateUrl="~/Default.aspx" PostBackValue="C" AlternateText="Circle"/>
<asp:PolygonHotSpot HotSpotMode="PostBack" NavigateUrl="~/Default.aspx"
Coordinates="468,230,470,21,318,31,180,77" AccessKey="G" AlternateText="Green"
PostBackValue="G"/>
<asp:PolygonHotSpot HotSpotMode="PostBack" NavigateUrl="~/Default.aspx"
Coordinates="468,230,180,77,42,235,219,403" AccessKey="B" AlternateText="Blue"
PostBackValue="B"/>
<asp:PolygonHotSpot HotSpotMode="PostBack" NavigateUrl="~/Default.aspx"
Coordinates="468,230,266,418,623,425,875,300" AccessKey="R" AlternateText="Red"
PostBackValue="R"/>
<asp:PolygonHotSpot HotSpotMode="PostBack" NavigateUrl="~/Default.aspx"
Coordinates="468,230,470,21,673,45,875,300" AccessKey="Y" AlternateText="Yellow"
PostBackValue="Y"/>
<asp:PolygonHotSpot HotSpotMode="PostBack" NavigateUrl="~/Default.aspx"
Coordinates="468,230,221,406,244,412,265,417" AccessKey="V" AlternateText="Violet"
PostBackValue="V"/>
10.In case the user clicks on any other spot than the area defined by us on the pie-chart. Then user should recieve a message saying "Others". to achieve this we need to create a rectangle hotspot defining the entire area of the image as follows :-
<asp:RectangleHotSpot Top="933" Left="0" right="933" Bottom="0" AccessKey="W"
HotSpotMode="PostBack" NavigateUrl="~/Default.aspx" PostBackValue="W" />
11. We need to keep in mind that we need to define the superset at last and not first in the stack of hotspots.If we put the rectangle hot spot fot the whole image first than we will always get the postback value as "w". This works on the same principle as exception handling the more generic the later it should be defined in the hierarchy.
12. Let us add code for imagemap on click event in the default.aspx.cs. In this code we are trapping the postback value and setting the text in the label.
protected void ImageMap1_Click1(object sender, ImageMapEventArgs e)
{
switch (e.PostBackValue)
{
case "G":
imageColor.Text = "Green";
break;
case "B":
imageColor.Text = "Blue";
break;
case "Y":
imageColor.Text = "Yellow";
break;
case "V":
imageColor.Text = "Violet";
break;
case "C":
imageColor.Text = "Circle";
break;
case "W":
imageColor.Text = "Others";
break;
case "R":
imageColor.Text = "Red";
break;
}
}13. Let us build this project and execute it in IE.
14. For each of the hot spot we had defined an Access Keys. Access Key allows us to access that part of the imagemap directly by using that key with "ALT". So let us try to access Green HotSppt by using ALT + "G". The Green HotSpot should be highlighted. You can access others by using appropriate access keys with "ALT".
15. Move your mouse over the pie chart and click right in the center. The form should post back and value in the label should be "Circle".
16. Then click on any of the colors in the pie (towards the outer edge i.e. out of the circle area) you should see the selected color in the label after postback.
17. Click on white area of the image (outside the pie - colors). The form should post back and display "Others" in the label.
