ASP.NET Tutorial/ASP.net Controls/ImageMap

Материал из .Net Framework эксперт
Перейти к: навигация, поиск

Called when hot spot has HotSpotMode=PostBack

   <source lang="csharp">

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="ImageMapTest" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">

   <title>ImageMap Test</title>

</head> <body>

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

ImageMap Control Test

   <asp:ImageMap ID="imapMenu" 
                 runat="server" 
                 ImageUrl="http://www.nfex.ru/style/logo.png" 
                 AlternateText="Menu" 
                 OnClick="imapMenu_Click" >
       <asp:PolygonHotSpot HotSpotMode="Navigate" 
                           NavigateUrl="Home.aspx"
                           AlternateText="Go to Home Page" 
                           Coordinates="3,3,3,39,156,39,158,18,60,18,41,3"/>
       <asp:RectangleHotSpot Bottom="65" 
                             HotSpotMode="PostBack" 
                             Left="115" 
                             PostBackValue="Home"
                             Right="154" 
                             Top="41" 
                             AlternateText="Go to the home page" />
       <asp:RectangleHotSpot Bottom="65" 
                             HotSpotMode="PostBack" 
                             Left="165" 
                             PostBackValue="Browse"
                             Right="220" 
                             Top="41" 
                             AlternateText="Browse our products" />
       <asp:RectangleHotSpot AlternateText="Do an advanced search" 
                             Bottom="65" 
                             HotSpotMode="PostBack"
                             Left="232" 
                             PostBackValue="Search" 
                             Right="285" 
                             Top="41" />
       <asp:RectangleHotSpot AlternateText="Find out more about us" 
                             Bottom="65" 
                             Left="293"
                             Right="360" 
                             Top="41" />
   
   </asp:ImageMap>
   
<asp:Label ID="labMessage" runat="server"></asp:Label>
   </form>

</body> </html> File: Default.aspx.cs using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class ImageMapTest : System.Web.UI.Page {

 protected void imapMenu_Click(object sender, ImageMapEventArgs e)
 {
   labMessage.Text = "You clicked " + e.PostBackValue;
 }

}</source>


ImageMap Control PostBack

   <source lang="csharp">

<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <script runat="server">

   protected void mapMenu_Click(object sender, ImageMapEventArgs e)
   {
       switch (e.PostBackValue)
       {
           case "ToUpper":
               txtText.Text = txtText.Text.ToUpper();
               break;
           case "ToLower":
               txtText.Text = txtText.Text.ToLower();
               break;
           case "Erase":
               txtText.Text = String.Empty;
               break;
       }
   }

</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">

   <title>ImageMap PostBack</title>

</head> <body>

   <form id="form1" runat="server">
   <asp:ImageMap
       id="mapMenu"
       ImageUrl="MenuBar.gif"
       HotSpotMode="PostBack"
       Runat="server" OnClick="mapMenu_Click">
       <asp:RectangleHotSpot
           PostBackValue="ToUpper"
           Left="0"
           Top="0"
           Right="100"
           Bottom="30"
           AlternateText="To Uppercase" />
       <asp:RectangleHotSpot
           PostBackValue="ToLower"
           Left="100"
           Top="0"
           Right="200"
           Bottom="30"
           AlternateText="To Uppercase" />
       <asp:RectangleHotSpot
           PostBackValue="Erase"
           Left="200"
           Top="0"
           Right="300"
           Bottom="30"
           AlternateText="To Uppercase" />
   </asp:ImageMap>
   
<asp:TextBox id="txtText" TextMode="MultiLine" Columns="40" Rows="5" Runat="server" />
   </form>

</body> </html></source>


ImageMap Test

   <source lang="csharp">

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="ImageMapTest" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head runat="server">

   <title>Untitled Page</title>

</head> <body>

   <form id="form1" runat="server">
       <asp:ImageMap ID="ImageMap1" runat="server" HotSpotMode="PostBack" ImageUrl="yourImage.png"
           OnClick="ImageMap1_Click">
           <asp:CircleHotSpot AlternateText="DVDs" PostBackValue="DVDs" Radius="83" X="272"
               Y="83" />
           <asp:CircleHotSpot AlternateText="Media" PostBackValue="Media" Radius="83" X="217"
               Y="221" />
           <asp:CircleHotSpot AlternateText="CDs" PostBackValue="CDs" Radius="83" X="92" Y="173" />
       </asp:ImageMap>
       

<asp:Label ID="lblInfo" runat="server" Font-Bold="True" Font-Names="Verdana"></asp:Label>
   </form>

</body> </html> File: Default.aspx.cs using System; using System.Data; using System.Configuration; using System.Collections; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class ImageMapTest : System.Web.UI.Page {

 protected void ImageMap1_Click(object sender, ImageMapEventArgs e)
 {
   lblInfo.Text = "You clicked " + e.PostBackValue;
 }

}</source>


Important properties, events and methods of ImageMap control

   <source lang="csharp">

AccessKey: a key that navigates to the ImageMap control. AlternateText: alternate text for the image (required for accessibility). DescriptionUrl: a link to a page which contains a detailed description of the image. GenerateEmptyAlternateText: set the AlternateText property to an empty string.

HotSpotMode: the behavior of the image map when you click a region.

                 Possible values are Inactive, Navigate, NotSet, and PostBack.

HotSpots: retrieve the collection of HotSpots contained in the ImageMap control. ImageAlign: align the image map with other HTML elements in the page.

                 Possible values are AbsBottom, AbsMiddle, Baseline, Bottom, 
                 Left, Middle, NotSet, Right, TextTop, and Top.

ImageUrl: specify the URL to the image. TabIndex: the tab order of the ImageMap control. Target: open a page in a new window. Focus: set the initial form focus to the ImageMap control. Click: Raised when you click a region of the ImageMap and

                 the HotSpotMode property is set to the value PostBack.

An ImageMap control is composed out of instances of the HotSpot class. A HotSpot defines the clickable regions in an image map. The ASP.NET framework has with three HotSpot classes: CircleHotSpot: a circular region in an image map. PolygonHotSpot: an irregularly shaped region in an image map. RectangleHotSpot: a rectangular region in an image map.


<%@ Page Language="C#" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">

   <title>ImageMap Navigate</title>

</head> <body>

   <form id="form1" runat="server">
   <asp:ImageMap
       id="mapNavigate"
       ImageUrl="yourImage.jpg"
       Runat="server">
       <asp:RectangleHotSpot
           NavigateUrl="Home.aspx"
           Left="0"
           Top="0"
           Right="100"
           Bottom="50"
           AlternateText="Navigate to Home" />
       <asp:RectangleHotSpot
           NavigateUrl="Products.aspx"
           Left="100"
           Top="0"
           Right="200"
           Bottom="50"
           AlternateText="Navigate to Products" />
       <asp:RectangleHotSpot
           NavigateUrl="Services.aspx"
           Left="200"
           Top="0"
           Right="300"
           Bottom="50"
           AlternateText="Navigate to Services" />
   </asp:ImageMap>
   </form>

</body> </html></source>


Mark asp:ImageMap with asp:RectangleHotSpot

   <source lang="csharp">

<%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">

   <title>ImageMap Navigate</title>

</head> <body>

   <form id="form1" runat="server">
   <asp:ImageMap
       id="mapNavigate"
       ImageUrl="http://www.nfex.ru/style/logo.png"
       Runat="server">
       <asp:RectangleHotSpot
           NavigateUrl="http://www.nfex.ru/" 
           Left="0"
           Top="0"
           Right="100"
           Bottom="50" 
           AlternateText="Navigate to Home" />
       <asp:RectangleHotSpot
           NavigateUrl="http://www.nfex.ru/" 
           Left="100"
           Top="0"
           Right="200"
           Bottom="50" 
           AlternateText="Navigate to Products" />
       <asp:RectangleHotSpot
           NavigateUrl="http://www.nfex.ru/" 
           Left="200"
           Top="0"
           Right="300"
           Bottom="50" 
           AlternateText="Navigate to Services" />
   </asp:ImageMap>
   
   </form>

</body> </html></source>


Set AssociatedControlID for asp:Label

   <source lang="csharp">

<%@ Page Language="VB" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">

   <title>Label Form</title>

</head> <body>

   <form id="form1" runat="server">
   <asp:Label
       id="lblFirstName"
       Text="First Name:"
       AssociatedControlID="txtFirstName"
       Runat="server" />
   
<asp:TextBox id="txtFirstName" Runat="server" />

<asp:Label id="lblLastName" Text="Last Name:" AssociatedControlID="txtLastName" Runat="server" />
<asp:TextBox id="txtLastName" Runat="server" />
   </form>

</body> </html></source>


Specifying sections of an image that are clickable (C#)

   <source lang="csharp">

<%@ page language="C#" %> <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 id="Head1" runat="server">

   <title>ImageMap Control</title>

</head> <body>

   <form id="form1" runat="server">
       <asp:ImageMap ID="Imagemap1" 
                     Runat="server" 
                     ImageUrl="http://www.nfex.ru/style/logo.png" 
                     Width=300 
                     OnClick="Imagemap1_Click" 
                     HotSpotMode="PostBack">
           <asp:RectangleHotSpot Top="0" 
                                 Bottom="225" 
                                 Left="0" Right="150" 
                                 AlternateText="Henri" 
                                 PostBackValue="Henri">
           </asp:RectangleHotSpot>
           <asp:RectangleHotSpot Top="0" Bottom="225" Left="151" Right="300" 
            AlternateText="Sofia" PostBackValue="Sofia">
           </asp:RectangleHotSpot>
       </asp:ImageMap>
   </form>

</body> </html></source>


Specifying sections of an image that are clickable (VB)

   <source lang="csharp">

<%@ Page Language="VB"%> <script runat="server">

   Protected Sub Imagemap1_Click(ByVal sender As Object, _
      ByVal e As System.Web.UI.WebControls.ImageMapEventArgs)
         
         Response.Write("You selected: " & e.PostBackValue)
   End Sub

</script> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server">

   <title>ImageMap Control</title>

</head> <body>

   <form id="form1" runat="server">
       <asp:ImageMap ID="Imagemap1" 
                     Runat="server" 
                     ImageUrl="http://www.nfex.ru/style/logo.png" 
                     Width=300 
                     OnClick="Imagemap1_Click" 
                     HotSpotMode="PostBack">
           <asp:RectangleHotSpot Top="0" 
                                 Bottom="225" 
                                 Left="0" 
                                 Right="150" 
                                 AlternateText="Henri" 
                                 PostBackValue="Henri">
           </asp:RectangleHotSpot>
           <asp:RectangleHotSpot Top="0" 
                                 Bottom="225" 
                                 Left="151" 
                                 Right="300" 
                                 AlternateText="Sofia" 
                                 PostBackValue="Sofia">
           </asp:RectangleHotSpot>
       </asp:ImageMap>
   </form>

</body> </html></source>