ASP.NET Tutorials
Sheo Narayan


Win Prizes

Social Presence
Like us on Facebook

Silverlight Tutorials | Report a Bug in the Tutorial
asp:ImageMap control
ImageMap control is used to create an image that contains clickable hotspot region.
ImageMap control is used to create an image that contains clickable hotspot region. When user click on the region, the user is either sent to a URL or a sub program is called. When it is rendered on the page, it is implemented through <img /> HTML tag.

Its properties like BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. are implemented through style properites of <img>.

Following are some important properties that are very useful.
ImageUrl Url of image location.
AlternetText Appears if image not loaded properly
Tooltip Appears when on mouse over the image
ImageAlign Used to align the Text beside image.
HotSpotMode PostBack/Navigate .... When Navigate, the user is navigated to a different URL. In case of PostBack, the page is posted back to the server.
OnClick Attach a server side event that fires after clicking on image when HostSpotMode is PostBack.
PostBackValue You can access it in the server side click event through ImageMapEventArgs. (eg. e.PostBackValue)
DEMO : ImageMap Show Source Code
LabelButtonImageButtonFires server side Click Event. Postback value is ListBox Clicking on ListBox on the image will fire ImageMap serve side event.
        <asp:ImageMap ID="ImageMap1" runat="Server" ImageUrl="controldata/gotocontrols.gif" OnClick="FireImageMapClick">
                        <asp:RectangleHotSpot AlternateText="Label" Left="10" Top="33" Right="75" Bottom="10" NavigateUrl="~/tutorials/controls/label.aspx" />
                        <asp:RectangleHotSpot AlternateText="Button" Left="80" Top="33" Right="150" Bottom="10" NavigateUrl="~/tutorials/controls/button.aspx" />
                        <asp:RectangleHotSpot AlternateText="ImageButton" Left="155" Top="33" Right="275" Bottom="10" NavigateUrl="~/tutorials/controls/imagebutton.aspx" />
                        <asp:RectangleHotSpot AlternateText="Fires server side Click Event. Postback value is ListBox" Left="300" Top="40" Right="400" Bottom="0" NavigateUrl="~/tutorials/controls/listbox.aspx" HotSpotMode="PostBack" PostBackValue="ListBox" />