Cara Menyisipkan Gambar Dan Cara Mengganti Gambar Mengikuti Tombol - Part 2 (Javascript)

Niguru.com | Kamis, 28 Jan 2021 | Setelah pada posting sebelumnya Niguru.com menjelaskan mengenai langkah-langkah untuk menyusun script untuk menyisipkan gambar, maka pada posting kali ini Niguru.com akan menjelaskan cara untuk menampilkan gambar pada lokasi yang sama dengan pergantian gambar sesuai dengan tombol yang ditekan.

 Niguru.com akan mulai penjelasan dengan membuat tampilan HTML untuk menampilkan kalimat notifikasi dan tombol, dengan script sebagai berikut:

<h1>Belajar ID Pada Gambar</h1><h3>

Klik tombol untuk <font color="red">mengganti gambar:</font></h3>

<img id="01" src="cat.jpg" style="width:380px;height:380px">

<br>

<input type="button" value="RABBIT" onclick="rabbit()">

<input type="button" value="DOG" onclick="dog()">

<input type="button" value="CAT" onclick="cat()">

 

Simpan dengan nama CDR.html (boleh disimpan dengan nama lain):

 

Note:

CDR diambil dari singkatan "Cat Dog Rabbit".

Buka file CDR.html pada browser. Hasilnya:

 

Note:
Tombol sudah tersedia di bawah gambar, namun tidak terjadi apapun saat tombol ditekan, karena memang belum tersedia fungsi yang sesuai dengan tombol yang ditekan.

<script>

a="dog.jpg";b="cat.jpg";c="rabbit.jpg"

function dog(){document.getElementById("01").src=a}

function cat(){document.getElementById("01").src=b}

function rabbit(){document.getElementById("01").src=c}

</script>

Berikut ini hasilnya bila ditambahkan pada script HTML yang sudah dituliskan sebelumnya:

 

Jalankan kembali file CDR.hmtl pada browser. Hasilnya:

 

Bila tombol RABBIT ditekan, maka gambar akan berganti menjadi gambar kelinci:

 

Bila tombol DOG ditekan, maka gambar akan berganti menjadi gambar anjing:

Untuk lebih jelasnya silakan coba langsung pada aplikasi di bawah ini. Klik pada tombol untuk mengganti gambar:

Belajar ID Pada Gambar

Klik tombol untuk mengganti gambar:

Demikianlah penjelasan mengenai cara agar pengunjung website dapat mengganti-ganti gambar yang ditampilkan pada website.

Selamat mencoba .. Have a nice day :-)

www.Niguru.com (Nino Guevara Ruwano)