Điều cần biết
• Sử dụng hình ảnh kích thước bình thường mà trình duyệt sẽ không bán lại. Bạn cũng sẽ cần một trình chỉnh sửa hình ảnh và một trình soạn thảo văn bản hoặc HTML.
• Khi chèn hình ảnh, hãy thêm một thuộc tính bổ sung để xác định tọa độ của bản đồ.
• Ví dụ:
Bài viết này giải thích cách tạo Bản đồ hình ảnh bằng thẻ HTML thay vì trình chỉnh sửa bản đồ hình ảnh. Hầu hết các trình chỉnh sửa hình ảnh sẽ hiển thị cho bạn tọa độ của chuột khi bạn trỏ vào hình ảnh, đó là tất cả dữ liệu bạn cần để bắt đầu với bản đồ hình ảnh.
Tạo Bản đồ Hình ảnh
Để tạo bản đồ hình ảnh, trước tiên hãy chọn một hình ảnh sẽ làm cơ sở cho bản đồ. Hình ảnh phải ở "kích thước bình thường" - nghĩa là bạn không nên sử dụng hình ảnh quá lớn để trình duyệt sẽ chia tỷ lệ.
Khi bạn chèn hình ảnh, bạn sẽ thêm một thuộc tính bổ sung xác định tọa độ của bản đồ:
Khi bạn tạo bản đồ hình ảnh, bạn đang tạo một khu vực có thể nhấp được trên hình ảnh, do đó, tọa độ của bản đồ phải thẳng hàng với chiều cao và chiều rộng của hình ảnh bạn đã chọn. Bản đồ hỗ trợ ba loại hình dạng khác nhau:
- hình chữ nhật hoặc hình bốn cạnh
- hình đa giác hoặc hình nhiều cạnh
- circle-a circle
Để tạo các khu vực, bạn phải cô lập các tọa độ cụ thể mà bạn định lập bản đồ. Bản đồ có thể bao gồm một hoặc nhiều khu vực được xác định trên hình ảnh mà khi được nhấp vào, sẽ mở ra một siêu liên kết mới.
Đối với hình chữ nhật, bạn chỉ ánh xạ các góc trên cùng bên trái và dưới cùng bên phải. Tất cả các tọa độ được liệt kê là x, y (trên, lên). Vì vậy, đối với góc trên bên trái 0, 0 và góc dưới bên phải 10, 15, bạn sẽ nhập 0, 0, 10, 15. Sau đó, bạn đưa nó vào bản đồ:
Đối với một đa giác, bạn ánh xạ từng tọa độ x, y riêng biệt. Trình duyệt Web tự động kết nối tập hợp tọa độ cuối cùng với tọa độ đầu tiên; bất kỳ thứ gì bên trong các tọa độ này đều là một phần của bản đồ.
Hình dạng hình tròn chỉ yêu cầu hai tọa độ, giống như hình chữ nhật, nhưng đối với tọa độ thứ hai, bạn chỉ định bán kính hoặc khoảng cách từ tâm của hình tròn. Vì vậy, đối với một đường tròn có tâm là 122, 122 và bán kính là 5, bạn sẽ viết 122, 122, 5:
Tất cả các khu vực và hình dạng có thể được bao gồm trong cùng một thẻ bản đồ:
Cân nhắc
Bản đồ hình ảnh phổ biến hơn nhiều trong kỷ nguyên Web 1.0 của những năm 1990 và bản đồ hình ảnh đầu những năm 2000 thường là cơ sở cho việc điều hướng của một trang web. Một nhà thiết kế sẽ tạo ra một số loại hình ảnh để chỉ ra các mục trong menu, sau đó thiết lập một bản đồ.
Các phương pháp tiếp cận hiện đại khuyến khích thiết kế đáp ứng và sử dụng các biểu định kiểu xếp tầng để kiểm soát vị trí của hình ảnh và siêu liên kết trên một trang.
Mặc dù thẻ bản đồ vẫn được hỗ trợ trong tiêu chuẩn HTML, việc sử dụng thiết bị di động có hệ số dạng nhỏ có thể dẫn đến sự cố hiệu suất không mong muốn với bản đồ hình ảnh. Ngoài ra, các vấn đề về băng thông hoặc hình ảnh bị hỏng cũng ảnh hưởng đến giá trị của bản đồ hình ảnh.
Vì vậy, hãy tiếp tục sử dụng công nghệ ổn định, được hiểu rõ này vì biết rằng có nhiều lựa chọn thay thế hiệu quả hơn hiện đang thịnh hành với các nhà thiết kế Web.
