July 13, 2024

Mengubah Gambar Secara Dinamis Menggunakan Java Script

1 min read

Java Script adalah bahasa scripting dari Web yang berjalan disisi client, atau sering disebut client site scripting. JavaScript digunakan dalam miliaran halaman web untuk menambahkan fungsionalitas, memvalidasi bentuk, berkomunikasi dengan server, dan banyak lagi.

JavaScript sangatlah mudah untuk dipelajari. Dan kali ini kita akan menggunakan JavaScript untuk mengubah gambar secara dinamis hanya dengan mengklik pada gambar tersebut.

Baiklah kita langsung saja ikuti langkah-langkah berikut :

Langkah 1

Terlebih dahulu kita persiapkan dua buah gambar yang serupa tapi tak sama, contoh dua gambar berikut ini :

bohlam

pic_bulboff.gif

bohlam2

pic_bulbon.gif

Simpan gambar dalam folder yang sama dengan halaman html-nya nanti.

Langkah 2

Masukkan script sebagai berikut pada notepad dan simpan dengan nama lampu.html (simpan dengan nama lain juga boleh) kemudian pilih folder yang sama dengan kedua gambar lampu tadi … ^^

[sourcecode]
<!–[endif]–>
<!DOCTYPE html>

<html>

<body>

<script>

function changeImage()

{

element=document.getElementById(‘myimage’)

if (element.src.match("bulbon"))
{

element.src="pic_bulboff.gif";

}

else

{

element.src="pic_bulbon.gif";

}

}

</script>

<img id="myimage" onclick="changeImage()"

src="pic_bulboff.gif" width="100" height="180">

<p>Klik pada lampu</p>

</body>

</html>
[/sourcecode]

Langkah 3

Maka hasilnya akan sepeti ini :

lampu

Lampu Padam

lampu2

Lampu Menyala

-Selamat Mencoba-

0 thoughts on “Mengubah Gambar Secara Dinamis Menggunakan Java Script

Leave a Reply

Your email address will not be published. Required fields are marked *

Copyright © All rights reserved. | Newsphere by AF themes.