menampilkan dan menyembunyikan gambar dapat kita buat dengan menggunakan JQuery (kali ini saya akan menggunakan jqueryui)
caranya adalah sebagai berikut
1. Download terlebih dahulu JQuery User Interface pada Http://www.jqueryui.com/download
2. Setelah download buat sebuah folder untuk menampung beberapa file yang akan kita gunakan
3. Copy sebuah file gambar ke dalam folder yang telah anda buat beserta dengan file jquery yang telah anda download sebelumnya.
4. buka text editor seperti notepad, editplus, atau editor lainnya.
5. copy script di bawah ini ke dalam text editor yang anda buka
<html>6. ganti gambar.jpg dengan nama file gambar yang ada di folder anda tadi
<head>
<script type="text/javascript" src="jquery-1.4.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".sembunyi").click(function(){
$("#foto").hide("slow");
});
$(".tampil").click(function(){
$("#foto").show("normal");
});
});
</script>
</head>
<body>
<button class="sembunyi">Sembunyikan</button>
<button class="tampil">Tampilkan</button>
<p><img id="foto" src="gambar.jpg" /></p>
</body>
</html>
7. simpan file dengan nama show_hide.html ke dalam folder yang telah anda buat
8. untuk menampilkan hasilnya buka file show_hide.html
berikut ini adalah spoiler gambar sample yang telah saya buat
Selamat mencoba semoga bermanfaat
Posted in: 
Tidak ada komentar:
Posting Komentar