Tôi có hình ảnh và trên đó là biểu tượng (đó là bản đồ), tôi muốn có một hộp bật lên nhỏ với thông tin về vị trí của biểu tượng đó khi người dùng di chuột qua biểu tượng được cho biết.Chú giải công cụ trên hình ảnh
Tôi có thể làm điều này mà không cần sử dụng khung javascript và nếu có, có bất kỳ thư viện/tập lệnh nhỏ nào cho phép tôi thực hiện việc này không?
Có, bạn có thể thực hiện việc này mà không cần Javascript. Sử dụng một bản đồ hình ảnh HTML, với các thuộc tính tiêu đề, như thế này:
<img usemap="#logo" src="http://stackoverflow.com/Content/Img/stackoverflow-logo-250.png">
<map name="logo">
<area shape="rect" href="" coords="52,42,121,65" title="Stack">
<area shape="rect" href="" coords="122,42,245,65" title="Overflow">
</map>
Các Stack Overflow biểu tượng đề cập đến image map, trong đó xác định một hình chữ nhật cho mỗi hai chữ sử dụng một thẻ area. Mỗi phần tử title của area chỉ định văn bản mà trình duyệt thường hiển thị dưới dạng chú giải công cụ. Thuộc tính shape cũng có thể chỉ định một vòng tròn hoặc đa giác.
Một hình ảnh đơn lẻ không cung cấp cho trình duyệt thông tin ngữ nghĩa về các biểu tượng bên trong. Bạn có thể sử dụng image map để cung cấp tọa độ. Để đạt được chú giải công cụ, chỉ cần áp dụng thuộc tính title cho mỗi liên kết. Đối với các chú giải công cụ phức tạp hơn (chẳng hạn như với kiểu dáng, nhiều dòng, v.v.), bạn sẽ cần một cái gì đó không chuẩn, chẳng hạn như UniTip.
MooTools có một kịch bản tiện lợi cho việc này. Xem MooTools Tips. Nhẹ trên HTML là tốt.
Đây là demo của phiên bản 1.11.
Thuộc tính title là giải pháp đơn giản nhất và được bảo đảm hoạt động, và giảm cấp cho người dùng không hỗ trợ chính xác.
Thực tế mootools là một trong nhiều khung công tác
cho phép bạn thêm chức năng cho bất kỳ thành phần nào trên
trang web của bạn. Đây là một liên kết đến một hướng dẫn nhỏ.
http://mootorial.com/wiki/mootorial/08-plugins/03-interface/01-tips
Mootools không phải là thực sự là một loại copy-paste của khuôn khổ,
nó khuyến khích bạn xem qua đoạn code cung cấp và
cuộn giải pháp của riêng bạn với một số ví dụ tuyệt vời.
Bạn có thể thử tiện ích javascript tại http://www.taggify.net/. Tập lệnh cho phép thêm chú giải công cụ cho một phần của hình ảnh - khi người dùng di chuyển chuột qua khu vực trên ảnh, chú giải công cụ bật lên của tập lệnh, vẽ đường viền quanh khu vực và làm mờ các phần khác. Điều thú vị để đánh dấu mọi người trên ảnh. Xem bản trình diễn tại http://www.taggify.net/demo.aspx
bạn có thể sử dụng thuộc tính title cho chú giải công cụ đơn giản. hoạt động của nó trên hầu như tất cả các đối tượng DOM.