Trang chủ
Bản đồ Hình ảnh Liên kết
Hãy làm cho các phần khác nhau trong một hình ảnh inline hoạt động như một liên kết dựa trên bản đồ hình ảnh của client ...
Mục đích
Sau bài học này bạn có thể:- Hiểu được sự khác nhau giữa tiến trình về phía server (server-side process) và tiến trình về phía client (client-side process).
- Tạo được một hình ảnh inline có những phần khác nhau làm siêu liên kết tới những trang Web, hình ảnh, và những site khác trên Internet.
Bài học
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 8 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 14 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ó:
- Người đọc xem trang có bản đồ hình ảnh liên kết và... nhấn vào phần thấp nhất bên phải của hình ảnh.
- Web browser nói, "À! Tôi đã nhận được một sự nhấn chuột trên hình này! Tôi gởi một thông báo đến Web server - một người nào đó đã click vào tọa độ này của hình."
- Web server nói, "Hmmm. Tôi đã nhận được các tọa độ của hình này - Các tọa độ này được dò tìm trong một tập tin do tập tin HTML qui định... Tập tin này nói, Được rồi, các tọa độ này được tìm thấy trong một vùng chữ nhật và hãy gởi đến người xem URL này của tôi" Rồi server gởi thông tin này lại cho web browser.
- Web browser nói, "Đồng ý! server đã nói hãy đến URL này - Chúng ta đi đến đó!"
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à:
<img src="image.gif" usemap="#map_name">
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: <map name="map_name">
<area shape="rect" coords="x1,y1,x2,y2" HREF=URL1>
<area shape="rect" coords="x1,y1,x2,y2" HREF=URL2>
:
:
</map>
Mỗi dòng trong tag <map>...</map> 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ộ).
- Trước tiên, bạn cần chép lại một bản sao của tập tin ảnh dùng Trung tâm Download Hình ảnh Bài 23. Cất tập tin này thành volc.jpg và chắc chắn rằng bạn đã lưu nó vào trong subdirectory/folder pictures.
- Mở tập tin term.htm trong trình soạn thảo.
- Phía dưới đoạn cuối cùng ("...a historically active volcano on
the island of Martinique. <p>"), 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: <p> <center> <font size=+2> Investigate each type by clicking on a picture </font><br> <img src="../pictures/volc.jpg" usemap="#volcmap" border=0> <p> </center>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 <center>...</center> đưa hình ảnh vào giữa trang (xem bài 20). Thuộc tính border=0 bên trong tag <img> hủy bỏ việc thể hiện hộp bao quanh hình ảnh siêu liên kết.
- Kế tiếp chúng ta sẽ thêm đoạn HTML cho các tọa độ của bản đồ liên kết.
Đoạn này có thể để bất kỳ chỗ nào trong tài liệu HTML -
nó là phần HTML không được hiển thị trong web browser.
Chúng tôi đề nghị đặt nó ngay dưới phần HTML bạn đã thêm vào trong bước
vừa rồi:
<map name="volcmap"> <area shape="rect" href=" http://volcano.und.nodak.edu/vwdocs/frequent_questions/grp7/europe/question308.html" coords="48,46,204,153"> <area shape="rect" href="explode.html" coords="0,66,26,227"> <area shape="rect" href="height.html" coords="95,283,378,309"> <area shape="rect" href="http://www.geo.mtu.edu/volcanoes/pinatubo/" coords="321,154,468,261"> <area shape="rect" href="http://www.geo.mtu.edu/~boris/STROMBOLI_main.html" coords="172,155,318,274"> <area shape="rect" href="http://www.soest.hawaii.edu/hvo/" coords="36,155,168,276"> <area shape="rect" href="http://www.geo.mtu.edu/volcanoes/santamaria/" coords="90,3,343,123"> </map>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ập tin term.htm.
- Bây giờ chúng ta sẽ tạo ra hai tập tin HTML nữa được liên kết từ image map.
Tạo ra một tài liệu mới trong trình soạn thảo và đặt vào đó:
<html> <head> <title>Explosiveness</title> </head> <BODY BGCOLOR=#000000 TEXT=#EEEEBB LINK=#44DDFF VLINK=#00FF88> <H5>Volcano Web / <A HREF="index.htm">Index</A> / <A HREF="term.htm">Volcano Terminology</A> / </H5> <h1 align=center>Explosiveness</h1> The <b>explosiveness</b> 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 <b>hydro-volcanism</b>. <p> 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. <p> <a href="term.htm"> <img src="../pictures/left.gif" alt="** " border=0> Return to <i>Volcano Web</i></a> <HR> <ADDRESS> <B><A HREF="index.htm">Volcano Web</A> : <A HREF="term.htm">Volcano Terminology</A> : Explosiveness</B> <p> created by Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu"> lava@pele.bigu.edu</A><br> Volcanic Studies, <A HREF="http://www.bigu.edu/"> Big University</A><p> <TT>last modified: April 1, 1995</TT> </ADDRESS> <p> <tt>URL: http://www.bigu.edu/web/explode.htm</tt> <p> </body> </html>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 - Bây giờ tạo tài liệu thứ hai và đưa vào đó:
<html> <head> <title>Height of Eruption Column</title> </head> <BODY BGCOLOR=#000000 TEXT=#EEEEBB LINK=#44DDFF VLINK=#00FF88> <H5>Volcano Web / <A HREF="index.htm">Index</A> / <A HREF="term.htm">Volcano Terminology</A> / </H5> <h1 align=center>Height of Eruption Column</h1> The <b>height</b> of a volcanic eruption cloud (in kilometers) is taken from direct observation or from estimates based upon historic accounts. <p> For pre-historic eruptions, this scale is calculated based upon the <b>dispersal</b> 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. <p> <a href="term.htm"> <img src="../pictures/left.gif" alt="** " border=0> Return to <i>Volcano Web</i></a> <HR> <ADDRESS> <B><A HREF="index.htm">Volcano Web</A> : <A HREF="term.htm">Volcano Terminology</A> : Height of Eruption Column</B> <p> created by Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu"> lava@pele.bigu.edu</A><br> Volcanic Studies, <A HREF="http://www.bigu.edu/"> Big University</A><p> <TT>last modified: April 1, 1995</TT> </ADDRESS> <p> <tt>URL: http://www.bigu.edu/web/height.htm</tt> <p> </body> </html>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ây giờ mở tập tin term.htm trong browser của bạn. Hình các núi lửa khác nhau sẽ xuất hiện và khi bạn di chuyển chuột qua các vùng khác nhau của hình ảnh hay vài chỗ cuối trang, dấu nhắc sẽ phải chuyển thành hình "bàn tay", tại đó URL của vùng "nóng" cũng phải được hiển thị.
Điều cần xem lại
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:
- Trước hết chúng ta cần tạo một tập tin HTML mới gọi là nomap.htm.
Mở tập tin này trong trình soạn thảo và đưa vào đó:
<html> <head> <title>No Image Map Available</title> </head> <BODY BGCOLOR = #000000 TEXT=#EEEEBB LINK=#44DDFF VLINK=#00FF88> <H5>Volcano Web / <A HREF="index.htm">Index</A> / <A HREF="term.htm">Volcano Terminology</A> / </H5> <h1 align=center>Sorry!</h1> Apparently your web browser does not support client-side image maps. You can still reach the i nformation by following these links: <ul> <li><A HREF="explode.htm">Explosiveness</A> <li><A HREF="height.htm">Height of Eruption Column</A> <p> <li><A HREF=" http://volcano.und.nodak.edu/vwdocs/frequent_questions/grp7/europe/question308.html" >Surtseyan</A> <li><A HREF="http://www.geo.mtu.edu/volcanoes/santamaria/">Phreato-Plinian</A> <li><A HREF="http://www.soest.hawaii.edu/hvo/">Hawaiian</A> <li><A HREF="http://www.geo.mtu.edu/~boris/STROMBOLI_main.html">Strombolian</A> <li><A HREF="http://www.geo.mtu.edu/volcanoes/pinatubo/">Plinian</A> </ul> <p> <a href="term.htm"> <img src="../pictures/left.gif" alt="** " border=0> Return to<i>Volcano Web</i></a> <HR> <ADDRESS> <B><A HREF="index.htm">Volcano Web</A> : <A HREF="term.htm">Volcano Terminology</A> : No Image Map</B> <p> created by Lorrie Lava, <A HREF="mailto:lava@pele.bigu.edu"> lava@pele.bigu.edu</A><br> Volcanic Studies, <A HREF="http://www.bigu.edu/">Big University</A><p> <TT>last modified: April 1, 1995</TT> </ADDRESS> <p> <tt>URL: http://www.bigu.edu/web/nomap.htm</tt> <p> </body> </html>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.
- Bây giờ mở tập tin term.htm trong trình soạn thảo.
- Tìm dòng sau:
<img src="../pictures/volc.jpg" usemap="#volcmap" border=0>và thay nó thành
<a href="nomap.htm"> <img src="../pictures/volc.jpg" usemap="#volcmap" border=0> </a>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.
- Cất lại tập tin này và Nạp lại nó vào web browser của bạn.
Kiểm tra lại Công việc của Bạn
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.Xem lại
Các vấn đề nên xem lại cho bài này:- Sự khác nhau giữa bản đồ hình ảnh liên kết về phía client và bản đồ hình ảnh liên kết về phía server?
- Tag <map>...</map> dùng làm gì?
- Bạn giải quyết như thế nào khi một web browser không hiểu bản đồ hình ảnh liên kết về phía client?
Thông tin bổ sung
Chú ý rằng sự tham khảo các thông tin tọa độ trong tag <map>...</map> 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ư: <img src="../pictures/buttonbar.gif" usemap="maps.htm#bmap3">
trong đó maps.htm có thể là một tập tin chứa các tag
<map>...</map> 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 <map>...</map> nếu chúng được thêm vào mỗi trang web).
