Lưu ý : Nếu bạn chưa có tài liệu từ những bài trước, hãy download ngay bây giờ. Bạn cũng có thể xem trước trang kiểm tra để biết browser của bạn có hổ trợ những tag được sử dụng trong bài này không.
Trong bài 7a chúng ta đã biết làm thế nào để viết HTML cho việc đặt một hình ảnh inline trong trang Web, và trong bài 8e chúng ta cũng đã biết rằng có thể làm cho toàn bộ hình ảnh hoạt động như là một siêu liên kết đến một mục có liên quan khác. Từ những ngày đầu tiên của Web, đã có một cách để những phần khác nhau trong một hình ảnh inline trở thành siêu liên kết -- được biết dưới tên gọi là "Bản đồ hình ảnh liên kết" (clickable image map).
Nhưng mãi cho đến thời gian gần đây, bản đồ hình ảnh liên kết vẫn đòi hỏi một vài thứ được xử lý từ trên web server. Đây là cách hoạt động của nó:
Đây là một tiến trình về phía server; một tiến trình khá hiệu quả và server có thể xử lý nó trong vài phần giây. Nhưng nó cũng có nghĩa là sử dụng một bản đồ hình ảnh liên kết luôn luôn phải truy xuất vào server.
Spyglass là browser đầu tiên có khả năng xử lý việc tính toán và truyền chính xác URL dựa trên các tọa độ mà việc này được thực hiện ngay bên trong phần HTML của trang. Đây là một tiến trình về phía client. Tất cả việc làm chúng ta vừa nói ở trên bây giờ chỉ được giải quyết nhờ vào browser và phần HTML của trang! Để biết thêm chi tiết về bản đồ hình ảnh, hãy xem Imagemap Help Page (IHiP).
Dạng HTML cho một bản đồ hình ảnh liên kết về phía client (client-side clickable image map) là:
trong đó image.gif là tên tập tin hình ảnh và map_name là một liên kết anchor (xem bài 8d) ở đâu đó trong cùng tập tin HTML và có dạng:
: :
Mỗi dòng trong tag xác định một vùng "nóng" khác nhau dựa trên các toạ độ được chỉ định bằng coords=. Trị x1,y1 cho biết tọa độ tính theo chiều ngang và chiều cao của điểm ở góc trên bên trái (tính tương đối so với góc trên bên trái của toàn hình ảnh), còn x2,y2 cho biết tọa độ tính theo chiều ngang và chiều cao của điểm ở góc dưới bên phải. URL1, URL2, ... là các URL (hoặc tên tập tin cục bộ) cho vùng tương ứng khi được click.
Chú ý: Để chỉ định các tọa độ cho vùng nóng, bạn cần sử dụng một vài loại chương trình đồ họa. Yahoo có vài trình tiện ích khác giúp bạn làm việc này dễ dàng hơn. Với bài này, chúng tôi sẽ cung cấp sẵn các tọa độ chính xác cho bạn.
Trong bài này chúng ta sẽ thêm vào trang Volcano Terminology (tập tin term.htm) một hình ảnh chỉ ra các các núi lửa khác nhau đã hoạt động lại. Mỗi vị trí trong hình sẽ tạo siêu liên kết đến một web site bên ngoài. Ngoài ra chúng ta sẽ tạo thêm hai liên kết nữa đến các tập tin riêng (cục bộ).
The explosiveness of an observed volcanic eruption is estimated by the calculated force of the eruption. Experiments have shown that when water comes in contact with hot magma, the eruption is much stronger- this is known as hydro-volcanism.
For pre-historic eruptions, the explosiveness is estimated by the degree of fragmentation of small volcanic particles. A more explosive eruption will "shatter" volcanic tephra much more then a less explosive eruption.
Return to Volcano Web
Volcano Web : Volcano Terminology : Explosiveness
cre-ated by Lorrie Lava, lava@pele.bigu.edu Volcanic Studies, Big University
last modified: April 1, 1995
URL: http://www.bigu.edu/web/explode.htm
The height of a volcanic eruption cloud (in kilometers) is taken f-rom direct observation or f-rom estimates based upon historic accounts.
For pre-historic eruptions, this scale is calculated based upon the dispersal of the volcanic products- i.e how far and wide they are scattered. Volcanic eruptions that have very tall columns will spread tephra far and wide.
Return to Volcano Web
Volcano Web : Volcano Terminology : Height of Eruption Column
cre-ated by Lorrie Lava, lava@pele.bigu.edu Volcanic Studies, Big University
last modified: April 1, 1995
URL: http://www.bigu.edu/web/height.htm
"), thêm đoạn HTML sau:
There are many different types of volcanic eruptions and landforms. They can be classified according to the degree of "explosiveness" and the height of the eruption column:
Investigate each type by clicking on a picture
Chú ý: Chúng ta đã thêm vào một hình ảnh inline cùng với việc tham khảo một tập các tọa độ kết hợp với tên "volcmap". Tag
... đưa hình ảnh vào giữa trang (xem bài 20). Thuộc tính border=0 bên trong tag hủy bỏ việc thể hiện hộp bao quanh hình ảnh siêu liên kết.
Chú ý: Bạn nên biết rằng 5 trong 7 vùng được định nghĩa kết nối đến các site internet ở xa. Hai cái còn lại đến các tài liệu cục bộ mà chúng ta sẽ tạo ra trong bước kế tiếp.
Cất lại tài liệu này trong cùng thư mục với các tập tin HTML khác và gọi nó là explode.htm
Cất lại tài liệu này trong cùng thư mục với các tập tin HTML và gọi nó là height.htm
Bạn nên kiểm tra trang web của bạn với ví dụ mẫu để biết trang bản đồ hình ảnh liên kết nên được thấy như thế nào.
Cần nhớ rằng đây không phải là sự phát triển mới của HTML, bạn nên nghĩ đến việc có những người xem sử dụng một web browser không hổ trợ client-side image maps. Tài liệu của NetScape cho vài ví dụ để xử lý trường hợp này. Nếu bạn sử dụng bản đồ hình ảnh liên kết về phía server, bạn có thể dùng nó cho các browser không hổ trợ việc thông dịch về phía client, khi đó nó phải tham khảo đến server. Chúng tôi đã sử dụng cách này cho bản đồ hình ảnh liên kết của chúng tôi tại Maricopa Community Colleges.
Với trường hợp của chúng ta, chúng ta có thể tạo một trang đặc biệt để thông báo cho các web browser không có hổ trợ bản đồ hình ảnh liên kết về phía client:
Apparently your web browser does not support client-side image maps. You can still reach the information by following these links:
Explosiveness
Return toVolcano Web
Volcano Web : Volcano Terminology : No Image Map
cre-ated by Lorrie Lava, lava@pele.bigu.edu Volcanic Studies, Big University
last modified: April 1, 1995
URL: http://www.bigu.edu/web/nomap.htm
Cất lại tập tin này với tên nomap.htm
Chú ý: Hãy xem cách chúng ta cung cấp cho người xem cùng một loại thông tin như trong bản đồ hình ảnh liên kết. Một trang web tốt không giới hạn bớt thông tin đối với một người nào cả vì họ có quyền sử dụng các loại browser khác nhau.
và thay nó thành
Chú ý: Bạn có thể phân tích thêm về HTML này - nếu web browser có thể hiểu bản đồ hình ảnh liên kết về phía client, nó sẽ thực hiện điều đó. Ngược lại, toàn bộ hình ảnh là một siêu liên kết đến trang nomap.htm page.
So sánh các trang web của bạn với ví dụ mẫu để biết nó nên xuất hiện như thế nào. Nếu các trang của bạn khác với trang mẫu hay các liên kết siêu văn bản hoạt động không đúng, hãy xem lại các văn bản bạn đã đánh vào trong trình soạn thảo.
Các vấn đề nên xem lại cho bài này:
Chú ý rằng sự tham khảo các thông tin tọa độ trong tag không nhất thiết phải ở trong cùng một tài liệu HTML. Thuộc tính usemap= có thể liên kết đến một tập tin HTML khác - ví dụ như:
trong đó maps.htm có thể là một tập tin chứa các tag cho một vài tập tin. Bạn có thể làm được điều này không?
Hãy xét trường hợp bạn tạo ra vài (hay nhiều) trang mà ở trên đỉnh của trang có một hình với vài button liên kết đến các trang khác. Nếu bạn sử dụng cách này, bạn có thể tham khảo đến chỉ một hình và một tập tin có các tọa độ. Khi bạn phải thay đổi thanh hoa tiêu của bạn (một hình mới? một sự thay đổi URL cho một button?) bạn chỉ cần điều chỉnh một tập tin! (so sánh với việc thay đổi các tag nếu chúng được thêm vào mỗi trang web).
Tìm chỗ trong trang web của bạn có thể thêm vào một clickable image map trong bài hay trong phần hoa tiêu. Đừng bao giờ vứt bỏ ngay bản cũ! Bạn phải làm thử vài lần để xác định được các vùng "nóng" (bạn có thể phỏng đoán nếu bạn thật sự liều mạng). Theo các ví dụ trong bài này để viết HTML cho bản đồ hình ảnh liên kết.
Ý kiến bạn đọc
Những tin cũ hơn