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 vào trên hình ảnh.

Bản đồ hình ảnh

Thẻ HTML <map> xác định 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 vào. Các khu vực được xác định bằng một hoặc nhiều thẻ <area> .

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

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

Ý tưởng đằng sau 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 vào.

Bức hình

Hình ảnh được chèn bằng thẻ <img> . 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 thuộc tính usemap :

Giá trị usemap 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.

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

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

Phần tử <map> đượ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 thuộc name bắt buộc:

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

Các lĩnh vực

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

Vùng có thể nhấp được xác định bằng phần tử <area> .

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"

Tọa độ của shape="rect" đi theo cặp, một cho trục x và một cho trục y.

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

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

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

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

Hình dạng="vòng tròn"

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

337,300

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

44 pixel

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

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

Hình dạng="đa"

shape="poly" chứa một số điểm tọa độ, tạo ra một hình được tạo thành từ các đường thẳng (đ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 cách nào để biến chiếc bánh sừng bò trong hình ảnh bên dưới trở thành một liên kết có thể nhấp vào?

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

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

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

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

Vùng có thể nhấp vào cũng có thể kích hoạt chức năng JavaScript.

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

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 vào trong bản đồ hình ảnh
• Sử dụng thuộc tính usemap HTML của phần tử <img> để trỏ đến bản đồ hình ảnh

Bài tập HTML

Thẻ hình ảnh HTML