Pada kesempatan kali ini saya akan membahas tentang cara membuat swap image dengan jquery, dalam kasus ini event yang dipakai dengan melakukan click mouse, jadi saat di click pada salah satu gambar maka akan menampilkan secara bergantian. Sebelum memulai siapkan beberapa gambar dahulu supaya lebih gampang. Baiklah sekarang sahabat ikutin langkah-langkah dalam pembuatannya seperti berikut ini:

Langkah pertama siapkan terlebih dahulu struktur HTML

didalam file HTML saya menambahkan library CDN jquery ,apabila sahabat ingin mengakses secara online bisa kunjungi websitenya disini. dan saya juga menambahkan beberapa gambar yang akan ditampilkan tapi sesuai kebutuhan yaaa.

Langkah yang kedua sahabat tambahkan style CSS seperti berikut ini:

dalam style juga saya masih menyisipkan gambar untuk menampilkan gambar dengan property background agar tampil secara lebih besar.

Langkah berikutnya jangan lupa tambahkan script dari javascript yang berfungsi untuk memberikan atau menjalankan perita fungsi click atau saat mouse di click pada gambar dan ketikan diantara tag <head> script dibawah ini:

JIka sudah sekarang save dulu yaaa,teruss jalankan pada browser masing-masing lihat hasilnya apakah sudah seperti tampilan berikut ini:

1-Cara Swap Image dengan Jquery

Gambar diatas hasil tampilan yang sudah dibuat, dan sekarang coba click pada beberpa gambar maka tampilanya seperti berikut ini:

2-Cara Swap Image dengan Jquery

Demikian pembahasan artikel kali ini tentang cara membuat swap image dengan jquery. Semoga bermanfaat dan selamat mencoba ,sampai jumpa dengan pembahasan yang lainnya.

Terima Kasih.