Bài đăng này sẽ trình bày quy trình thay đổi hình ảnh khi di chuột trong JavaScript.
Làm cách nào để thay đổi hình ảnh khi di chuột trong JavaScript?
Để thay đổi hình ảnh khi di chuột, hãy sử dụng “ onmouseover ' Sự kiện. Khi chuột/con trỏ được di chuyển qua một phần tử HTML hoặc một trong các phần tử con của nó, sự kiện onmouseover được kích hoạt.
Ví dụ 1: Thay đổi hình ảnh khi di chuột trong JavaScript
Trong tệp HTML, sử dụng thẻ để hiển thị hình ảnh trên trang web. Đính kèm “ onmouseover ” sự kiện sẽ gọi hàm JavaScript khi chuột di chuột qua hình ảnh:
< id img = 'menuImg' src = '1.jpg' onmouseover = 'di chuột (cái này);' />
Trong tệp JavaScript, hãy xác định hàm “ bay lượn ” với tham số “ hình ảnh ”. Trong hàm đã xác định, hãy đặt hình ảnh sẽ được hiển thị khi di chuột:
hàm số bay lượn ( hình ảnh )
{
img. src = '2.jpg'
}
Như bạn có thể thấy, ở đầu ra, khi chúng ta di chuột qua hình ảnh hiện tại, nó sẽ đột ngột thay đổi:
Ví dụ 2: Chuyển đổi hình ảnh khi di chuột
Trong ví dụ trên, hình ảnh thay đổi khi con chuột di chuột qua hình ảnh và hình ảnh đó vẫn giữ nguyên. Bây giờ, trong ví dụ này, hình ảnh đầu tiên sẽ xuất hiện lại khi con chuột di chuyển ra khỏi hình ảnh. Hiệu ứng này được gọi là hiệu ứng chuyển đổi. Với mục đích này, chúng tôi sẽ sử dụng “ onmouseover ' và ' onmouseout ” Thuộc tính HTML:
< id img = 'menuImg' src = '1.jpg' onmouseover = 'di chuột (cái này);' onmouseout = 'hoverOut(cái này)' />
“ onmouseover ” gọi là “ bay lượn() ” chức năng trong khi, “ onmouseout ” sự kiện gọi hàm “ hoverOut() ”:
hàm số hoverOut ( hình ảnh ) {img. src = '1.jpg'
}
Đầu ra cho thấy rằng hình ảnh được thay đổi thành công khi chuột ở trên hình ảnh và nó được thay đổi khi chuột ra khỏi hình ảnh:
Đó là tất cả về hình ảnh thay đổi khi di chuột.
Sự kết luận
Để thay đổi hình ảnh khi di chuột, hãy sử dụng “ onmouseover ' Sự kiện. Để chuyển đổi hiệu ứng, hãy sử dụng nút “ onmouseover ” thuộc tính với “ onmouseout ' Sự kiện. Khi chuột/con trỏ được di chuyển qua một phần tử hoặc một trong các phần tử con của nó, sự kiện onmouseover được kích hoạt, trong khi khi con trỏ chuột/con trỏ được di chuyển ra khỏi phần tử, sự kiện onmouseout xảy ra. Trong bài đăng này, chúng tôi đã trình bày quy trình thay đổi hình ảnh khi di chuột trong JavaScript.