JQuery Tombol Menampilkan dan Menyembunyukan Gambar

Hallo guys, pada tutorial kali ini kita akan belajar membuat sebuah tombol yang berfungsi untuk menampilkan gambar dan menghilangkan gambar ketika tombol-tombol tersebut di klik.

Tutorial ini menggunakan html dan JQuery.

Langsung saja ke langkah-langkahnya.

Pertama buka file xampp/htdocs anda, dan buatlah sebuah folder baru. sebagai contoh disini saya berikan nama jquery

Selajutnya buatlah sebuah file dalam folder jquery tersebut dengan nama pertama.html dan jquery-1.8.0.min. Kemudian salin code berikut ini.

pertama.html

jquery-1.8.0.min



Setelah disave, tambahkanlah satu file foto dengan nama @olbers.l dengan tipy file jpg/jpeg.

Selanjutnya jalankan dibrowser dengan url: http://localhost/jquery/pertama.html
Maka hasilnya seperti di bawah ini.

Keterangan: Pada saat user meng-klik tombol sembunyi maka gambar akan hilang, dan sebaliknya jika user meng-klik tombol tampil, maka gambar akan muncul. Selamat mencoba.

Semoga Bermanfaat,. Sekian dan Terima Kasih.