The ImageMap ASP.Net web server control
In this post I will try to show you how to use the ImageMap web server control. This is going to be a very easy example.
We will write no code but I will use the control to create navigation hotspots.
1) Launch Visual Studio 2010/2005/2008. Express editions will be fine.
2) Create a new asp.net empty web site and call it “NavigationHotspot”.
3) Drag and drop in the default.aspx page a ImageMap web server control from the Toolbox.
4) Let me explain what I did. I have an image that contains two flags. See the image below
I want to be able to navigate to two different web pages depending on which part of the image (which flag) the user clicks.
5) Create two web pages. The one is called Nigeria.aspx and the other one Britain.aspx.
6) Inside the form element type
<asp:ImageMap
ID="ImageMap1"
runat="server"
ImageUrl="~/flags.png"
Width="300px"
HotSpotMode="Navigate"
>
<asp:RectangleHotSpot Top="0" Bottom="95" Left="0" Right="140"
AlternateText="Go to Britain" NavigateUrl="~/britain.aspx" />
<asp:RectangleHotSpot Top="0" Bottom="95" Left="140" Right="300"
AlternateText="Go to Ireland!!!" NavigateUrl="~/Nigeria.aspx" />
</asp:ImageMap>
The main property to notice here is HotSpotMode="Navigate". Inside our ImageMap control we create 2 RectangleHotSpot and we set the dimensions (Bottom,Left,Right) for each part of the image.Then we set the NavigateUrl property to each page we created.
7) Run your application and click on the different parts of the image and see that you navigate to the appropriate page.
Hope it helps!!!!