ASP.NET Tutorial/ASP.net Controls/ImageMap
Содержание
- 1 Called when hot spot has HotSpotMode=PostBack
- 2 ImageMap Control Test
- 2.1 ImageMap Control PostBack
- 2.2 ImageMap Test
- 2.3 Important properties, events and methods of ImageMap control
- 2.4 Mark asp:ImageMap with asp:RectangleHotSpot
- 2.5 Set AssociatedControlID for asp:Label
- 2.6 Specifying sections of an image that are clickable (C#)
- 2.7 Specifying sections of an image that are clickable (VB)
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>