Mục lục:
- 1Create các hình ảnh sẽ được sử dụng như rollover.
- 2Truy liệu con trỏ trên trang bất cứ nơi nào bạn muốn hiển thị và rê chuột chèn Insert → Image Objects → Rollover Image hoặc nhấn vào nút Rollover Image trong bảng Insert.
- 3Tìm tên hình ảnh không có khoảng trắng trong trường văn bản Tên hình ảnh.
- 4Nhấp vào các nút Duyệt qua bên phải của trường Hình ảnh gốc và Trượt hình ảnh để 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.
- 5Chọn hộp kiểm Preload Rollover Image đã chọn.
- 6Tích văn bản mô tả thích hợp.
- 7Trong trường Khi nhấp chuột, Vào trường văn bản URL, hãy nói với Dreamweaver nơi người xem được chỉ dẫn khi họ nhấp vào hình ảnh di chuột qua của bạn.
- 8Click OK.
- 9Để 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.
Video: Hướng dẫn cách tạo Slider Image với CSS3 2025
Trong Adobe Dreamweaver CS6, 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 rollover (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.
Để tạo ra một hình ảnh di chuột qua, hãy làm theo các bước sau:
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. Để có kết quả tốt nhất, hãy tạo những hình ảnh có độ cao và chiều cao giống nhau.
2Truy liệu con trỏ trên trang bất cứ nơi nào bạn muốn hiển thị và rê chuột chèn Insert → Image Objects → Rollover Image hoặc nhấn vào nút Rollover Image trong bảng Insert.
Hộp thoại Chèn Chép Hình ảnh Cuộn xuống xuất hiện.
3Tìm tên hình ảnh 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 Duyệt qua bên phải của trường Hình ảnh gốc và Trượt hình ảnh để 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.
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.
6Tích văn bản mô tả thích hợp.
Tất nhiên, bạn sẽ gõ nó trong trường văn bản Alt.
7Trong trường Khi nhấp chuột, Vào trường văn bản URL, hãy nói với Dreamweaver nơi người xem được chỉ dẫn khi họ nhấp vào hình ảnh di chuột qua của bạn.
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.
Nếu bạn đang liên kết đến một trang web khác, bạn cần bao gồm tiền tố // ở đầu URL. Nếu bạn để trống này, Dreamweaver sẽ tự động thêm một liên kết chết (#).
8Click OK.
Hình ảnh di chuột qua được tạo trên trang.
9Để 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.
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 phím cách để tạo không gian trống dưới dạng liên kết, bởi vì liên kết đó sẽ hiển thị lỗi Không Tìm thấy Trang khi nhấp vào.