ASP.NET ImageMap, HyperLink Sample Code | How to user ImageMap?

ImageMap.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="ImageMap.aspx.cs" Inherits="WebDemo01.ImageMap" %>

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
    <title></title>
</head>

<body>
    <form id="form1" runat="server">

    <asp:ImageMap ID="ImageMap1" runat="server" Height="50px"                      ImageUrl="~/Sources/menu.jpg" Width="800px">
        <asp:RectangleHotSpot Bottom="50"                                          NavigateUrl="~/nprCollege/History.aspx" Right="200" />
        <asp:RectangleHotSpot Bottom="50" Left="200"                             NavigateUrl="~/nprCollege/Courses.aspx" Right="400" />
        <asp:RectangleHotSpot Bottom="50" Left="400"
        NavigateUrl="~/nprCollege/StaffList.aspx" Right="600" />
        <asp:RectangleHotSpot Bottom="50" Left="600"                               NavigateUrl="~/nprCollege/Facilities.aspx" Right="800" />
    </asp:ImageMap>

    <br />
    <br />

    <table>
        <tr>
            <td style="width:200px;">
                <asp:HyperLink ID="HyperLink1" runat="server"                              NavigateUrl="~/nprCollege/History.aspx">
                 History</asp:HyperLink>
            </td>
            <td style="width:200px;">
                <asp:HyperLink ID="HyperLink2" runat="server"                              NavigateUrl="~/nprCollege/Courses.aspx">
                Courses</asp:HyperLink>
            </td>
            <td style="width:200px;">
                <asp:HyperLink ID="HyperLink3" runat="server"                              NavigateUrl="~/nprCollege/StaffList.aspx">
                 Staff List</asp:HyperLink>
            </td>
            <td style="width:200px;">
                <asp:HyperLink ID="HyperLink4" runat="server"                              NavigateUrl="~/nprCollege/Facilities.aspx">
                Facilities</asp:HyperLink>
            </td>
        </tr>
    </table>
    </form>
</body>
</html>



No comments:

Post a Comment