Mục lục:
- 1Create các hình ảnh sẽ được sử dụng như rollover.
- 2Trong con trỏ trên trang bất cứ nơi nào bạn muốn xuất hiện.
- 3 Đặt tên cho hình ảnh.
- 4Nhấp vào các nút Browse.
- 5Chọn hộp kiểm Preload Rollover Image đã chọn.
- 6Hãy mô tả Hình ảnh.
- 7 Hoàn tất trường Khi đã Nhấp, vào trường văn bản URL.
- 8Click OK.
- 9Xem lại Hình ảnh.
Video: [MyLớp.edu.vn] Image Map Rollover Effect Tutorial with Dreamweaver, CSS3 and jQuery 2025
Trong Adobe Creative Suite 5 (Adobe CS5) Dreamweaver, bạn có thể chèn các đối tượng hình ảnh, bao gồm các trình giữ chỗ hình ảnh, hình ảnh di chuột qua (hình ảnh thay đổi khi người xem cuộn chuột trên hình ảnh), thanh điều hướng, và Fireworks HTML. Bạn truy cập các đối tượng hình ảnh này bằng cách chọn Insert → Image Objects.
1Create các hình ảnh sẽ được sử dụng như rollover.
Bạn có thể tạo những hình ảnh này trong Fireworks, Illustrator, Photoshop, hoặc bất kỳ ứng dụng nào khác có khả năng lưu hình ảnh được tối ưu hóa cho web.
2Trong con trỏ trên trang bất cứ nơi nào bạn muốn xuất hiện.
Chọn Chèn → Đối tượng Hình ảnh → Xoàn Trội Hình hoặc nhấp vào nút Nối lại Hình ảnh trong bảng Chèn. Hộp thoại Chéo hình ảnh cuộn lên.
3 Đặt tên cho hình ảnh.
Nhập tên hình ảnh mà không có khoảng trắng trong trường văn bản Tên hình ảnh. Tên này được sử dụng trong kịch bản tạo ra rollover.
4Nhấp vào các nút Browse.
nút Duyệt qua ở bên phải các trường văn bản Hình ảnh gốc và Hình ảnh cuộn lên. Xác định vị trí hình ảnh mà bạn muốn xuất hiện dưới dạng mặc định trên trang và hình ảnh chỉ xuất hiện khi ai đó di chuột qua hình ảnh.
5Chọn hộp kiểm Preload Rollover Image đã chọn.
Tuỳ chọn này sẽ tải hình ảnh di chuột qua khi trang được tải xuống để tránh sự chậm trễ trong quá trình rollovers.
6Hãy mô tả Hình ảnh.
Nhập mô tả alt văn bản phù hợp vào trường văn bản Alt.
7 Hoàn tất trường Khi đã Nhấp, vào trường văn bản URL.
Điều này hướng đến Dreamweaver nơi người xem được chỉ dẫn khi họ nhấp vào hình ảnh di chuột qua. Bạn có thể nhấp vào nút Duyệt để tìm một trang khác trong trang web của bạn hoặc nhập URL. Lưu ý: Nếu bạn đang liên kết tới một trang web khác, bạn cần phải bao gồm tiền tố // ở đầu URL.
Nếu bạn chưa có liên kết thực để sử dụng cho nút hoặc siêu liên kết, bạn có thể nhập một dấu (#) để tạo một liên kết đã chết. Liên kết hoặc nút xuất hiện có thể nhấp nhưng không đi bất cứ nơi nào khi nhấp vào. Tùy chọn này tốt hơn là nhấn vào thanh khoảng trắng để tạo không gian trống dưới dạng liên kết, vì nó sẽ hiển thị lỗi Không Tìm thấy Trang khi nhấp vào.
8Click OK.
Hình ảnh di chuột qua được tạo trên trang.
9Xem lại Hình ảnh.
Để xem trước hình ảnh rollover mới, chọn File → Preview in Browser hoặc nhấp vào nút Live View trên thanh công cụ Document.