membuat web tersenyum dengan javascript

31 12 2008

Dengan javascript, kita bisa mengakses objek-objek yang ada di HTML.

Berikut saya berikan contoh bagaimana kita mengakses objek gambar (batu tersenyum)dan merubah gambar tersebut  (menjadi batu manyun) dengan menggunakan javascript.

1. Siapkan gambar yang akan kita insertkan ke HTML . Misalnya seperti ini :

batu senyum

batu senyum

2. lalu insertkan gambar tersebut ke HTML.

<img id=“rockImg” src=“rock_happy.png” alt=“iRock” />

3. misal kita ingin setelah 3 detik, kalau user tidak mengklik gambar batu senyum di atas, maka gambarnya akan berubah menjadi batu manyun. Maka, kita tinggal menambahkan beberapa baris javascript seperti ini :

<script type=“text/javascript”>
var time = setInterval(“document.getElementById(‘rockImg’).src=’rock_manyun.png'”,3000);
</script>

4. apakah sekarang pekerjaan kita sudah selesai ? ternyata masih ada yang kurang. setelah 3 detik pertama lewat, si batu masih manyun, tidak balik lagi senyum. Nah, untuk membuat si batu tersenyum lagi, tambahkan fungsi senyum di javascript seperti berikut :

function senyum(){
document.getElementById(“rockImg”).src=”rock_happy.png”;
}

dan jangan lupa; pada tag img yang ada di body html harus ditambahkan event onClick=“senyum();”. Nah, sekarang setiap kali si batu kita klik, dia akan tersenyum, tapi 3 detik berikutnya akan manyun. Begitu seterusnya ….(looping tanpa henti). Kalau kita bosen dengan pertukaran wajah si batu ini, kita bisa menggunakan sintaks clearInterval(time);

5. oh ya, satu lagi. Selain menggunakan setInterval, kita juga bisa menggunakan setTimeout untuk membuat timer di javascript. Bedanya, kalau menggunakan setTimeout, aksi hanya dilakukan satu kali. Sedangkan kalau kita menggunakan setInterval, aksi akan diulang berkali-kali setelah interval waktu tertentu.

Oke, segitu dulu aja ya tutorialnya. Source code lengkap tentang membuat batu tersenyum dapat didownload di sini. Sedangkan gambar batu manyun dapat didownload di sini.

Cheers,

Kemas Rahmat SW


Actions

Information

4 responses

16 01 2009
putrichairina

Hoho!
Ini dari buku HeadFirst JavaScript ya, pak?

17 01 2009
bagindokemas

iya putri. betul sekali :p

14 04 2009
cuma lewat

disusun ulang dunk!^_^

22 04 2009
bagindokemas

maksudnya disusun ulang seperti apa ya ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s




%d bloggers like this: