Hiển thị hình ảnh khi nhấp vào html

Để hiển thị hình ảnh bằng JavaScript, hãy sử dụng phương thức “createElement()” để tạo nút phần tử HTML. Để đạt được điều này, phải lấy “img” làm tham số

cú pháp
Để tạo một nút phần tử, hãy sử dụng cú pháp đã cho

tài liệu. createElement( loại )

ví dụ 1. Hiển thị hình ảnh với JavaScript
Trong ví dụ này, không cần thêm mã HTML vì chúng tôi sẽ thêm hình ảnh bằng JavaScript. Với mục đích này, hãy viết đoạn mã sau vào tệp JavaScript

function displayImage ( src , width, height) {
  var img = tài liệu. createElement("img");
 img. src = src ;
 img. chiều rộng = chiều rộng ;
 img. chiều cao = chiều cao ;
 tài liệu. cơ thể . appendChild( img );
}

Trong đoạn mã trên

• Xác định chức năng “displayImage()” với nguồn hình ảnh “src”, “width” và “height” làm tham số
• Thêm thẻ hình ảnh hoặc thành phần trong JavaScript bằng cách sử dụng phương thức “createElement()”
• Đặt các thuộc tính hình ảnh như nguồn, chiều rộng và chiều cao của hình ảnh
• Sau đó, thêm hình ảnh vào nội dung HTML bằng cách sử dụng “tài liệu. cơ thể người. phương thức appendChild()”

Bây giờ, hãy gọi hàm “displayImage()” và chuyển chiều cao, chiều rộng và nguồn của hình ảnh làm đối số

hình ảnh hiển thị ('2. jpg', 320, 250);

đầu ra

Trong ví dụ tiếp theo, hãy xem cách hiển thị hình ảnh khi nhấp vào nút

ví dụ 2. Hiển thị hình ảnh trên nút bấm với lớp CSS
Ví dụ này là tất cả về cách một lớp CSS có thể được sử dụng để hiển thị hình ảnh trong JavaScript và cách hình ảnh sẽ xuất hiện khi nhấp vào nút. Đầu tiên, chúng ta sẽ tạo một nút trong tệp HTML gọi hàm “displayImage()” khi nút được nhấp

< nhấp vào nút ="displayImage('2. jpg');"> Nhấp vào nút >

Hãy tạo một lớp CSS “imageFeatures” để đặt các thuộc tính hình ảnh như “chiều dài” và “chiều rộng” của hình ảnh

.Tính năng hình ảnh
{
 chiều rộng . 320;
 chiều cao . 250;
}

Xác định hàm “displayImage()” với một tham số duy nhất src. Sau đó, thêm phần tử hình ảnh bằng phương thức createElement() và đặt nguồn của hình ảnh. Bây giờ, thêm lớp “imageFeatures” để thiết lập các thuộc tính hình ảnh bằng cách sử dụng “classList. phương thức thêm()”. Cuối cùng, nối thêm thẻ hình ảnh vào tài liệu bằng cách sử dụng lệnh “tài liệu. cơ thể người. phương thức appendChild()”

function displayImage ( src ) {
  var img = tài liệu. createElement("img");
 img. src = src ;
 img. Danh sách lớp học . thêm("Tính năng hình ảnh");
 tài liệu. cơ thể . appendChild( img );
}

Như bạn có thể thấy, hình ảnh được hiển thị khi nhấp vào nút mà không có bất kỳ độ trễ nào

Chúng tôi đã hiển thị hình ảnh với sự trợ giúp của JavaScript

Phần kết luận

Để hiển thị hình ảnh bằng JavaScript, hãy sử dụng phương thức “createElement()” để tạo thẻ hình ảnh. Cụ thể hơn, phương thức createElement() được sử dụng để tạo một nút phần tử. Trong bài viết này, chúng tôi đã mô tả quy trình hiển thị hình ảnh bằng JavaScript

Trong hướng dẫn này, hãy tìm hiểu cách hiển thị hình ảnh khi nhấp vào nút bằng jQuery. Câu trả lời ngắn gọn là. sử dụng jQuery show() và hide(). Ban đầu, sử dụng thuộc tính CSS display:none để ẩn hình ảnh. show() hiển thị hình ảnh khi nhấp vào nút và hide() ẩn hình ảnh

Bạn cũng có thể sử dụng hàm toggle() của jQuery để thực hiện hiệu ứng ẩn hiện. Nó chuyển đổi hình ảnh khi nhấp vào nút để hiển thị/ẩn hiệu ứng hình ảnh. Đối với phương thức chức năng chuyển đổi, bạn chỉ phải sử dụng một nút duy nhất để chuyển đổi hình ảnh

Hãy cùng tìm hiểu cách hiển thị hình ảnh khi bấm vào nút bằng jQuery với các ví dụ dưới đây

Mục lục

Hiển thị hình ảnh trên nút Bấm bằng cách sử dụng chức năng Hiển thị/Ẩn jQuery

Để hiển thị hình ảnh khi nhấp vào nút, bạn phải sử dụng chức năng hiển thị/ẩn jQuery. show() hiển thị hình ảnh ẩn khi nhấp vào nút. Ban đầu, bạn phải thêm thuộc tính CSS display:none để ẩn hình ảnh. Ngoài ra, bạn cần sử dụng nút riêng biệt để hiển thị và ẩn hiệu ứng

Kiểm tra trực tiếp

Thí dụ

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

.myimgdivshowhide{

hiển thị. không;

}

$(tài liệu). sẵn sàng(chức năng(){

$('. showbtn'). nhấp chuột(hàm(){

   $('. myimgdivshowhide'). hiển thị();

});

   $('. hidebtn'). nhấp chuột(chức năng(){

   $('. myimgdivshowhide'). ẩn();

});

});

loại="nút"lớp< type="button" class="showbtn">Show Image  

loại="nút"lớp< type="button" class="hidebtn">Hide Image

lớp="myimgdivshowhide">< class="myimgdivshowhide">

Ví dụ trên chứa hai nút để hiển thị và ẩn hình ảnh. Nút hiển thị hiển thị hình ảnh ẩn vì hình ảnh ở trạng thái ẩn ban đầu. Nếu bạn muốn ẩn hình ảnh lại, bạn phải nhấp vào nút ẩn ở trên

Thưởng. tải xuống một bảng gian lận jQuery miễn phí sẽ hiển thị cho bạn hơn 20 ví dụ quan trọng nhất để tìm hiểu về jQuery

Hiển thị Ẩn hình ảnh khi nhấp vào nút bằng chức năng chuyển đổi jQuery

Bạn có thể thực hiện cùng một thao tác hiển thị và ẩn hình ảnh trên tác vụ nhấp vào nút bằng cách sử dụng một nút duy nhất và toggle() của jQuery. Điều này yêu cầu ít mã jQuery hơn và tiết kiệm một số dung lượng trên trang web của bạn

Thí dụ

XHTML

1

2

3

4

5

6

7

8

9

10

11

12

.myimgdivtoggle{

hiển thị. không;

}

$(tài liệu). sẵn sàng(chức năng(){

$('. bật tắt btn'). nhấp chuột(hàm(){

   $('. myimgdivtoggle'). chuyển đổi();

});

});

HTML

1

2

3

4

<nút loại = "nút" class="togglebtn">Toggle Image</button>

<div class = "myimgdivtoggle">

<img src = "/images/user1. jpg" alt = "hiển thị hình ảnh khi nhấp vào nút" lớp="img-responsive img-thumbnail"/>

< / div>

đầu ra

Nhấp vào nút bên dưới để Chuyển đổi hoặc Hiển thị/Ẩn hình ảnh

Chuyển đổi hình ảnh

Ví dụ trên chứa hình ảnh ẩn ban đầu. Nếu bạn muốn hiển thị một hình ảnh trên nút bấm, bạn phải bấm vào nút trên. Một lần nữa, nếu bạn muốn ẩn hình ảnh hiển thị, bạn phải nhấp vào nút tương tự

Câu hỏi thường gặp về cách jQuery hiển thị hình ảnh khi nhấp vào nút

1. Làm cách nào để ẩn hình ảnh trên nút bấm bằng jQuery?

Câu trả lời. Bạn có thể sử dụng jQuery hide() để ẩn hình ảnh khi nhấp vào nút. Khi nhấp vào sự kiện của một nút, bạn phải áp dụng chức năng cho hình ảnh để ẩn nó khi nhấp vào nút

Ví dụ đầu tiên được đưa ra ở trên sử dụng hàm hide() để ẩn hình ảnh

2. Cách hiển thị hình ảnh khi nhấp vào nút trong jQuery?

Câu trả lời. Bạn có thể sử dụng jQuery show() để hiển thị hình ảnh ẩn khi nhấp vào nút. Khi sự kiện nhấp chuột xảy ra, chức năng sẽ hiển thị hình ảnh/

Ví dụ đầu tiên được đưa ra ở trên sử dụng hàm show() để hiển thị hình ảnh khi nhấp vào nút

3. Làm cách nào để chuyển đổi hình ảnh khi nhấp vào nút bằng jQuery?

Câu trả lời. Để chuyển đổi hình ảnh khi nhấp vào nút, bạn có thể sử dụng jQuery toggle() để chuyển đổi hoặc hiển thị/ẩn hình ảnh khi nhấp vào nút. Nếu ảnh ở tình trạng ẩn thì chức năng hiển thị ảnh. Tuy nhiên, khi hình ảnh ở trạng thái hiển thị, chức năng sẽ ẩn hình ảnh khi nhấp vào nút

Ví dụ thứ hai được đưa ra ở trên sử dụng chức năng toggle() để chuyển đổi hoặc hiển thị/ẩn hình ảnh khi nhấp vào nút

Làm cách nào để hiển thị nội dung khi nhấp vào nút trong HTML?

Sự kiện onclick .

Thí dụ. Gọi một chức năng khi một nút được bấm. .

In HTML: .

Click a to display the date: .. .

Click a

element to change the text color: .. . Một ví dụ khác về cách thay đổi màu của một phần tử. . Nhấp để sao chép văn bản từ trường nhập liệu này sang trường nhập liệu khác Làm cách nào để hiển thị hình ảnh trong HTML bằng URL?

Để chèn hình ảnh vào HTML, hãy sử dụng thẻ hình ảnh và bao gồm thuộc tính nguồn và alt. Giống như bất kỳ phần tử HTML nào khác, bạn sẽ thêm hình ảnh vào phần nội dung của tệp HTML của mình. Phần tử hình ảnh HTML là một “phần tử trống”, nghĩa là nó không có thẻ đóng

Đọc tiếp