<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderHeader" Runat="Server">
    
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderForTitleAndIntro" Runat="Server">
    <table width="100%" cellpadding="2" cellspacing="0">
        <tr valign="top" class="ArticleTitle">
            <td style="padding-left:10px;" valign="middle">
                asp:ImageMap control</td>
        </tr>
        <tr>
            <td class="ArticleContents">
                ImageMap control is used to create an image that contains clickable hotspot region.
            </td>
        </tr>
        <tr>
            <td colspan="2">&nbsp;</td>
        </tr>
    </table>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderForContents" Runat="Server">
    <div class="ArticleContents">
        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 &lt;img /&gt; HTML tag.
        <p>
        Its properties like <span class="DemoCP">BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. </span>
        are implemented through style properites of &lt;img&gt;. 
        </p>
        Following are some important properties that are very useful.
        <table width="100%" class="TutoPropPlaceHolder" border="1" cellpadding="2" cellspacing="1">
            <tr>
                <td class="DemoCP">ImageUrl</td>
                <td>
                    Url of image location.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">AlternetText</td>
                <td>
                    Appears if image not loaded properly
                </td>
            </tr>
            <tr>
                <td class="DemoCP">Tooltip</td>
                <td>
                    Appears when on mouse over the image
                </td>
            </tr>
            <tr>
                <td class="DemoCP">ImageAlign</td>
                <td>
                    Used to align the Text beside image.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">HotSpotMode</td>
                <td>
                    PostBack/Navigate .... When Navigate, the user is navigated to a different URL. In case of PostBack, the page is posted back to the server.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">OnClick</td>
                <td>
                    Attach a server side event that fires after clicking on image when HostSpotMode is PostBack.
                </td>
            </tr>
            <tr>
                <td class="DemoCP">PostBackValue</td>
                <td>
                    You can access it in the server side click event through ImageMapEventArgs. (eg. e.PostBackValue)
                </td>
            </tr>
        </table>
        <!-- START - Demo Section -->
        <table class="DemoPlaceHolder" border="1" cellpadding="2" cellspacing="4">
            <tr>
                <td class="DemoTitle">
                    DEMO : ImageMap
                </td>
                <td align="right">
                    <a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/controls/imagemap.aspx" target="_blank">Show Source Code</a>
                </td>
            </tr>
            <tr>
                <td>
                    <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>
                </td>
                <td>
                    <asp:Label ID="lblMessage" runat="Server" SkinID="MessageLabel"></asp:Label>
                    Clicking on ListBox on the image will fire ImageMap serve side event.
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <!-- START - Server Side Code -->
                    <pre>
                        
        &lt;asp:ImageMap ID="ImageMap1" runat="Server" ImageUrl="controldata/gotocontrols.gif" OnClick="FireImageMapClick"&gt;
                        &lt;asp:RectangleHotSpot AlternateText="Label" Left="10" Top="33" Right="75" Bottom="10" NavigateUrl="~/tutorials/controls/label.aspx" /&gt;
                        &lt;asp:RectangleHotSpot AlternateText="Button" Left="80" Top="33" Right="150" Bottom="10" NavigateUrl="~/tutorials/controls/button.aspx" /&gt;
                        &lt;asp:RectangleHotSpot AlternateText="ImageButton" Left="155" Top="33" Right="275" Bottom="10" NavigateUrl="~/tutorials/controls/imagebutton.aspx" /&gt;
                        &lt;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" /&gt;
                    &lt;/asp:ImageMap&gt;
                    
                    </pre> 
                    <!-- END - Server Side Code -->
                </td>
            </tr>
        </table>
        <!-- END - Demo Section -->
        </div>
    <br />
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderFooter" Runat="Server">
</asp:Content>

Go Top