Sử dụng ISMAP trong HTML

Để sử dụng một hình ảnh với thuộc tính ismap, đơn giản bạn chỉ cần đặt hình ảnh vào bên trong một siêu liên kết (hyperlink) và sử dụng thuộc tính ismap mà làm cho nó thành hình ảnh đặc biệt và khi người sử dụng click vào một số vị trí trong hình ảnh, trình duyệt truyền tọa độ của con trỏ chuột song song với địa chỉ URL đã được xác định trong thẻ <a> tới Web server. Server sử dụng tọa độ con trỏ chuột để quyết định tài liệu nào sẽ phân phối tới trình duyệt.

Khi ismap được sử dụng, thuộc tính href của thẻ chứa <a> phải chứa địa chỉ URL của một ứng dụng server như một CGI hoặc PHP script, …, để xử lý yêu cầu đến dựa trên tọa độ đã truyền.

Tọa độ của con trỏ chuột được tính bằng giá trị pixel trên màn hình từ góc trên cùng bên trái của hình ảnh, bắt đầu với (0,0). Tọa độ, được đứng trước bởi một dấu hỏi (?), được thêm tới phần cuối của URL.

Ví dụ, nếu người sử dụng nhấn vào vị trí mà có tọa độ (20,30) của hình ảnh sau:

Click following link

Mà được tạo bởi đoạn trích dẫn code sau:

<!DOCTYPE html>
<html>
<head>
<title>ISMAP Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="../index.jsp" target="_self"> 
   <img ismap src="./images/logo3.png" alt="Tutorials Point" border="0"/> 
</a>
</body>
</html>

Thì sau đó trình duyệt gửi các tham số tìm kiếm sau tới Web server:

../index.jsp?20,30

Bây giờ tọa độ được truyền có thể được xử lý theo một trong hai cách:

Sử dụng một CGI file (hoặc một PHP file nếu bạn không sử dụng CGI file)
Sử dụng một map file.

Quảng cáo

Một CGI hoặc PHP file

Sau đây là Perl code cho ismap.cgi script mà đang được sử dụng trong ví dụ trên:

#!/usr/bin/perl

local ($buffer, $x, $y);
# Read in text
$ENV{'REQUEST_METHOD'} =~ tr/a-z/A-Z/;
if ($ENV{'REQUEST_METHOD'} eq "GET")
{
   $buffer = $ENV{'QUERY_STRING'};
}
# Split information into name/value pairs
($x, $y) = split(/,/, $buffer);

print "Content-type:text/html\r\n\r\n";
print "<html>";
print "<head>";
print "<title>ISMAP</title>";
print "</head>";
print "<body>";
print "<h2>Passed Parameters are : X = $x, Y = $y </h2>";
print "</body>";
print "</html>";

1;

Bởi vì bạn có thể phân tích các tọa độ đã truyền, bạn có thể đặt một danh sách các điều kiện nếu – if conditions để kiểm tra các tọa độ được truyền và gửi tài liệu được liên kết chính xác trở lại trình duyệt.

Một map file

Một map file có thể được sử dụng để lưu vị trí của các HTML file mà bạn muốn reader (thiết bị đọc) xử lý khi khu vực giữa các tọa độ đã xác định được click.

Bạn giữ file mặc định tại vị trí đầu tiên và các file khác được đặt tương ứng với các tọa độ đa dạng như được chỉ trong ismap.map file.

default http://www.tutorialspoint.com
rect    http://www.tutorialspoint.com/html 5,5 64,141
rect    http://www.tutorialspoint.com/css  91,5 127,196
circle  http://www.tutorialspoint.com/javscript  154,150,59

Quảng cáo

Cách này bạn có thể gán các link khác nhau tới phần khác nhau của hình ảnh và khi những tọa độ này được click, bạn có thể mở tài liệu được liên kết. Vì thế, chúng ta cùng viết lại ví dụ trên bởi sử dụng ismap.map file:

<!DOCTYPE html>
<html>
<head>
<title>ISMAP Hyperlink Example</title>
</head>
<body>
<p>Click following link</p>
<a href="/html/ismap.map" target="_self"> 
   <img ismap src="./images/logo.png" alt="Tutorials Point" border="0"/> 
</a>
</body>
</html>

Trước khi thử ví dụ trên, bạn cần chắc chắn rằng Web server của bạn đã yêu cầu định cấu hình để hỗ trợ map file.

Hệ thống tọa độ

Giá trị thực sự của các tọa độ nói chung phụ thuộc vào hình dạng (shape) trong dấu hỏi. Dưới đây, chúng tôi sẽ đưa ra một sự tổng kết. Bạn có thể sử dụng bất kỳ công cụ có sẵn nào như Adobe Photoshop hoặc MS Paint để phát hiện các tọa độ đa dạng có sẵn trên hình ảnh để được sử dụng cho ISMAP.

Một dòng bắt đầu với # là dòng comment. Mỗi dòng không trống khác chứa các giá trị sau:

rect = x₁ , y₁ , x₂ , y₂: x₁ và y₁ các tọa độ của góc trái trên cùng của hình chữ nhật; x₂ and y₂ là các tọa độ của góc phải dưới cùng.
circle = x_c , y_c , radius: x_c và y_c là tọa độ của tâm đường tròn và radius là bán kính đường tròn. Một đường tròn có tâm tại 200,50 với bán kính là 25 sẽ có thuộc tính coords="200,50,25"
poly = x₁ , y₁ , x₂ , y₂ , x₃ , y₃ , ... x_n , y_n: Các cặp x, y định nghĩa các đỉnh của đa giác, với mỗi cạnh được vẽ từ một điểm tới điểm kế tiếp.

Tất cả tọa độ là liên quan tới góc trên cùng bên trái của hình ảnh (mà có tọa độ là 0,0). Mỗi hình dạng có một URL liên quan. Bạn có thể sử dụng bất kỳ phần mềm hình ảnh nào để biết tọa độ của các vị trí khác nhau.

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS.

Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học HTML phổ biến khác tại vietjack.com: