Hướng dẫn HTML

TRANG CHỦ HTML Giới thiệu HTML Trình chỉnh sửa HTML HTML cơ bản Phần tử HTML Thuộc tính HTML Tiêu đề HTML Đoạn văn HTML Kiểu HTML Định dạng HTML Trích dẫn HTML Nhận xét HTML Màu HTML HTML CSS Liên kết HTML Hình ảnh HTML HTML Favicon Bảng HTML Danh sách HTML Khối HTML & Nội tuyến Các lớp HTML Id HTML Khung nội tuyến HTML HTML JavaScript Đường dẫn tệp HTML Đầu HTML Bố cục HTML HTML đáp ứng Mã máy tính HTML Ngữ nghĩa HTML Hướng dẫn kiểu HTML Thực thể HTML Biểu tượng HTML Biểu tượng cảm xúc HTML Bộ mã HTML Mã hóa URL HTML HTML so với XHTML

Biểu mẫu HTML

Biểu mẫu HTML Thuộc tính biểu mẫu HTML Phần tử biểu mẫu HTML Các loại đầu vào HTML Thuộc tính đầu vào HTML Thuộc tính biểu mẫu nhập HTML

Đồ họa HTML

HTML Canvas HTML SVG

HTML Media

HTML Media Video HTML Âm thanh HTML Trình cắm HTML HTML YouTube

API HTML

Vị trí địa lý HTML Kéo / thả HTML Lưu trữ web HTML Nhân viên web HTML HTML SSE

Ví dụ HTML

Ví dụ HTML HTML Quiz Bài tập HTML Chứng chỉ HTML Tóm tắt HTML Khả năng truy cập HTML

Tham chiếu HTML

Danh sách thẻ HTML Thuộc tính HTML Thuộc tính toàn cầu HTML Hỗ trợ trình duyệt HTML Sự kiện HTML Màu HTML HTML Canvas HTML Audio / Video HTML Doctypes Bộ ký tự HTML Mã hóa URL HTML Mã HTML Lang Tin nhắn HTTP Phương thức HTTP Công cụ chuyển đổi PX sang EM Các phím tắt bàn phím

Bản đồ hình ảnh HTML


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


Bản đồ hình ảnh

Thẻ HTML <map>xác định một bản đồ hình ảnh. Bản đồ hình ảnh là một hình ảnh có các khu vực có thể nhấp được. Các khu vực được xác định bằng một hoặc nhiều <area>thẻ.

Hãy thử bấm vào máy tính, điện thoại hoặc tách cà phê trong hình dưới đây:

Nơi làm việc Sun Mercury Venus

Thí dụ

Đây là mã nguồn HTML cho bản đồ hình ảnh ở trên:

<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>

Làm thế nào nó hoạt động?

Ý tưởng đằng sau một bản đồ hình ảnh là bạn có thể thực hiện các hành động khác nhau tùy thuộc vào vị trí bạn nhấp vào trong hình ảnh.

Để tạo bản đồ hình ảnh, bạn cần một hình ảnh và một số mã HTML mô tả các khu vực có thể nhấp.



Bức hình

Hình ảnh được chèn bằng <img>thẻ. Sự khác biệt duy nhất so với các hình ảnh khác là bạn phải thêm một usemapthuộc tính:

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

Giá usemaptrị bắt đầu bằng thẻ băm #theo sau là tên của bản đồ hình ảnh và được sử dụng để tạo mối quan hệ giữa hình ảnh và bản đồ hình ảnh.

Mẹo: Bạn có thể sử dụng bất kỳ hình ảnh nào làm bản đồ hình ảnh!


Tạo bản đồ hình ảnh

Sau đó, thêm một <map>phần tử.

Phần <map>tử được sử dụng để tạo bản đồ hình ảnh và được liên kết với hình ảnh bằng cách sử dụng name thuộc tính bắt buộc:

<map name="workmap">

Thuộc nametính phải có cùng giá trị với thuộc tính <img>'s usemap.


Các lĩnh vực

Sau đó, thêm các khu vực có thể nhấp vào.

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

Hình dạng

Bạn phải xác định hình dạng của vùng có thể nhấp và bạn có thể chọn một trong các giá trị sau:

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

Bạn cũng phải xác định một số tọa độ để có thể đặt vùng có thể nhấp vào hình ảnh. 


Hình dạng = "trực tràng"

Các tọa độ cho shape="rect"thành từng cặp, một cho trục x và một cho trục y.

Vì vậy, tọa độ 34,44nằm cách lề trái 34 pixel và cách trên cùng 44 pixel:

Nơi làm việc

Tọa độ 270,350nằm cách lề trái 270 pixel và cách trên cùng 350 pixel:

Nơi làm việc

Bây giờ chúng ta có đủ dữ liệu để tạo một vùng hình chữ nhật có thể nhấp:

Thí dụ

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

Đây là khu vực có thể nhấp được và sẽ đưa người dùng đến trang "computer.htm":

Nơi làm việc

Shape = "vòng tròn"

Để thêm một khu vực hình tròn, trước tiên hãy xác định tọa độ của tâm hình tròn:

337,300

Nơi làm việc

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

44 điểm ảnh

Nơi làm việc

Bây giờ bạn có đủ dữ liệu để tạo một vùng hình tròn có thể nhấp:

Thí dụ

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

Đây là khu vực có thể nhấp được và sẽ đưa người dùng đến trang "coffee.htm":

Nơi làm việc

Hình dạng = "poly"

shape="poly"chứa một số điểm tọa độ, tạo ra một hình dạng được tạo thành bằng các đường thẳng (một đa giác).

Điều này có thể được sử dụng để tạo ra bất kỳ hình dạng nào.

Giống như có thể là một hình dạng bánh sừng bò!

Làm thế nào chúng ta có thể làm cho chiếc bánh sừng bò trong hình ảnh dưới đây trở thành một liên kết có thể nhấp được?

Thức ăn pháp

Chúng ta phải tìm tọa độ x và y cho tất cả các cạnh của bánh sừng bò:

Thức ăn pháp

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

Thí dụ

<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">

Đây là khu vực có thể nhấp được và sẽ đưa người dùng đến trang "croissant.htm":

Thức ăn pháp

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

Một khu vực có thể nhấp cũng có thể kích hoạt một hàm JavaScript.

Thêm một clicksự kiện vào <area>phần tử để thực thi một hàm JavaScript:

Thí dụ

Ở đây, chúng tôi sử dụng thuộc tính onclick để thực thi một hàm JavaScript khi vùng được nhấp:

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

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

Tóm tắt chương

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

Thẻ hình ảnh HTML

Tag Description
<img> Defines an image
<map> Defines an image map
<area> Defines a clickable area inside an image map
<picture> Defines a container for multiple image resources

Để có danh sách đầy đủ tất cả các thẻ HTML có sẵn, hãy truy cập Tham khảo thẻ HTML của chúng tôi .