Công cụ hình ảnh toàn màn mình
Người học khó có thể xem một số hình ảnh trong tài liệu học. Công cụ hình ảnh toàn màn hình cho phép người học phóng to hình ảnh để họ có thể nhìn thấy tất cả các chi tiết trong ngữ cảnh.
- Chế độ xem của người học về hình ảnh toàn màn hình
- Tạo hình ảnh toàn màn hình
Chế độ xem của người học về hình ảnh toàn màn hình
Người học nhìn thấy hình ảnh toàn màn hình trong một trang đơn vị. Khi người học di chuyển con trỏ qua hình ảnh, tùy chọn Toàn màn hình sẽ xuất hiện.
Khi người học chọn Toàn màn hình , hình ảnh sẽ mở ra và mở rộng trong cửa sổ trình duyệt đầy đủ. Các tùy chọn Đóng, Phóng to và Thu nhỏ xuất hiện.
Sau đó, người học có thể phóng to hình ảnh và kéo hình ảnh để xem một phần cụ thể của nó.
Tạo hình ảnh toàn màn hình
-
Tải tệp hình ảnh của bạn lên trang Tệp & Tải lên. Để biết thêm thông tin, hãy xem Thêm tệp vào khóa học.
-
Trong Thêm thành phần mới, chọn HTML , sau đó chọn Công cụ hình ảnh toàn màn hình.
-
Trong thành phần mới xuất hiện, hãy chọn Chỉnh sửa.
-
Trong trình soạn thảo thành phần, hãy thay thế tiêu đề mặc định, xóa đoạn hướng dẫn và thêm văn bản nếu cần.
-
Chọn HTML từ thanh công cụ để chỉnh sửa mã nguồn HTML.
-
Cuộn xuống trong tệp, sau đó thay thế các trình giữ chỗ sau bằng nội dung của riêng bạn.
-
Thay thế giá trị của thuộc tính href của
<a>phần tử bằng đường dẫn đến hình ảnh của bạn. Không thay đổi giá trị của thuộc tính lớp. Ví dụ:< a href="/static/Image1.jpg" class="modal-content"> -
Thay thế giá trị của thuộc tính src của phần tử
<img>bằng đường dẫn đến hình ảnh của bạn. Ví dụ:< img alt = "Hình ảnh toàn màn hình" src = "/ static / Image1.jpg" /> -
Đảm bảo rằng giá trị của các thuộc tính href và src giống nhau và bạn không thay đổi thuộc tính lớp. Mã mẫu của bạn sẽ giống như ví dụ sau:
`
Sample Image Modal
`
Ghi chú
Bạn có thể sử dụng cùng một mã HTML này trong bất kỳ thành phần HTML nào, không chỉ những thành phần bạn đã tạo dưới dạng hình ảnh toàn màn hình.
7. Chọn Lưu.