JQuery memiliki banyak sekali fitur yang dapat dimanfaatkan dalam membangun suatu website, selain itu juga akan mempermudah programmer dalam penggunaan Ajax, Javascript ataupun Coding Semantik, yang bisa menjadikan website lebih profesional. Fitur yang akan saya bahas kali ini, yaitu membuat efek pada website menggunakan JQuery.
Efek yang akan dibuat ini sangatlah sederhana, yaitu menampilkan gambar ketika sipengunjung melakukan klik pada tombol yang telah dibuat. biasanya digunakan oleh para programmer untuk mempercantik websitenya ataupun untuk memasang iklan, agar tidak memenuhi website kita.
Ketikklah coding program seperti ini:
<!-- Programming : Hadi Kurniawan --> <html> <head> <script type="text/javascript" src="jquery/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#klik1").click(function(){ $("p").show(500,pesan); }); }); function pesan(){ alert("Gambar orang keren :p"); } </script> </head> <body bgcolor="black"> <style type="text/css">body { background-image: url(http://i958.photobucket.com/albums/ae69/putrablidz/storm.gif); background-color:transparent; }</style> <center> <h1><font color="green">------ </font><font color="white">( ? )</font> <font color="green">------</font></h1> <p style="display:none"> <img src="http://i1253.photobucket.com/albums/hh596/Hadi_Kurniawan/cyber-magic.jpg" width="200"></img></p> <button id="klik1">KLIK dan Lihat Gambar Siapa Ini</button> </body> </html>
Keterangan:
<script type="text/javascript" src="jquery/jquery.js"></script>
Memanggil library jquery
$(document).ready(function(){
awal penulisan jquery
$("#klik1").click(function(){ $("p").show(500,pesan);
memilih elemen "p" , 500 = kecepatan efek untuk menampilkan
alert("Gambar orang keren :p");
memunculkan kotak pesan saat tombol dklik
<body bgcolor="black"> <style type="text/css">body { background-image: url(http://i958.photobucket.com/albums/ae69/putrablidz/storm.gif); background-color:transparent; }</style> <center> <h1><font color="green">------ </font><font color="white">( ? )</font> <font color="green">------</font></h1> <p style="display:none"> <img src="http://i1253.photobucket.com/albums/hh596/Hadi_Kurniawan/cyber-magic.jpg" width="200"></img></p> <button id="klik1">KLIK dan Lihat Gambar Siapa Ini</button> </body> </html>
Halaman yang akan ditampilkan
sekarang save program anda, lalu jalankan pada browser.
Jika berhasil, maka akan tampil seperti gambar dibawah ini:
dan coba anda klik tombol tersebut, jika berhasil akan muncul seperti ini
semoga tutorialnya bermanfaat buat teman-teman yah :)
salam kenal dan salam blogger Indonesia!
Posting Komentar
Semua Artikel Diblog ini boleh disebarluaskan,
asal mencantumkan sumbernya.
Terima kasih atas kunjungannya
Semoga artikel dblog ini bisa bermanfaat buat kita semua.
mohon kritik dan sarannya.
salam kenal dan salam Blogger Indonesia