Catatan Hadi : Menampilkan dan Menyembunyikan gambar menggunakan JQuery

JQuery merupakan library (framework) javascript yang menekankan bagaimana interaksi antara HTML dan Javascript. Jika kita melihat source codenya, akan terlihat seperti html biasa saja, kode javascript tidak akan terlihat langsung. Teknik ini biasa disebut dengan Unobstrusive Javascript Programming. Jika kita terus memepelajarinya, ada banyak sekali manfaat dari jquery, sehingga banyak digunakan oleh para programmer untuk menjadikan aplikasi atau webnya menjadi lebih profesional. Salah satu slogan dari JQuery yaitu "write less do more" yang artinya sedikit menulis tapi menghasilkan banyak.

Disini saya tidak akan menjelaskan panjang lebar mengenai manfaat dari JQuery, tapi akan lebih fokus pada pembuatannya. Perlu diingat sebelum membuat website menggunakan JQuery, anda harus memiliki library JQuery terlbih dahulu, jika anda belum memilikinya anda bisa DOWNLOAD DISINI .

Jika sudah memiliki library JQuery, anda bisa membuat skirp seperti dibawah ini menggunakan notepad++ atau lainnya.

<!-- Programming Hadi Kurniawan -->
<html>
<head><title>Sembunyikan Gambar</title>
<script type="text/javascript" src="jquery/jQuery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$("#klik1").click(function(){
		$("h2").hide(500);
	});
	$("#klik2").click(function(){
		$("h2").show(500);
	});
	$("#klik3").click(function(){
		$("h3").hide(500);
	});
	$("#klik4").click(function(){
		$("h3").show(500);
	});
});
</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="white">- JQUERY -</h1>
<table border="2">
<tr><td><h2><font color="white"> <img src="http://i1253.photobucket.com/albums/hh596/Hadi_Kurniawan/meyda.jpg" width="200"></img></h2></td></tr>
<tr><td><h3><font color="white"> <center>Hadi Kurniawan</center></h3></td></tr>
</table><br>
<button id="klik1">Sembunyikan</button>
<button id="klik2">Tampilkan</button><br>
copyright hadi kurniawan | www.algoritma-cyber.blogspot.com
</body>
</html>

Keterangan:

<script type="text/javascript" src="jquery/jQuery.js"></script>

Untuk memanggil library jquery yang baru saja kita download

$(document).ready(function(){
	$("#klik1").click(function(){
		$("h2").hide(500);
	});
	$("#klik2").click(function(){
		$("h2").show(500);
	});
	$("#klik3").click(function(){
		$("h3").hide(500);
	});
	$("#klik4").click(function(){
		$("h3").show(500);
	});
});

untuk memanggil fungsi dari jquery nanti,
$("h2") untuk memilih semua elemn h2.
dan hide (500) digunakan untuk mengatur kecepatan saat gambar disembunyikan dan ditampilkan. anda bisa mengganti menjadi berapapun.

<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="white">- JQUERY -</h1>
<table border="2">
<tr><td><h2><font color="white"> <img src="http://i1253.photobucket.com/albums/hh596/Hadi_Kurniawan/meyda.jpg" width="200"></img></h2></td></tr>
<tr><td><h3><font color="white"> <center>Hadi Kurniawan</center></h3></td></tr>
</table><br>
<button id="klik1">Sembunyikan</button>
<button id="klik2">Tampilkan</button><br>
copyright hadi kurniawan | www.algoritma-cyber.blogspot.com
</body>
</html>

halaman yang akan kita tampilkan.

sekarang coba anda simpan dengan JQuery.php. lalu coba anda jalankan.
bila berhasil akan menghasilkan output seperti dibawah ini:

jika anda klik tombol sembunyikan, maka gambar akan disembunyikan seperti gambar dibawah ini:

Jika anda klik tampilkan, maka gambar akan muncul seperti biasa lagi.
selain dari gambar, anda juga bisa mengganti menjadi tulisan atau object yang lain untuk disembunyikan.

beberapa selector yang perlu anda tau:

$<"h2"> : memilih semua elemen h2
$("[href]"): memilih semua atribut ahref
$("[href='.gif']"): memilih semua yang format .jpg
:submit : memilih semua elemen input yang bertipe submit

semoga tutorial ini dapat bermanfaat buat teman-teman semua...
salam kenal dan salam blogger.

Catatan Hadi

Pages

Sabtu, 23 Februari 2013

Menampilkan dan Menyembunyikan gambar menggunakan JQuery

Tidak ada komentar:

Posting Komentar