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

Question

Câu hỏi này mang tính triết học hơn là kỹ thuật.

tôi đã được đào tạo bản thân mình như một nhà phát triển web trở lại khi các nhà phát triển web được gọi là quản trị web và công cụ của tôi về sự lựa chọn là FrontPage, chuyển sang Evrsoft 1 trang 2000.

Đó là lần cuối cùng tôi đã sử dụng một bản đồ hình ảnh HTML .

Bây giờ là HTML5, AJAX, véc tơ vectơ, CSS 3D, jQuery, bộ nhớ cục bộ, màn hình cảm ứng Safari, bạn đặt tên cho nó. Bản đồ hình ảnh đã phai mờ vào một nơi tối tăm mà ngay cả Google cũng không đưa ra quá nhiều kết quả có liên quan; một mục bắt buộc của trường W3C và một số bài đăng trên diễn đàn từ năm 2004.

Rõ ràng tạo điều hướng trang web hoặc tầm thường tương tự bằng cách sử dụng bản đồ hình ảnh là một ý tưởng tồi lúc đó và hôm nay chắc chắn không thể sử dụng được.

Nhưng hiện tại tôi có nhiệm vụ tạo vùng có thể nhấp đa giác ở trên cùng của div có hình nền.

Tôi không gặp vấn đề gì trong bản đồ hình vì nó có vẻ như được thiết kế cho trường hợp sử dụng chính xác như thế này, và trong khi tôi không thực hiện kiểm tra, tôi không thể tưởng tượng bất kỳ trình duyệt nào hỗ trợ yếu tố làm việc rất đẹp trong nhiều năm. Nhưng tôi không thể không nghĩ rằng phải có một cách tốt hơn để làm điều này ngày hôm nay.

Triết lý sáng tạo web của tôi là phát triển cho IE5.5 và sau đó thiết kế cho cạnh Chrome. Điều này có nghĩa rằng trang web đầu tiên cần phải làm việc trên một cấp độ cơ bản ngay cả trên trình duyệt cũ nhất, và sau đó bắt đầu thêm JS & CSS để làm cho nó đẹp hơn, dễ sử dụng hơn, nhanh hơn, đơn giản hơn, thân thiện hơn và tốt hơn.

Như vậy, trong khi tôi biết tôi có thể làm một khung trong Raphaël và thêm tất cả các loại hiệu ứng di chuột và mọi thứ, tôi nghĩ rằng việc tạo chức năng đơn giản vì điều này không yêu cầu thư viện JS 89 kb (hoặc X kb) . Hoặc thậm chí là JS.

Tôi không biết liệu CSS3 có khả năng xác định vùng đa giác hay không, nhưng khi nhận ra những khả năng tuyệt vời được giới thiệu bởi CSS3, tôi thích giữ bất kỳ thứ gì được xác định ở đó. Vì vậy, trong thế giới web ngày nay, điều gì sẽ là cách trình duyệt nhiều nhất để định nghĩa một vùng nhấp chuột đa giác (tốt nhất là theo cách có thể lấy được bởi một jQuery .hover(), hoặc ít nhất là CSS :hover), điều đó không phụ thuộc về các thuộc tính JavaScript hoặc CSS có sẵn trong một số lượng nhỏ các trình duyệt? Là bản đồ hình ảnh thực sự là cách duy nhất để làm điều đó? Thiết bị di động là gì?

Answer 1

Tại sao sử dụng bản đồ hình ảnh để điều hướng không thể sử dụng? Đó là một công cụ như bất kỳ công cụ nào khác; nó có thời gian và địa điểm. Sử dụng các hình ảnh ảo với các cải tiến javascript có tính tương thích ngược, giảm hiệu quả và có hỗ trợ trình duyệt 100%. Họ không cần một plugin như flash. Họ đã được hỗ trợ thực tế kể từ buổi bình minh của trình duyệt web. Chỉ vì cái gì đó cũ không có nghĩa là nó không hữu ích; hoàn toàn ngược lại, nó có nghĩa là nó được hỗ trợ tốt.

Tôi đã viết một plugin jquery có tên là ImageMapster để thêm hiệu ứng vào hình ảnh ảo để bạn có thể tạo hình ảnh tương tác mà không cần sử dụng đèn flash. Nó sẽ dễ dàng để thực hiện một công cụ có cùng một functonality mà không cần hỗ trợ Javascript bằng cách thay thế bằng một danh sách trong những trường hợp đó. Cá nhân, tôi nghĩ rằng cố gắng để viết cho các trang web mà không javascript là giống như cố gắng lái xe mà không có lốp xe. 99% web không hoạt động nếu không có nó nữa. Đây không phải là năm 1995. Nhưng nếu bạn thực sự quan tâm, điều tốt đẹp về imagemaps là chức năng điều hướng cơ bản vẫn hoạt động. Không có cách nào để thực hiện điều đó chỉ với CSS - thậm chí không CSS3 nếu bạn có các khu vực hình dạng bất thường.