scriptnya adalah sebagai berikut :
<html>
<head>
<title>Latihan 1</title>
<script type="text/javascript" src="jquery-1.8.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".sembunyikan").click(function() {
$("#foto").hide("slow");
});
$(".tampilkan").click(function() {
$("#foto").show("slow");
});
});
</script>
</head>
<body>
<button class="sembunyikan">Sembunyikan</button>
<button class="tampilkan">Tampilkan</button>
<p><img id="foto" src="images/julia.jpg" /></p>
</body>
</html>
Analisa script :
Baris ke 4 berfungsi untuk memanggil library jquery
Pada baris 18 dan 19 terdapat dua buah button dengan class bernama sembunyikan dan tampilkan
Pada baris 20 terdapat script untuk untuk menampilkan gambar dengan id bernama foto
Script pada baris ke 6 sampai 15 yang berada di area heading <head>...</head> adalah script jquery yang berfungsi untuk menyembunyikan dan menampikan gambar. yaitu:
Pada baris ke 7, jika dokumen yang di butuhkan sudah lengkap/siap maka jalankan fungsi yang berada di dalamnya, yaitu script pada baris ke 8 sampai 13.
pada baris 8, jika elemen class yg bernama "sembunyikan" di click maka jalankan fungsi di dalamnya yaitu pada baris ke 9, element id yang bernama "foto" di beri efek hide (sembunyi).
pada baris 11, jika elemen class yg bernama "tampilkan" di click maka jalankan fungsi di dalamnya yaitu pada baris ke 12, elemen id yang bernama "foto" di beri efek show (menampilkan).
hasilnya adalah seperti gambar di bawah :
No comments:
Post a Comment