Hình ảnh thay đổi khi di chuột-Hiệu ứng Rollover

Hiệu ứng Rollover là làm thay đổi hình ảnh(hoán đổi hình ảnh) khi di chuột đến một hình ảnh và hình ảnh ban đầu được thay bằng một hình ảnh khác và quay trở lại hình ảnh ban đầu khi di chuột ra khỏi hình ảnh(được gọi là hiệu ứng Rollover).

Di chuột hình ảnh được cài đặt sẵn vào trang khi nó đang tải, điều này đảm bảo rằng các rollover được hiển thị một cách nhanh chóng. Các onmouseover và onmouseout thuộc tính của thẻ liên kết được sử dụng để thực hiện chức năng này.

Demo:Bạn di chuột lên hình ảnh dưới đây để xem hiệu ứng

Làm thế nào để áp dụng vào Blogger

Bạn có thể tiến hành thêm một tiện ích HTML / JavaScript và để nó ở thanh bên hoặc là bạn thêm nó ngay trong phần bài viết bằng cách vào Đăng bài mới và chuyển sang tab HTML và dán code sau vào:

<a href="URL Liên Kết"><img src="URL Của hình ảnh ban đầu" onmouseover="this.src='URL Của hình ảnh thứ 2'" onmouseout="this.src='URL Của hình ảnh ban đầu'" /></a>

Trong đó:
URL Liên Kết: Là liên kết cần trỏ tới khi click vào hình ảnh
URL Của hình ảnh ban đầu: Link hình ảnh ban đầu
URL Của hình ảnh thứ 2: Link hình ảnh khi di chuột
Chúc thành công!