VI DU THE D
Image Map trên Server
Tại đây bạn có thể dễ dàng đăt hình ảnh của bạn vào trong một siêu liên kết và sử dụng thuộc tính ismap tạo các hình ảnh đặc biệt. Khi người sử dụng
nhấn vào một địa điểm trong ảnh, trình duyệt thơng qua các tọa độ của con trỏ chuột cùng với xác định địa chỉ URL trong thẻ <a> để tới Server. Server sử dụng liên kết con trỏ chuột để xác định tài liệu nào (web) được trả lại trình duyệt.
Khi ismap được sử dụng, thuộc tính href chứa trong thẻ <a> phải chứa địa chỉ URL của một ứng dụng Server giống như cgi hoặc PHP script … để xử lý yêu cầu trên cơ sở liên kết đó.
Các liên kết của vị trí chuột được tính tốn bằng Pixel từ góc trên cùng bên trái của ảnh, bắt đầu với (0,0). Các liên kết mà được đặt trước bởi một dấu hỏi sẽ được thêm vào phần cuối của URL.
Ví dụ, nếu một người sử dụng nhấn vào (20,30) từ góc trên cùng bên trái của ảnh:
Click vao link sau:
Nó được tạo ra bởi đoạn trích code sau: <!DOCTYPE html>
<html> <head>
<title>Vi du Image Map trong HTML</title> </head>
<body>
<p>Click vao link sau:</p>
<a href="../index.jsp" target="_self">
<img ismap src="./images/logo3.png" alt="Vietjack Homepage" border="0"/> </a>
</body> </html>
Sau đó trình duyệt gửi các tham số tìm kiếm tới Server mà có thể được xử lý bởi ismap.cgi script hoặc map file và bạn có thể liên kết bất cứ tài liệu (web) nào bạn thích tới những liên kết này:
../index.jsp?20,30
Theo cách này bạn có thể gán các link khác nhau tới các tọa độ khác nhau của hình ảnh và khi các tọa độ được được nhấn chuột vào, bạn có thể mở các web tương ứng. Để hiểu rõ hơn về thuộc tính ismap, bạn có thể theo dõi trong Cách sử dụng Image ismap?
Ghi chú: Bạn sẽ học về chương trình CGI và Perl trong một bài hướng dẫn riêng. Còn ở đây bạn nên tập trung vào HTML.