HTMLSTUDY :: Bai 21

HTMLStudy

Home » Tạo các siêu liên kết qua Sơ đồ ảnh

BÀI 21: TẠO CÁC SIÊU LIÊN KẾT QUA SƠ ĐỒ ẢNH

| BÀI HỌC

Trong bài 7, tôi đã giới thiệu đến bạn phương pháp đưa các Siêu liên kết vào trang Web bằng thẻ <A>:

Trong phần này, tôi sẽ giới thiệu phương pháp tạo các Siêu liên kết trong hình ảnh. Chẳng hạn khi đưa con trỏ chuột vào một vị trí trong ảnh thì tại đó con trỏ chuột chuyển thành hình bàn tay và khi click vào đó, nó sẽ dẫn đến một trang khác qua Siêu liên kết được định sẳn. Để làm được việc này, bạn hãy làm quen với Sơ đồ ảnh.

Sơ đồ ảnh là một hình ảnh (dạng GIF hay JPEG) được sử dụng để chuyển đến các địa chỉ URL khác. Các vùng hay các thành phần khác nhau của ảnh được khai báo để đưa người dùng đến các URL khác nhau.

Trước đây bạn có thể sử dụng hình ảnh để tạo Siêu liên kết bằng cú pháp:

Tuy nhiên, Siêu liên kết này sẽ được chuyển đến nếu như bạn click lên bất kỳ vùng nào của ảnh. Thế nhưng, không phải lúc nào cũng cần điều đó, đôi khi bạn chỉ muốn Siêu liên kết được chuyển đến khi click vào một phần nào đó của ảnh thôi. Chẳng hạn click vào hình nước Việt nam trên tấm bản hình bản đồ Thế giới thì sẽ đưa đến trang giới thiệu Việt Nam.

Để làm được điều này, bạn thực hiện theo cú pháp sau:

Trong đó, filename là tên file hình ảnh cân liên kết, còn mapname là tên của Sơ đồ ảnh chứa dữ liệu vùng liên kết của ảnh. Sơ đồ ảnh này được viết như sau:

Trong đó:

mapname là tên của sơ đồ ảnh, tên này sẽ được gọi trong thẻ <IMG> liên kết với hình ảnh.
kiểu là loại hình dạng của thành phần ảnh. Gồm 3 loại: rect (hình chữ nhật), circle (hình tròn), poly (hình da diện).
url là địa chỉ Siêu liên kết được trỏ tới.
các_tọa_độ là tọa độ vị trí các điểm giới hạn của vùng ảnh. Góc trái trên là tọa độ chuẩn (0,0). Được định nghĩa tùy theo loại kiểu mà bạn chọn.

Dưới đây là cách nhập các_tọa_độ cho thuộc tính COORDS:

SHAPE="rect" COORDS="x1,y1,x2,y2": góc trái trên (x1,y1) và góc phải dưới (x2,y2)
SHAPE="circle" COORDS="x,y,r": tâm đường tròn (x,y) và bán kính r
SHAPE="poly" COORDS="x1,y1,x2,y2,x3,y3,x4,y4...": tọa độ các điểm của đa giác

Sơ đồ ảnh này thường được đưa vào phần <HEAD> của trang tài liệu HTML, nó được liên kết với hình ảnh qua mapname.

Ví dụ:

Sau đây là ví dụ cụ thể cho bài học này. Nếu bạn nhấn vào hình chữ nhật, nó sẽ trỏ tới Bài 1, hình tròn là Bài 2 và hình đa diện là Bài 3.

<HTML>
<HEAD>
<TITLE>Tu hoc thiet ke trang Web</TITLE>
<MAP NAME="baihoc">
  <AREA SHAPE="RECT" COORDS="13,10,60,41" HREF="bai01.html">
  <AREA SHAPE="CIRCLE" COORDS="96,41,19" HREF="bai02.html">
  <AREA SHAPE="POLY" COORDS="50,49,84,79,72,90,60,80,47,90,35,81,27,87,19,72,50,49" HREF="bai03.html">
</MAP>
</HEAD>
<BODY BGCOLOR=#000000>
  <IMG SRC="images/picmap.gif" BORDER=0 WIDTH=133 HEIGHT=100 USEMAP="#baihoc">
</BODY>
</HTML>

HTMLStudy

File Edit View Favorites Tools Help

Done

Để dễ dàng lấy được tọa độ các vị trí giới hạn của vùng ảnh, bạn nên sử dụng một tiện ích nhỏ như IMap. Nếu không bạn phải tự "mò" cho đúng tọa độ cần thiết, cách này sẽ hơi khó khăn cho bạn đấy!

« Phân chia hình ảnh để tải nhanh hơn Chèn Applet Java vào tại liệu HTML »