ASP.NET Tutorial/ASP.net Controls/ImageMap

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

Called when hot spot has HotSpotMode=PostBack

<%@ 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">
    <div id="container">
    <h1>ImageMap Control Test</h1>
    <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>
    <br />
    <asp:Label ID="labMessage" runat="server"></asp:Label>
    
    </div>
    </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;
  }
}


ImageMap Control PostBack

<%@ 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">
    <div>
    <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>
    <br />
    <asp:TextBox
        id="txtText"
        TextMode="MultiLine"
        Columns="40"
        Rows="5"
        Runat="server" />
    </div>
    </form>
</body>
</html>


ImageMap Test

<%@ 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">
    <div>
        <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>
        <br />
        <br />
        <asp:Label ID="lblInfo" runat="server" Font-Bold="True" Font-Names="Verdana"></asp:Label>
    
    </div>
    </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;
  }
}


Important properties, events and methods of ImageMap control

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">
    <div>
    <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>
    </div>
    </form>
</body>
</html>


Mark asp:ImageMap with asp:RectangleHotSpot

<%@ 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">
    <div>
    
    <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>
    
    </div>
    </form>
</body>
</html>


Set AssociatedControlID for asp:Label

<%@ 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">
    <div>
    
    <asp:Label
        id="lblFirstName"
        Text="First Name:"
        AssociatedControlID="txtFirstName"
        Runat="server" />
    <br />
    <asp:TextBox
        id="txtFirstName"
        Runat="server" />
        
    <br /><br />    
    
    <asp:Label
        id="lblLastName"
        Text="Last Name:"
        AssociatedControlID="txtLastName"
        Runat="server" />
    <br />
    <asp:TextBox
        id="txtLastName"
        Runat="server" />
    
    </div>
    </form>
</body>
</html>


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

<%@ 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>


Specifying sections of an image that are clickable (VB)

<%@ 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>
Источник — «http://nfex.ru/index.php?title=ASP.NET_Tutorial/ASP.net_Controls/ImageMap&oldid=3419»