Làm thế nào để Tạo một hình ảnh Rollover đơn giản trong Dreamweaver - những con voi

Rollovers là một tính năng phổ biến mà Dreamweaver bao gồm một hộp thoại đặc biệt chỉ dành cho rollovers: hộp thoại Insert Rollover Image. Hình ảnh di chuột qua, như tên của nó, được thiết kế để phản ứng khi ai đó cuộn một con trỏ lên một hình ảnh. Ảnh hưởng có thể gây ấn tượng mạnh mẽ như hình ảnh của một con chó bị thay thế bằng hình sư tử, hoặc tinh tế như màu sắc của một từ thay đổi.

Bạn có thể tạo các hiệu ứng hình ảnh chuyển tiếp phức tạp hơn với tùy chọn Swap Image từ bảng Behaviors. Tùy chọn Swap Image cho phép bạn thay đổi nhiều hình ảnh cùng một lúc.

Để tạo hiệu ứng rollover đơn giản với hai hình ảnh sử dụng hộp thoại Chèn hình ảnh cuộn của Dreamweaver, hãy làm theo các bước sau:

1. Đặt con trỏ chuột lên trang mà bạn muốn xuất hiện.

   Hiệu ứng cuộn xuống yêu cầu ít nhất hai hình ảnh: một cho trạng thái ban đầu và một cho trạng thái rollover. Bạn có thể sử dụng hai hình ảnh khác nhau hoặc hai hình ảnh tương tự nhau, nhưng cả hai đều có cùng kích thước. Nếu không, bạn sẽ thấy các hiệu ứng mở rộng lạ vì cả hai hình ảnh phải được hiển thị chính xác trong cùng một không gian trên trang.

2. Chọn Chèn → Hình ảnh → Xoay vòng Hình ảnh.

   Ngoài ra, bạn có thể sử dụng danh sách thả xuống có sẵn từ biểu tượng Hình ảnh trong bảng Chèn thông thường và chọn Con trỏ Hình.

   Hộp thoại Chèn Chép Hình ảnh Cuộn xuống xuất hiện.

   

3. Trong hộp Image Name, đặt tên cho hình ảnh của bạn.

   Trước khi bạn có thể áp dụng một hành vi cho một phần tử, chẳng hạn như một hình ảnh, phần tử phải có một cái tên để tập lệnh hành vi có thể tham chiếu nó. Bạn có thể đặt tên các yếu tố bất cứ thứ gì bạn muốn miễn là bạn không sử dụng dấu cách hay ký tự đặc biệt.

4. Trong hộp Hình ảnh gốc, chỉ định hình ảnh đầu tiên bạn muốn hiển thị. Sử dụng nút Browse để tìm và chọn hình ảnh.

   Nếu hình ảnh chưa có trong thư mục trang web địa phương của bạn, Dreamweaver sẽ sao chép chúng vào trang web của bạn khi bạn tạo một rollover.

5. Trong hộp Rollover Image, nhập hình ảnh bạn muốn hiển thị khi một khách truy cập di chuyển con trỏ chuột qua hình ảnh đầu tiên.

   Một lần nữa, bạn có thể sử dụng nút Browse để tìm và chọn hình ảnh.

6. Chọn hộp kiểm Preload Rollover Image để tải tất cả hình ảnh di chuột qua vào bộ nhớ cache của trình duyệt khi trang đầu tiên tải.

   Nếu bạn không chọn làm bước này, khách truy cập của bạn có thể gặp phải sự chậm trễ vì hình ảnh thứ hai sẽ không được tải xuống cho đến khi con trỏ được cuộn qua hình ảnh ban đầu.

7. Trong trường Thay thế văn bản, nhập mô tả về các hình ảnh.

   Văn bản thay thế là tùy chọn nhưng được đề xuất bởi vì việc sử dụng từ khoá có thể tăng cường tối ưu hóa công cụ tìm kiếm.Tương tự, văn bản thay thế là một phần quan trọng của khả năng truy cập web vì văn bản này được đọc to bởi các trình duyệt đặc biệt được gọi là trình đọc màn hình, được sử dụng bởi những người mù và những người khác có tầm nhìn hạn chế hoặc tính di động. Văn bản thay thế chỉ được hiển thị trong trình duyệt nếu hình ảnh không hiển thị.

8. Trong hộp Khi được Nhấp chuột, Vào URL, nhập bất kỳ địa chỉ web nào hoặc duyệt qua để tìm một trang khác trong trang của bạn mà bạn muốn liên kết.

   Nếu bạn không chỉ định một URL, Dreamweaver sẽ tự động chèn dấu # vào như một ký tự giữ chỗ trong mã.

   Dấu # là một kỹ thuật chung để tạo liên kết không liên kết bất cứ đâu. Vì các hình ảnh rollover không liên kết đến trang khác có nhiều cách sử dụng tuyệt vời, kỹ thuật này rất hữu ích. Chỉ cần nhớ rằng nếu bạn không muốn cuộn qua liên kết, bạn cần phải thay thế dấu # bằng một liên kết đến trang khác.

9. Nhấp vào OK.

   Các hình ảnh được thiết lập tự động như một rollover.

10. Để xem rollover đang hoạt động, lưu tệp và sau đó nhấp vào biểu tượng quả địa cầu ở đầu không gian làm việc để xem trước trang của bạn trong trình duyệt web.

Bạn có thể thấy cách thức di chuột qua của bạn hoạt động trong chế độ xem Thiết kế của Dreamweaver hoặc bằng cách sử dụng tùy chọn Chế độ xem trực tuyến. Khi bạn nhấp vào nút Trực tiếp ở trên cùng bên trái của không gian làm việc, về cơ bản bạn chuyển Dreamweaver thành một trình duyệt web hiển thị các trang giống như trình duyệt Chrome.

Khi bạn đang xem trước trang trên máy tính của mình bao gồm hình ảnh di chuột qua, một số trình duyệt web sẽ hiển thị cảnh báo cho biết bạn phải cho phép điều khiển ActiveX xem trang. Đây là cảnh báo bảo mật chỉ xuất hiện khi trang được mở trên cùng một máy tính nơi trang được lưu.

Nếu bạn xuất bản trang lên máy chủ web và xem nó trên kết nối Internet, bạn và khách truy cập trang web của bạn sẽ không thấy lỗi này.

Tín dụng: Ảnh minh họa bởi istockphoto. com