Di chuột thay đổi hình ảnh javascript

Để thay đổi hình ảnh khi di chuột, hãy sử dụng sự kiện “onmouseover”. 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, hãy sử dụng thẻ

< img id ='menuImg' src< . jpg" ="1.jpg" onmouseover ="hover(this);"/><

Trong tệp JavaScript, hãy xác định hàm “hover” với tham số “img”. Trong chức năng đã xác định, đặt hình ảnh sẽ được hiển thị khi di chuột

chức năng di chuột ( img )
{
 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ó độ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 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 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 các thuộc tính HTML “onmouseover” và “onmouseout”.

< img id ='menuImg' src< . jpg" ="1.jpg" onmouseover ="hover(this);" onmouseout="hoverOut(this)"/>

“onmouseover” gọi hàm “hover()” trong khi sự kiện “onmouseout” gọi hàm “hoverOut()”

function hoverOut ( img ){
 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

Phần kết luận

Để thay đổi hình ảnh khi di chuột, hãy sử dụng sự kiện “onmouseover”. Để chuyển đổi hiệu ứng, hãy sử dụng thuộc tính “onmouseover” với sự kiện “onmouseout”. 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

Tài liệu và ví dụ về cách thêm cửa sổ bật lên Bootstrap, giống như cửa sổ bật lên trong iOS, vào bất kỳ thành phần nào trên trang web của bạn

Tổng quan

Những điều cần biết khi sử dụng plugin popover

• Popovers dựa vào thư viện bên thứ 3 Popper. js để định vị. Bạn phải bao gồm popper. tối thiểu. js trước bootstrap. js hoặc sử dụng

  $(function () {
    $('.example-popover').popover({
      container: 'body'
    })
  })

  7 /

  $(function () {
    $('.example-popover').popover({
      container: 'body'
    })
  })

  8 có chứa Popper. js để cửa sổ bật lên hoạt động
• Cửa sổ bật lên yêu cầu plugin chú giải công cụ làm phần phụ thuộc
• Nếu bạn đang xây dựng JavaScript của chúng tôi từ nguồn, nó
• Cửa sổ bật lên được chọn tham gia vì lý do hiệu suất, vì vậy bạn phải tự khởi chạy chúng
• Các giá trị

  Click to toggle popover

  0 và

  Click to toggle popover

  1 có độ dài bằng 0 sẽ không bao giờ hiển thị cửa sổ bật lên
• Chỉ định

  Click to toggle popover

  2 để tránh sự cố hiển thị trong các thành phần phức tạp hơn (như nhóm đầu vào, nhóm nút, v.v.)
• Kích hoạt cửa sổ bật lên trên các phần tử ẩn sẽ không hoạt động
• Cửa sổ bật lên cho phần tử

  Click to toggle popover

  3 hoặc

  Click to toggle popover

  4 phải được kích hoạt trên phần tử bao bọc
• Khi được kích hoạt từ các neo bao quanh nhiều dòng, các cửa sổ bật lên sẽ được căn giữa giữa chiều rộng tổng thể của các neo. Sử dụng

  Click to toggle popover

  5 trên

  Click to toggle popover

  6 của bạn để tránh hành vi này
• Cửa sổ bật lên phải được ẩn trước khi các phần tử tương ứng của chúng bị xóa khỏi DOM

Tiếp tục đọc để xem cách cửa sổ bật lên hoạt động với một số ví dụ

Ví dụ. Kích hoạt cửa sổ bật lên ở mọi nơi

Một cách để khởi tạo tất cả các cửa sổ bật lên trên một trang là chọn chúng theo thuộc tính

Click to toggle popover

7 của chúng

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

0

Ví dụ. Sử dụng tùy chọn Click to toggle popover8

Khi bạn có một số kiểu trên phần tử gốc can thiệp vào cửa sổ bật lên, bạn sẽ muốn chỉ định một

Click to toggle popover

8 tùy chỉnh để thay vào đó, HTML của cửa sổ bật lên xuất hiện trong phần tử đó

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Ví dụ

Click to toggle popover

bốn hướng

Bốn tùy chọn có sẵn. căn trên, phải, dưới và trái

Popover ở trên Popover ở bên phải Popover ở dưới Popover ở bên trái

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

5

Bỏ qua lần nhấp tiếp theo

Sử dụng trình kích hoạt

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

50 để loại bỏ cửa sổ bật lên trong lần nhấp tiếp theo của người dùng vào một phần tử khác với phần tử chuyển đổi

Yêu cầu đánh dấu cụ thể để loại bỏ khi nhấp vào lần nhấp tiếp theo

Để có hành vi đa nền tảng và trình duyệt phù hợp, bạn phải sử dụng thẻ

Click to toggle popover

6, không phải thẻ và bạn cũng phải bao gồm thuộc tính

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

52

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

9

Click to toggle popover

0

yếu tố bị vô hiệu hóa

Các phần tử có thuộc tính

Click to toggle popover

4 không tương tác, nghĩa là người dùng không thể di chuột hoặc nhấp vào chúng để kích hoạt cửa sổ bật lên (hoặc chú giải công cụ). Như một giải pháp thay thế, bạn sẽ muốn kích hoạt cửa sổ bật lên từ trình bao bọc

hoặc

Click to toggle popover

6 và ghi đè

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

55 trên phần tử bị vô hiệu hóa

Đối với các trình kích hoạt cửa sổ bật lên bị vô hiệu hóa, bạn cũng có thể chọn

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

56 để cửa sổ bật lên xuất hiện dưới dạng phản hồi trực quan ngay lập tức cho người dùng của bạn vì họ có thể không muốn nhấp vào phần tử bị vô hiệu hóa

Click to toggle popover

5

Cách sử dụng

Kích hoạt cửa sổ bật lên thông qua JavaScript

Click to toggle popover

6

Tùy chọn

Các tùy chọn có thể được chuyển qua thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy thêm tên tùy chọn vào

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

57, như trong

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

58

NameTypeDefaultDescriptionanimationbooleantrueÁp dụng chuyển đổi mờ dần CSS cho chuỗi popovercontainer. thành phần. sai sai

Nối popover vào một phần tử cụ thể. Ví dụ.

Click to toggle popover

2. Tùy chọn này đặc biệt hữu ích vì nó cho phép bạn định vị cửa sổ bật lên trong luồng tài liệu gần phần tử kích hoạt - điều này sẽ ngăn cửa sổ bật lên trôi ra khỏi phần tử kích hoạt trong khi thay đổi kích thước cửa sổ

chuỗi nội dung. thành phần. chức năng''

Giá trị nội dung mặc định nếu không có thuộc tính

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

90

Nếu một chức năng được đưa ra, nó sẽ được gọi với tham chiếu

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

91 của nó được đặt thành phần tử mà cửa sổ bật lên được gắn vào

số chậm trễ. đối tượng0

Độ trễ hiển thị và ẩn cửa sổ bật lên (ms) - không áp dụng cho loại trình kích hoạt thủ công

Nếu một số được cung cấp, độ trễ được áp dụng cho cả ẩn/hiện

Cấu trúc đối tượng là.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

92

htmlbooleanfalseChèn HTML vào cửa sổ bật lên. Nếu sai, phương thức

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

93 của jQuery sẽ được sử dụng để chèn nội dung vào DOM. Sử dụng văn bản nếu bạn lo lắng về các cuộc tấn công XSS. chuỗi vị trí. chức năng'đúng'

Cách định vị cửa sổ bật lên - tự động. hàng đầu. đáy. trái. đúng.
Khi

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

94 được chỉ định, nó sẽ tự động định hướng lại cửa sổ bật lên.

Khi một hàm được sử dụng để xác định vị trí, nó được gọi với nút DOM cửa sổ bật lên làm đối số đầu tiên và nút DOM phần tử kích hoạt làm đối số thứ hai. Bối cảnh

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

91 được đặt thành phiên bản popover

chuỗi chọn. falsefalseNếu bộ chọn được cung cấp, các đối tượng bật lên sẽ được ủy quyền cho các mục tiêu đã chỉ định. Trong thực tế, điều này được sử dụng để cho phép nội dung HTML động có thêm cửa sổ bật lên. Xem cái này và một ví dụ thông tin. chuỗi mẫu

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

96

HTML cơ sở để sử dụng khi tạo cửa sổ bật lên

Click to toggle popover

0 của popover sẽ được đưa vào

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

98

Click to toggle popover

1 của popover sẽ được đưa vào

Click to toggle popover

00

Click to toggle popover

01 sẽ trở thành mũi tên của popover

Phần tử bao bọc ngoài cùng phải có lớp

Click to toggle popover

02

chuỗi tiêu đề. thành phần. chức năng''

Giá trị tiêu đề mặc định nếu không có thuộc tính

Click to toggle popover

0

Nếu một chức năng được đưa ra, nó sẽ được gọi với tham chiếu

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

91 của nó được đặt thành phần tử mà cửa sổ bật lên được gắn vào

chuỗi kích hoạt'click'Cách kích hoạt cửa sổ bật lên - nhấp chuột. bay lượn. tiêu điểm. thủ công. Bạn có thể vượt qua nhiều trình kích hoạt; . `thủ công` không thể được kết hợp với bất kỳ trình kích hoạt nào khác. số bù. string0Offset của cửa sổ bật lên so với mục tiêu của nó. Để biết thêm thông tin tham khảo Popper. js. chuỗi dự phòng. mảng'flip'Cho phép chỉ định vị trí mà Popper sẽ sử dụng khi dự phòng. Để biết thêm thông tin tham khảo Popper. chuỗi ranh giới của js. ranh giới ràng buộc element'scrollParent'Overflow của cửa sổ bật lên. Chấp nhận các giá trị của

Click to toggle popover

05,

Click to toggle popover

06,

Click to toggle popover

07 hoặc tham chiếu HTMLElement (chỉ dành cho JavaScript). Để biết thêm thông tin tham khảo Popper. js

Thuộc tính dữ liệu cho các cửa sổ bật lên riêng lẻ

Ngoài ra, các tùy chọn cho các cửa sổ bật lên riêng lẻ có thể được chỉ định thông qua việc sử dụng các thuộc tính dữ liệu, như đã giải thích ở trên

phương pháp

Các phương thức và chuyển tiếp không đồng bộ

Tất cả các phương thức API đều không đồng bộ và bắt đầu quá trình chuyển đổi. Họ quay lại người gọi ngay khi quá trình chuyển đổi bắt đầu nhưng trước khi quá trình chuyển đổi kết thúc. Ngoài ra, một cuộc gọi phương thức trên một thành phần chuyển tiếp sẽ bị bỏ qua

Xem tài liệu JavaScript của chúng tôi để biết thêm thông tin

Click to toggle popover

08

Khởi tạo cửa sổ bật lên cho một bộ sưu tập phần tử

Click to toggle popover

09

Hiển thị cửa sổ bật lên của một phần tử. Trả về người gọi trước khi cửa sổ bật lên thực sự được hiển thị (i. e. trước khi sự kiện

Click to toggle popover

50 xảy ra). Đây được coi là cách kích hoạt popover “thủ công”. Cửa sổ bật lên có cả tiêu đề và nội dung đều có độ dài bằng 0 sẽ không bao giờ được hiển thị

Click to toggle popover

1

Click to toggle popover

51

Ẩn popover của một phần tử. Trả về người gọi trước khi cửa sổ bật lên thực sự bị ẩn (i. e. trước khi sự kiện

Click to toggle popover

52 xảy ra). Đây được coi là cách kích hoạt popover “thủ công”

Click to toggle popover

4

Click to toggle popover

53

Chuyển đổi cửa sổ bật lên của một phần tử. Trả về người gọi trước khi cửa sổ bật lên thực sự được hiển thị hoặc ẩn (i. e. trước khi sự kiện

Click to toggle popover

50 hoặc

Click to toggle popover

52 xảy ra). Đây được coi là cách kích hoạt popover “thủ công”

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

0

Click to toggle popover

56

Ẩn và phá hủy cửa sổ bật lên của một phần tử. Cửa sổ bật lên sử dụng ủy quyền (được tạo bằng cách sử dụng ) không thể bị hủy riêng lẻ trên các phần tử kích hoạt con cháu

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

1

Click to toggle popover

58

Cung cấp cho cửa sổ bật lên của một phần tử khả năng được hiển thị. Popovers được bật theo mặc định

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

2

Click to toggle popover

59

Xóa khả năng hiển thị cửa sổ bật lên của một phần tử. Cửa sổ bật lên sẽ chỉ có thể được hiển thị nếu nó được bật lại