Cara Mengubah Value Source Gambar Dengan Javascript

Whidie ID 26 Aug 2017 - 19:26 1 Komentar

Hai sobat, pada kesempatan kali ini Admin CSi akan membahas Cara Mengubah Value Source Gambar Dengan Javascript, penasaran? simak dibawah ini yah sob.

Apa sih Value Source Gambar itu?

Value Source Gambar adalah alamat dari gambar yang ditampilkan oleh tag HTML <img>, pasti sobat sudah tau fungsi dari tag <img> kan??. Jika belum tau ini penjelasannya sob.
Tag <img> adalah kode HTML yang digunakan untuk menampilkan gambar dari source, source pula adalah url/alamat dimana gambar berada (disingkat src). Penggunaan nya cukup begini sob : <img src="http://URLGAMBAR"/>
Contoh : <img src="http://eachscape.com/wp-content/uploads/2016/07/JScript.png">
Hasilnya :
Jadi apa sudah mengerti gak sob?? kalau ada pertanyaan silahkan berkomentar yak.

Jadi apa yang dimaksud mengubah value source itu?

Yaitu mengubah alamat gambar tanpa harus menulis lagi alamat gambarnya tapi hanya dengan satu klik atau tombol. Dengan kata lain, seperti menghidupkan lampu lalu mematikannya dengan tombol tanpa harus melepaskannya.

Langsung saja sob, pada kode js ini kita hanya menggunakan beberapa skrip. Sebagai contoh objek pada postingan ini :
HTML
<img src="https://www.w3schools.com/js/pic_bulboff.gif" id="lampu" /> <br/>
<input type="button" onclick="lampuOn()" value="Hidupkan"/> <input type="button" onclick="lampuOff()" value="Matikan"/>
JAVASCRIPT
<script type="text/javascript">
function lampuOn(){
var Lampu = document.getElementById("lampu");
Lampu.src = "https://www.w3schools.com/js/pic_bulbon.gif";
}

function lampuOff(){
var Lampu = document.getElementById("lampu");
Lampu.src = "https://www.w3schools.com/js/pic_bulboff.gif";
}
</script>

DEMO


Coba sobat klik tombol hidupkan lalu matikan, maka otomatis lampu akan menyala lalu mati. Tapi nyatanya, pada demo diatas kita hanya mengganti source gambar ke gambar yang lainnya saja. Awas yak sob, itu bukan lampu beneran WKWKLAND tapi hanya gambarnya yak.

Dapat kita peroleh bahwa demo diatas terdapat 2 gambar, diantaranya :
GAMBAR

Dalam skrip Javascriptnya dapat dijelaskan bahwa :
function lampuOn() menggantikan gambar lampu ke yang hidup
function lampuOff() menggantikan gambar lampu ke yang mati

Function itu dinamakan event atau peristiwa, nah kedua event itu dipanggil oleh tag <input> dengan attribut onclick="namaEvent()".

Coba sobat perhatikan Lampu.src = "" pada kedua event itu, apakah sama?? tentu saja beda.

lampuOn() : https://www.w3schools.com/js/pic_bulbon.gif
lampuOff() : https://www.w3schools.com/js/pic_bulboff.gif

Nah bisa diartikan, event lampuOn() menggatikan gambar ke alamat https://www.w3schools.com/js/pic_bulbon.gif (Lampu hidup) sedangkan lampuOff() menggantikan gambar ke alamat https://www.w3schools.com/js/pic_bulboff.gif (Lampu mati) melalui ID gambar yaitu "lampu" lalu dibuat variabel dengan get.ElementById('lampu') menjadi Lampu. Dan satu lagi sob, perhatikan tag <img> nya yah.

Baiklah sob, itu hanya contoh saja. Sobat bisa menggantinya dengan gambar lain dan nama event lain atau apalah. Jika sobat bingung dan tidak mengerti silahkan berkomentar yah.

Sekian postingan kali ini, semoga bermanfaat.

Komentar

1 Tanggapan dari "Cara Mengubah Value Source Gambar Dengan Javascript"

Komentar baru











Please refresh...

Smiley

aplikasi youtube downloader