Image Map trong JavaScript

Bạn có thể sử dụng JavaScript để tạo Image map ở Client-Side. Các Image map được kích hoạt bởi thuộc tính usemap cho thẻ và được định nghĩa bởi các thẻ mở rộng đặc biệt và .

Hình ảnh mà tạo bản đồ đó được chèn vào trong trang bởi sử dụng phần tử như bình thường, ngoại trừ rằng nó mang theo thuộc tính bổ sung được gọi là usemap. Giá trị của thuộc tính usemap là giá trị thuộc tính name trên phần tử mà bạn sắp thấy sau đây, được đặt trước bởi một dấu # hoặc ký hiệu $.

Phần tử thực sự tạo bản đồ cho hình ảnh và thường trực tiếp theo sau phần tử . Nó hoạt động như là một nơi chứa (container) cho phần tử mà thực sự định nghĩa các hotpot có thể click. Phần tử chỉ mang một thuộc tính, thuộc tính name, mà là tên nhận diện bản đồ. Đây là cách phần tử biết phần tử nào để sử dụng.

Phần tử xác định hình dạng và tọa độ mà định nghĩa giới hạn (đường biên) của một hotpot có thể click.

Code sau kết nối các Image map và JavaScript để tạo một thông báo trong hộp văn bản khi di chuyển chuột qua các phần khác nhau của hình ảnh.


   
   
      Using JavaScript Image Map

Kết quả

Bạn có thể thấy khái niệm bản đồ bởi đặt con trỏ chuột trên đối tượng image.

Các bài học JavaScript khác tại VietJack:

Trang trước

Trang sau