ASP.NET Application to implement ImageMap control

Write an ASP.NET application to implement the ImageMap control with suitable example.

Answer:

Image Map Control:
The ASP.net Image map control allows to create an image that the user can click. These are also called hotspots.

We can create two hotspot regions - One hotspot region to navigate to URL and another to post back to the server.
  

Imagemap.aspx

<%@ Page Language="VB" %>

<!DOCTYPE html>

<script runat="server">
    Sub Buttons_Click(ByVal sender As Object, ByVal e As ImageMapEventArgs) Handles Buttons.Click
        Label1.Text = e.PostBackValue & " clicked!"
    End Sub    
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Untitled Page</title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h3>ImageMap Class  Example</h3>
            
            <asp:imagemap id="Buttons" imageurl="images/new/imagemap.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>
            
            <p>
                <h3><asp:label id="label1" runat="server" ></asp:label></h3>
            </p>
                        
        </div>
    </form>
</body>
</html>


Output:

1. On Page load

imagemap control

2. After clicked the button 2

imagemap control
▲