By GokiSoft.Com| 16:58 22/05/2020|
Tài Liệu HTML

HTML Image Maps - Bản đồ hình ảnh trong HTML

Với bản đồ hình ảnh, bạn có thể tạo các vùng có thể bấm được trên một hình ảnh.



Bản đồ hình ảnh


Thẻ <map> định nghĩa một bản đồ hình ảnh. Một bản đồ hình ảnh là một hình ảnh với các vùng có thể bấm được.

Bấm vào máy tính, điện thoại, hoặc cốc cà phê trong hình ảnh dưới đây:

WorkplaceSunMercuryVenus


ví dụ

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Coffee" href="coffee.htm">
</map>
<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the computer, the phone, or the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
  <area shape="rect" coords="290,172,333,250" alt="Phone" href="phone.htm">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>




Nó làm việc như thế nào?


Ý tưởng ở đằng sau một bản đồ hình ảnh là bạn có thể thực hiện nhiều hành động phụ thuộc vào những nơi mà bạn bấm.

Để tạo một hình bản đồ hình ảnh, và một bản đồ bao gồm các quy tắc thể hiện các vùng có thể bấm được.




Hình ảnh(The Image)


Hình ảnh được chèn sử dụng thẻ <img> .Chỉ khác so với các hình ảnh khác là bạn phải thêm một thuộc tính  usemap .

<img src="workplace.jpg" alt="Workplace" usemap="#workmap">


Giá trị usemap bắt đầu với dấu thăng # theo sau là tên của bản đồ hình ảnh, và được sử dụng để tạo các liên hệ giữa hình ảnh và bản đồ hình ảnh.

Ghi chú: Bạn có thể sử dụng bất kì hình ảnh nào như một bản đồ hình ảnh.




Bản đồ(The Map)


Sau đó thêm một thành phần <map> .

Thành phần  <map> được sử dụng để tạo một bản đồ hình ảnh, và nó được liên kết đến hình ảnh bằng cách sử dụng thuộc tính  name :

<map name="workmap">


Thuộc tính name phải có cùng giá trị với thuộc tính  usemap .

Ghi chú: Bạn có thể chèn thành phần <map> bất kì chỗ nào bạn thích, nó không cần phải được chèn ngay sau hình ảnh.




Khu vực (The Areas)


Sau đó thêm các khu vực có thể bấm.

Một khu vực có thể bấm được định nghĩa bằng cách sử dụng một thành phần  <area> .

Hình dạng

Bạn phải định nghĩa hình dạng của các khu vực, và bạn có thể chọn một trong những giá trị sau đây:

  • rect - định nghĩa một khu vực hình chữ nhật
  • circle - định nghĩa một khu vực hình tròn
  • poly - định nghĩa một khu vực đa giác
  • default - định nghĩa toàn bộ khu vực

Tọa độ

Bạn phải định nghĩa một vài tọa độ để có thể đặt các vùng bấm được lên trên hình ảnh.

Các tọa độ đi thành cặp, một cho trục x và một cho trục y.

Tọa độ  34, 44 nằm ở 34 điểm ảnh tính từ lề bên trái và 44 điểm ảnh tính từ trên đầu:



Tọa độ 270, 350 nằm ở 270 điểm ảnh tính từ bên lề trái và 350 điểm ảnh tính từ trên đầu:


Bây giờ bạn đã có đủ dữ kiện để tạo một khu vực hình chữ nhật có thể bấm:

<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the computer, to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="rect" coords="34,44,270,350" alt="Computer" href="computer.htm">
</map>

</body>
</html>


Đây là khu vực trở thành có thể bấm và sẽ gửi người dùng đến trang web computer.htm:



Hình tròn

Để thêm một khu vực hình tròn, đầu tiên định vị tọa độ của trung tâm hình tròn:

337, 300



Sau đó xác định bán kính của hình tròn:

44 điểm ảnh


Bây giờ bạn đã có đủ dữ kiện để tạo ra một khu vực hình tròn có thể bấm:

<area shape="circle" coords="337, 300, 44" href="coffee.htm">
<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the cup of coffee to go to a new page and read more about the topic:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="circle" coords="337,300,44" alt="Cup of coffee" href="coffee.htm">
</map>

</body>
</html>


Đây là khu vực trở nên có thể bấm và gửi người dùng đến trang coffee.htm:





Bản đồ hình ảnh và JavaScript


Một khu vực có thể bấm không nhất thiết phải là một liên kết đến trang khác, nó cũng có thể kích hoạt một hàm JavaScript.

Thêm một sự kiện click trên thành phần <area> để thực thi một hàm JavaScript:

ví dụ

Bạn có thể sử dụng thuộc tính onclick để thực thi một hàm JavaScript khi khu vực được bấm.

<area shape="circle" coords="337,300,44" onclick="myFunction()">
<!DOCTYPE html>
<html>
<body>

<h2>Image Maps</h2>
<p>Click on the cup of coffee to execute a JavaScript function:</p>

<img src="workplace.jpg" alt="Workplace" usemap="#workmap" width="400" height="379">

<map name="workmap">
  <area shape="circle" coords="337,300,44" onclick="myFunction()">
</map>

<script>
function myFunction() {
  alert("You clicked the coffee cup!");
}
</script>

</body>
</html>




Tóm tắt chương


  • Dùng thành phần HTML <map> để định nghĩa một bản đồ hình ảnh
  • Sử dụng thành phần HTML <area> để định nghĩa các khu vực có thể bấm trong bản đồ hình ảnh
  • Sử dụng thuộc tính usemap của thành phần HTML <img> để trỏ đến một bản đồ hình ảnh