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
|
|
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" />
</asp:ImageMap>
|