Image Link trong HTML

---

---

---

Chúng ta đã học cách để tạo một link sử dụng văn bản. Chương này chúng ta sẽ học làm thế nào để tạo một link sử dụng hình ảnh.

Ví dụ Image Link trong HTML

Dưới đây là một ví dụ về sử dụng hình ảnh như một siêu liên kết. Chúng ta chỉ cần sử dụng một hình ảnh bên trong một siêu liên kết tại vị trí của văn bản.

Click vao link sau:
 
    

Kết quả là khi bạn nhấn chuột vào hình ảnh, bạn sẽ tới trang được liên kết bởi hình ảnh đó.

Đó là cách đơn giản nhất để tạo ra một đường link sử dụng hình ảnh. Tiếp theo chúng ta học cách tạo các Đường link sử dụng hình ảnh có độ nhạy chuột - Mouse-Sensitive Image Links.

Hình ảnh nhạy chuột trong HTML

Chuẩn HTML và XHTML cung cấp một tính năng mà cho bạn nhúng nhiều link khác nhau trong một hình ảnh đơn. Bạn có thể tạo ra các link khác nhau trên cơ sở các liên kết khác nhau có trên hình ảnh. Khi các link khác nhau được đính kèm tới các tọa độ khác nhau, chúng ta nhấn chuột vào các phần khác nhau của ảnh để mở các trang tọa độ. Những hình ảnh có độ nhạy chuột như vậy được gọi như các Image Map.

Có 2 cách để tạo ra Image Map:

• Image Map trên Server - Được kích hoạt bởi các thuộc tính imap của thẻ và yêu cầu quyền truy cập vào một Server và các ứng dụng xử lý liên quan đến Image Map.
• Image Map trên Client - Được tạo ra với thuộc tính usemap của thẻ , song song tương ứng với các thẻ

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ẻ để 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ẻ 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 toá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:

Nó được tạo ra bởi đoạn trích code sau:

Click vao link sau:
 
    

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:

../?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.

Image Map trên Client

Image Map trên Client được cho phép bởi thuộc tính usemap của thẻ và được định nghĩa bởi các thẻ mở rộng đặc biệt

Hình ảnh dự định để tạo bản đồ được chèn vào trang sử dụng thẻ được coi như là một hình ảnh thông thường, trừ khi nó mang thêm một thuộc tính là usemap. Giá trị của thuộc tính usemap được sử dụng để thẻ

Thẻ thẻ map xác định hình khối và tọa độ để xác định ranh giới của mỗi lần nhấn chuột vào hình ảnh. Sau đây là ví dụ:

Tim kiem va click vao mot vi tri tren hinh anh sau

Hệ tọa độ trong HTML

Giá trị thực sự của các tọa độ phụ thuộc hoàn toàn vào hình khối trong câu hỏi. Dưới đây là tóm tắt sơ lược.

rect = x₁ , y₁ , x₂ , y₂

x₁ và y₁ là các tọa độ góc trên bên trái của hình chữ nhật; x₂ và y₂ là các tọa độ góc dưới bên phải.

circle = x_c , y_c , radius

x_c và y_c là các tọa độ ở trung tâm của vòng tròn, và radius là bán kính vòng tròn. Một vòng tròn trung tâm tại 200,50 với bán kính 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 xác định các đỉnh của hình đa giác, với một dòng được vẽ từ một điểm đến điểm khác. Và các điểm rộng nhất có thuộc tính coords="20,20,40,40,20,60,0,40".

Tất cả các tọa độ đều có quan hệ với góc trên bên trái của ảnh (0,0). Mỗi hình có một URL tương ứng. Bạn có thể sử dụng các hình ảnh trong phần mềm để thấy tọa độ của các vị trí khác nhau.

---

---

---