Bạn có thể tạo hiệu ứng ảnh trong chủ đề Tumblr của mình để hiển thị hình ảnh rõ ràng khi chuột di chuột qua hình ảnh, nhưng sau đó khi chuột không di chuột qua hình ảnh, hình ảnh sẽ bị mờ. Đầu tiên, hãy chuẩn bị những hình ảnh bạn sẽ sử dụng để tạo hiệu ứng. Sau đó, chèn hai đoạn mã vào chủ đề Tumblr của bạn. Lưu ý rằng mã không được hỗ trợ trong các bài đăng trên Tumblr, chỉ trong các chủ đề blog.
Chuẩn bị hình ảnh
Để thực hiện tác vụ làm mờ hình ảnh, bạn sẽ cần hai hình ảnh gần giống nhau: một bản sao của hình ảnh rõ ràng gốc và bản sao thứ hai của cùng một hình ảnh, chỉ bị mờ. Sử dụng hiệu ứng Làm mờ trong GIMP hoặc Photoshop để tạo ra hình ảnh mờ của bức ảnh thứ hai. Đảm bảo rằng các hình ảnh có cùng kích thước chính xác.
Mã JavaScript
Một đoạn mã JavaScript được chèn vào giữa
và thẻ của blog Tumblr của bạn. Mã JavaScript bao gồm các sự kiện MouseRollover và MouseOut. Sự kiện MouseRollover hướng dẫn hiển thị hình ảnh rõ ràng khi chuột di chuột qua hình ảnh. Sự kiện MouseOut xác định hình ảnh nào sẽ hiển thị khi chuột không di chuột qua hình ảnh.Đoạn mã JavaScript để sử dụng cho hiệu ứng này là:
Thay đổi tham chiếu “Picture1.jpg” thành URL để có hình ảnh gốc rõ ràng. Thay đổi tham chiếu “Picture2.jpg” thành URL cho hình ảnh bị mờ.
Mã HTML
Mã HTML đi kèm với đoạn mã Javascript xác định kích thước, vị trí và bố cục của hình ảnh. Chèn mã HTML vào chủ đề Tumblr nơi bạn muốn hiển thị ảnh. Mã HTML đi kèm với đoạn mã Javascript ở trên là:
Thay thế “Picture2.jpg” bằng URL của ảnh bị mờ, sẽ được hiển thị theo mặc định. Thay đổi các biến "chiều rộng" và "chiều cao" thành kích thước mong muốn của hình ảnh hiển thị của bạn.
Cài đặt mã
Để cài đặt mã trong chủ đề Tumblr của bạn, hãy mở trang tổng quan Tumblr, sau đó nhấp vào tab “Tùy chỉnh” trong trang tổng quan để blog sửa đổi. Nhấp vào tùy chọn “Chỉnh sửa HTML” để mở trình chỉnh sửa chủ đề. Chọn đoạn mã Javascript để đánh dấu mã, sau đó nhấn “Ctrl-C” để sao chép mã. Nhấp vào khoảng trống phía trước “”Trong mã chủ đề của bạn, sau đó nhấn“ Ctrl-V ”để dán mã.
Sao chép mã HTML, sau đó quay lại trình chỉnh sửa chủ đề Tumblr. Tìm vị trí trong mã nơi bạn muốn hiệu ứng ảnh hiển thị. Nhấp vào vị trí, sau đó nhấn “Ctrl-V” để dán đoạn mã HTML. Nhấp vào “Cập nhật Xem trước” để kiểm tra hiệu ứng trong cửa sổ Xem trước. Nhấp vào "Lưu" để lưu các thay đổi.
