Catatan Hadi : Membuat Effect pada website menggunakan JQuery

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!

Catatan Hadi

Pages

Sabtu, 23 Februari 2013

Membuat Effect pada website menggunakan JQuery

Tidak ada komentar:

Posting Komentar