ASP.NET ImageMap Control Example

ImageMap Control Example

ImageMap Control is a Standard Toolbox Control. Here i show some basic example of ImageMap server control.

Basic Use
First create a Images folder in Solution Explorer for storing your images. After this create a Web Form name ImageMap.aspx. The code is here.


<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">
    protected void ImageMap1_Click(object sender, System.Web.UI.WebControls.ImageMapEventArgs e) {
        Response.Write("You selected: " + e.PostBackValue);
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ImageMap Control Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ImageMap
             ID="ImageMap1"
             runat="server"
             ImageUrl="~/Images/Dolls.jpg"
             Width="500"
             HotSpotMode="PostBack"
             OnClick="ImageMap1_Click"
             >
            <asp:RectangleHotSpot Top="0" Bottom="448" Left="0" Right="250" AlternateText="Sky Doll" PostBackValue="Sky Doll" />
            <asp:RectangleHotSpot Top="0" Bottom="448" Left="251" Right="500" AlternateText="Red Doll" PostBackValue="Red Doll" />
        </asp:ImageMap>
    </div>
    </form>
</body>
</html>

HotSpotMode: Navigate
You can easily use your ImageMap for navigation purpose. First create two extra files SkyDoll.aspx and RedDoll.aspx. Then write this code in your ImageMap.aspx.


<%@ Page Language="C#" %>

<!DOCTYPE html>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>ImageMap Control Example</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ImageMap
             ID="ImageMap1"
             runat="server"
             ImageUrl="~/Images/Dolls.jpg"
             Width="500"
             HotSpotMode="Navigate"
             >
            <asp:RectangleHotSpot Top="0" Bottom="448" Left="0" Right="250" AlternateText="Go SkyDoll.aspx" NavigateUrl="~/SkyDoll.aspx" />
            <asp:RectangleHotSpot Top="0" Bottom="448" Left="251" Right="500" AlternateText="RedDoll.aspx" NavigateUrl="~/RedDoll.aspx" />
        </asp:ImageMap>
    </div>
    </form>
</body>
</html>

More asp.net examples