в 15:30, 26 мая 2010

2010-05-26T15:30:57Z

Admin: 1 версия

2010-05-26T12:00:52Z

1 версия

Новая страница

== 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">
<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;
}
}</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">
<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></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">
<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;
}
}</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">
<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></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">
<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></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">
<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></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>

← Предыдущая	Версия 15:30, 26 мая 2010
(нет различий)

ASP.NET Tutorial/ASP.net Controls/ImageMap - История изменений

в 15:30, 26 мая 2010

Admin: 1 версия