ImageMap cho phép bạn tạo ra 1 bản đồ hình ảnh ở client-side, ImageMap sẽ hiển thị 1 hình ảnh thông thường giống như Image. Tuy nhiên, ImageMap khác ở chỗ là bạn có thể định nghĩa từng vùng trên bản đồ hình ảnh đó, khi bạn click vào những vùng đã được định nghĩa trước thì 1 sự kiện tương ứng sẽ xảy ra, bạn có thể lập trình cho sự kiện đó.
Ví dụ: bạn có thẻ sử dụng ImageMap để tạo ra thanh menu, khi user click vào những vùng khác nhau, từng trang khác nhau sẽ được hiển thị ra. Trong thực tế, khi xây dựng web thì không ai dùng hình ảnh lớn để làm menu, vì nó sẽ rất nặng, làm cho website chạy nặng nề. Thông thường, người ta sẽ cắt hình lớn này thành những hình nhỏ làm menu.
ImageMap sử dụng các control HotSpot để định nghĩa các vùng có thể click vào. Bạn có thể định nghĩa HotSpot bằng 3 cách sau:
- CircleHotSpot: cho phép định nghĩa 1 vòng tròn trên ImageMap
- PolygonHotSpot: cho phép định nghĩa hình đa giác trên ImageMap
- RectangleHotSpot: cho phép định nghĩa hình chữ nhật trên ImageMap
Trong ví dụ sau, bạn sẽ sử dụng ImageMap để làm bản đồ hình ảnh với việc nhận dạng các búp bê
Trang Design:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ImageMap.aspx.cs" Inherits="ImageMap" %>
<!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 runat="server">
<title>asp.net ImageMap: how to use</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h2 style="color:Red">ImageMap</h2>
<asp:Label
ID="Label1"
runat="server"
Font-Size="Medium"
ForeColor="DodgerBlue"
>
</asp:Label>
<br />
<asp:ImageMap
ID="ImageMap1"
runat="server"
ImageUrl="~/Images/Doll.gif"
HotSpotMode="PostBack"
OnClick="ImageMap1_Click"
>
<asp:RectangleHotSpot
Top="0"
Bottom="360"
Left="0"
Right="180"
AlternateText="Green Doll"
PostBackValue="Green Doll"
/>
<asp:RectangleHotSpot
Top="0"
Bottom="360"
Left="181"
Right="360"
AlternateText="Pink Doll"
PostBackValue="Pink Doll"
/>
</asp:ImageMap>
</div>
</form>
</body>
</html>
Code:
public partial class ImageMap : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
if(!Page.IsPostBack)
{
Label1.Text = "Click any doll!";
ImageMap1.BorderWidth = 3;
ImageMap1.BorderStyle = BorderStyle.Double;
ImageMap1.BorderColor = System.Drawing.Color.Crimson;
}
}
protected void ImageMap1_Click(object sender, ImageMapEventArgs e)
{
Label1.Text = "You ckecked: " + e.PostBackValue;
}
}