Chúng ta đã học cách để tạo một liên kết (link) bằng cách sử dụng văn bản hay còn gọi lại Text Link. Bài này chúng ta sẽ học làm thế nào để tạo một liên kết (link) bằng cách 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.
<!DOCTYPE html> <html> <head> <title>Ví dụ image link trong HTML</title> </head> <body> <p>Click vao link sau:</p> <a href="/html" target="_self"> <img src="/images/logo/html-tutorial.png" alt="Học HTML Online - KienThucLapTrinh" border="0"/> </a> </body> </html>
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 đó.
Click vao link sau:
Đó 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.
Nội dung chính
Nhiều liên kết trên 1 hình ảnh 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 gán nhiều liên kế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ẻ <img> 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ẻ <img> , song song tương ứng với các thẻ <map> và <area>.
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 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:
Click vao link sau:
Nó được tạo ra bởi đoạn trích code sau:
<!DOCTYPE html> <html> <head> <title>Ví dụ Image Map trong HTML</title> </head> <body> <p>Click vao link sau:</p> <a href="/html" target="_self"> <img ismap src="/images/html/image-link-trong-html.jpg" alt="KienThucLapTrinh HTML" 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:
/html?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?
Image Map trên Client
Image Map trên Client được cho phép bởi thuộc tính usemap của thẻ <img /> và được định nghĩa bởi các thẻ mở rộng đặc biệt <map> and <area>.
Hình ảnh dự định để tạo bản đồ được chèn vào trang sử dụng thẻ <img /> đượ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ẻ <map> liên kết với thẻ map và image. Thẻ <map> cùng với thẻ <area> xác định tất cả các tọa độ ảnh và link tương ứng.
Thẻ <area> 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ụ:
<!DOCTYPE html> <html> <head> <title>Vi du USEMAP trong HTML</title> </head> <body> <p>Tim kiem va click vao mot vi tri tren hinh anh sau</p> <img src="/images/html/image-link-trong-html.jpg" alt="HTML Map" border="0" usemap="#html"/> <!-- Tao Image Map --> <map name="html"> <area shape="circle" coords="80,80,20" href="/html5" alt="HTML5 Link" target="_self" /> <area shape="rect" coords="5,5,40,40" alt="HTML Link" href="/html" target="_self" /> </map> </body> </html>
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 = x1 , y1 , x2 , y2
x1 và y1 là các tọa độ góc trên bên trái của hình chữ nhật; x2 và y2 là các tọa độ góc dưới bên phải.
- circle = xc , yc , radius
xc và yc 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 = x1 , y1 , x2 , y2 , x3 , y3 , ... xn , yn
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.