Hình ảnh di chuột qua là hình ảnh thay đổi thành hình ảnh khác khi bạn hoặc khách hàng của bạn cuộn chuột lên đó. Chúng thường được sử dụng để tạo cảm giác tương tác như nút hoặc tab. Nhưng bạn có thể tạo ra hình ảnh di chuột qua chỉ là về bất cứ điều gì.
Hướng dẫn này được thiết kế để giúp bạn tạo một hình ảnh rollover trong Dreamweaver . Nó được thiết kế để sử dụng bởi những người sử dụng các phiên bản Dreamweaver sau:
- Dreamweaver MX
- Dreamweaver MX 2004
- Dreamweaver 8
- Dreamweaver CS3
- Dreamweaver CS4
- Dreamweaver CS5
- Dreamweaver CS6
Yêu cầu đối với Hướng dẫn này
- Dreamweaver
Một trong các phiên bản được liệt kê ở trên. - Hình ảnh gốc
Đảm bảo tối ưu hóa hình ảnh này. Điều này sẽ giúp các trang của bạn tải nhanh hơn. - Hình ảnh di chuột qua
Hình ảnh này phải có cùng kích thước với hình ảnh gốc. Và, giống như hình ảnh gốc, nên được tối ưu hóa để giúp thời gian tải trang. - Một trang web
Đây là trang HTML nơi bạn sẽ đặt hình ảnh di chuột qua của mình.
01 trên 06
Bắt đầu
- Bắt đầu Dreamweaver
- Mở trang web mà bạn muốn di chuột qua
02/06
Chèn đối tượng hình ảnh hình ảnh di chuột qua
Dreamweaver giúp dễ dàng tạo ra một hình ảnh rollover.
- Chuyển đến menu Chèn và xuống menu phụ "Đối tượng Hình ảnh".
- Chọn “Rollover hình ảnh” hoặc “Rollover image”
Một số phiên bản cũ của Dreamweaver gọi đối tượng hình ảnh là "Hình ảnh tương tác" thay thế.
03/06
Kể cho Dreamweaver những hình ảnh để sử dụng
Dreamweaver bật một hộp thoại với các trường bạn cần điền vào để tạo hình ảnh di chuột qua của bạn.
Tên Hình ảnh
Chọn tên hình ảnh duy nhất cho trang. Nó phải là một từ, nhưng bạn có thể sử dụng số, dấu gạch dưới (_) và dấu gạch nối (-). Điều này sẽ được sử dụng để xác định hình ảnh cần thay đổi.
Ảnh gốc
Đây là URL hoặc vị trí của hình ảnh sẽ bắt đầu trên trang. Bạn có thể sử dụng URL đường dẫn tương đối hoặc đường dẫn tuyệt đối trong trường này. Đây phải là một hình ảnh tồn tại trên máy chủ web của bạn hoặc bạn sẽ tải lên bằng trang.
Hình ảnh di chuột qua
Đây là hình ảnh sẽ xuất hiện khi bạn di chuột lên ảnh. Cũng giống như hình ảnh gốc, đây có thể là đường dẫn tuyệt đối hoặc tương đối với hình ảnh và nó sẽ tồn tại hoặc được tải lên khi bạn tải lên trang.
Tải trước hình ảnh di chuột qua
Tùy chọn này được chọn theo mặc định vì nó giúp rollover xuất hiện nhanh hơn. Bằng cách chọn tải trước hình ảnh rollover, trình duyệt Web sẽ lưu trữ nó trong bộ nhớ cache cho đến khi con chuột cuộn qua nó.
Văn bản thay thế
Văn bản thay thế tốt giúp hình ảnh của bạn dễ truy cập hơn. Bạn nên luôn sử dụng một số loại văn bản thay thế khi thêm bất kỳ hình ảnh nào.
Khi được nhấp, hãy truy cập URL
Hầu hết mọi người sẽ nhấp vào một hình ảnh khi họ nhìn thấy hình ảnh trên một trang. Vì vậy, bạn nên có thói quen làm cho họ có thể nhấp. Tùy chọn này cho phép bạn chỉ định trang hoặc URL để đưa người xem đến khi họ nhấp vào hình ảnh. Nhưng tùy chọn này là không cần thiết để tạo ra một rollover.
Khi bạn đã hoàn thành tất cả các trường, hãy bấm OK để có Dreamweaver tạo hình ảnh di chuột qua của bạn.
Trang tiếp theo cho thấy kịch bản mà Dreamweaver viết.
04/06
Dreamweaver Viết JavaScript cho bạn
Nếu bạn mở trang ở chế độ xem mã, bạn sẽ thấy rằng Dreamweaver chèn một khối JavaScript vào
của tài liệu HTML của bạn. Khối này bao gồm 3 chức năng mà bạn cần để trao đổi hình ảnh khi con chuột cuộn qua chúng và chức năng tải trước nếu bạn đã chọn nó.chức năng MM_swapImgRestore ()
hàm MM_findObj (n, d)
chức năng MM_swapImage ()
chức năng MM_preloadImages ()
05/06
Dreamweaver Thêm HTML cho Rollover
Nếu bạn đã chọn để Dreamweaver tải trước hình ảnh rollover, thì bạn sẽ thấy mã HTML trong phần nội dung của tài liệu để gọi kịch bản tải trước để hình ảnh của bạn tải nhanh hơn.
onload = "MM_preloadImages ('shasta2.jpg')"
Dreamweaver cũng thêm tất cả các mã cho hình ảnh của bạn và liên kết nó (nếu bạn bao gồm một URL). Phần rollover được thêm vào thẻ anchor như các thuộc tính onmouseover và onmouseout.
onmouseout = "MM_swapImgRestore ()"
onmouseover = "MM_swapImage ('Image1', '', 'shasta1.jpg', 1)"
06 trên 06
Kiểm tra Rollover
Xem hình ảnh rollover đầy đủ chức năng và tìm hiểu những gì trên tâm trí của Shasta.