Cấp bậc tác giả:

DOTNET

Sử dụng ImageMap để tạo ra bản đồ bằng hình ảnh

Được viết bởi QuangIT ngày 25/04/2013 lúc 03:24 PM
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 đó.
  • 0
  • 3120

Sử dụng ImageMap để tạo ra bản đồ bằng hình ảnh


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;  
    }  
}  

ImageMap.gif

ImageMap1.gif

ImageMap2.gif

Nguồn bài viết: Dngaz.com

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML