ASP.NET ImageMap Control


An ImageMap is an image on a webpage that provides various links, called hotspots, to navigate to other web pages, depending on the place where the user clicks on the image.

Properties

Property Description
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)

How to add the HotSpot in ASP.NET



All these hotspots types have some properties to customize the hotspot region and behavior.

You can specify Left, Top, Right and Bottom for Rectangle hotspot and X, Y and Radius properties for Circle hotspot.

The Polygon hotspot requires a serious of X and Y coordinates to create a free form hotspot.

All these hotspots types also have HotSpotMode property available to specify their click behavior individually so you can have one hotspot that navigates the user to another page and other hotspot which generate postback to the server and yet another hotspot which does nothing when user click on it. You also have PostBackValue property to send different values to the server on postback.

You also have Target property to open the URL in a new window if you want and other basic properties such as NavigateUrl to specify the URL to navigate to on user click and AlternateText that will show a nice tool tip when the user will move the mouse over that particular hotspot.

HTML Code

<html>
<body>
    <form id="form1" runat="server">
        <div>
            <h3><font face="Verdana">ImageMap Class Mixed HotSpotMode Example</font></h3>
            
            <asp:imagemap id="Buttons" imageurl="hotspot.jpg" alternatetext="Navigate buttons"
                hotspotmode="Postback" runat="Server">                 
        
                <asp:RectangleHotSpot
                hotspotmode="Postback"
                postbackvalue="Button1"
                alternatetext="Button 1"
                top="30"
                left="175"
                bottom="110"
                right="355">
                </asp:RectangleHotSpot>
                
                <asp:RectangleHotSpot  
                hotspotmode="Postback"
                postbackvalue="Button2"
                alternatetext="Button 2"        
                top="155"
                left="175"
                bottom="240"
                right="355">          
                </asp:RectangleHotSpot>
                
                <asp:RectangleHotSpot
                hotspotmode="Postback"
                postbackvalue="Button3"
                alternatetext="Button 3"          
                top="285"
                left="175"
                bottom="365"
                right="355">
                </asp:RectangleHotSpot> 
                      
                <asp:RectangleHotSpot
                hotspotmode="Postback"
                postbackvalue="Background"
                alternatetext="Background"          
                top="0"
                left="0"
                bottom="390"
                right="540">
                </asp:RectangleHotSpot> 

            </asp:imagemap>
            
        </div>
    </form>
</body>
</html>

Share this article on