Image Map Pro – Trình dựng ảnh tương tác cho WordPress (SVG, polygon, tooltip, artboard, import SVG, responsive)

Image Map Pro cho phép thêm pin, vùng vector (polygon/shape) và tooltip vào bất kỳ ảnh nào, với trình biên tập kéo-thả trên WordPress. Bạn có thể import SVG, tạo nhiều artboard/tầng (floors/layers), chỉnh hành vi click/hover, và xuất SVG/JSON.

Dành cho ai?

• Bất động sản/Kiến trúc: sơ đồ toà nhà, mặt bằng nhiều tầng, căn hộ/diện tích có tooltip/điều hướng.

• Giáo dục/Kỹ thuật: bản vẽ kỹ thuật, sơ đồ linh kiện có vùng “highlight” và mô tả chi tiết

• Marketing/Infographic: ảnh sản phẩm có hotspots mở video, ảnh, nút CTA ngay trong tooltip.

Tính năng nổi bật (mô tả đúng chức năng)

• Pins, vector shapes & polygon
  Vẽ đa giác (polygon), hình vector và chấm pin trực tiếp trên ảnh; tuỳ chỉnh màu, bo tròn, viền, hiệu ứng.

• Tooltip “giàu nội dung”
  Trình dựng tooltip cho phép chèn văn bản, ảnh, video YouTube, nút… sắp xếp theo lưới 12 cột; hỗ trợ mở modal/tooltip theo click/hover.

• Import SVG & làm tương tác
  Nhập SVG sẵn có (ví dụ từ Illustrator) và biến từng layer/node thành vùng tương tác; có tuỳ chọn nhập một đối tượng hoặc nhiều đối tượng.

• Artboards, floors/layers
  Làm việc với nhiều artboard (mặt bằng/tầng), đổi tầng qua menu; phù hợp toà nhà, khuôn viên, triển lãm.

• Responsive & fullscreen
  Ảnh tương tác phản hồi kích thước tốt, có chế độ fullscreen; editor hỗ trợ zoom, undo/redo, sao chép/đổi tên shape.

• Hành vi & API
  Đặt click/hover actions, hỗ trợ JavaScript/HTML API để “hook” vào logic trang, mở URL, cuộn tới section, v.v.

• Xuất/nhập & quản lý dự án
  Lưu/nhúng bản đồ ảnh trong WP; có export/import (SVG/JSON) cho backup hoặc tái sử dụng.

• Cập nhật thường xuyên (nhánh 6.x)
  Changelog gần đây: cải thiện tooltip editor, render SVG, sửa lỗi fullscreen/tooltips, animation z-index, các CSS fixes (từ 6.0.23 → 6.0.36).

Cách dùng nhanh (5 bước)

1. Tạo ảnh tương tác mới trong Image Map Pro → Upload ảnh gốc (sơ đồ, bản đồ, mặt bằng…).

2. Vẽ hotspots: chọn Polygon/Shape/Pin rồi vẽ vùng; đặt tên và kiểu dáng từng shape.

3. Thiết kế tooltip: mở Tooltip Builder, chèn tiêu đề/ảnh/video/nút theo layout lưới; chọn mở theo click/hover.

4. (Tuỳ chọn) Import SVG: dán mã SVG và tách thành nhiều đối tượng để gán tooltip/hành vi riêng cho từng phần.

5. Xuất bản: dùng Shortcode/Block của plugin để nhúng vào trang/bài; kiểm thử responsive/fullscreen trước khi public.

Mẹo triển khai

• Tên lớp rõ ràng: đặt tên shape theo quy ước (tầng-khu-phòng) để tìm/ẩn/hiện nhanh khi dự án lớn.

• Tooltip gọn, đủ ý: ưu tiên ảnh + 3–4 dòng mô tả + một CTA; tránh nhồi nội dung nặng làm chậm lần mở đầu.

• Tối ưu SVG trước khi import: loại bỏ groups/attributes không cần, “flatten” path nếu có thể để render mượt.

• Kiểm tra mobile & fullscreen: dùng Preview ngay trong editor và test thao tác đóng menu/tooltip trên di động.

Câu hỏi thường gặp (FAQ)

Có cần biết code không?
Không – kéo-thả hoàn toàn; nhưng có HTML/JS API nếu cần tuỳ biến nâng cao.

Tôi đã có bản vẽ SVG, có dùng lại được không?
Có – import SVG và tách thành nhiều đối tượng để gán tooltip/hành vi riêng.

Có hỗ trợ nhiều tầng/mặt bằng?
Có – quản lý floors/layers/artboard và chuyển qua lại khi xem.

Có “giật lag” trên mobile không?
Plugin responsive, đội ngũ thường xuyên sửa các lỗi liên quan fullscreen/tooltip/animation trong nhánh 6.x.

Phiên bản gần đây nhất?
Chuỗi phát hành 2025 ghi nhận đến 6.0.36 (đầu tháng 8/2025). Theme Canal