15.Thêm một chút về siêu liên kết bằng hình ảnh

1.Bài học

Trong các bài học trước, bạn đã học được cách tạo các siêu liên kết bằng hình ảnh. Bài này sẽ cung cấp cho bạn tạo ra nhiều siêu liên kết từ cùng một hình ảnh bằng cách chia hình ảnh đó thành các vùng, mỗi vùng liên kết tới một trang Web khác nhau. Trước hết mời bạn xem ví dụ sau :

- Với hình ảnh như sau :

- Sau khi được khoanh vùng và tạo các siêu liên kết, bây giờ, ảnh trên sẽ được liên kết tới nhiều trang Web khác, bạn hãy thử click vào các tên tương ứng trên ảnh và xem kết quả.

Ðể tạo ra được một hình ảnh với nhiều liên kết, tới nhiều trang Web khác nhau, HTML cung câp cho chúng ta tag <map>, cách làm như sau :

1.Chuẩn bị một hình ảnh để tạo các siêu liên kết : Trong ví dụ trên, ảnh có tên là : lienket.jpg, khi đưa hình ảnh này vào trang Web, trong tag <img> bạn sử dụng thuộc tính usemap như sau :

<img src = "lienket.jpg" usemap = "map_name">

trong đó map_name là phần mà bạn định nghĩa các vùng của ảnh để từ đó tạo các siêu liên kết.

2.Ðịnh nghĩa các vùng để tạo siêu liên kết : Ðể tạo các vùng ta sử dụng tag <map> như sau :

<map name = "map_name">

<area shape = "rect" coords = "x1,y1,x2,y2" href = "URL">

<area shape = "rect" coords = "x4,y4,x5,y5" href = "URL">

....

</map>

Trong đó tag <area> định nghĩa một vùng có hình là thuộc giá trị của thuộc tính shape = "", có toạ độ là giá trị của thuộc tính coords = "", trong ví dụ trên vùng tạo siêu liên kết là vùng hình chữ nhật (rect) có toạ độ góc trên bên trái là x1,y1 toạ độ góc dưới bên phải là x2,y2 và liên kết tới trang Web là giá trị của thuộc tính href = ""

Ðoạn mã HTML của ví dụ trên như sau :

<map name="FPMap0">
<area href="http://www.hut.edu.vn" shape="rect" coords="0, 10, 140, 34">
<area href="http://www.vnn.vn" shape="rect" coords="13, 40, 93, 62">
<area href="http://www.tlnet.com.vn" shape="rect" coords="33, 77, 173, 100">
<area href="http://www.netnam.vn" shape="rect" coords="53, 108, 157, 132">
<area href="http://www.fpt.vn" shape="rect" coords="71, 135, 146, 158">
</map>
<img border="0"src="Image/lienket.jpg" usemap="FPMap0" width="180"height="162">

15.2.Thực hành

Bây giờ bạn hãy chuẩn bị một hình ảnh và dùng tag <map>, và thử tạo một trang Web có các siêu liên kết xuất phát từ một hình ảnh như trong bài học. Chúc bạn thành công.