PT Proweb Indonesia

Creating websites for over 21 years

Tampilkan dan sembunyikan gambar dengan jquery

Tutorial ini untuk menyembunyikan dan menampilkan kembali suatu objek yang ada pada suatu halaman web. Contohnya seperti berikut ini.

Sebelumnya Anda harus men-download librari jquery terlebih dahulu lalu masukkan script berikut pada halaman HTML Anda:
<script type=”text/javascript”>
            $(document).ready(function() {
                $(“.hide”).click(function() {
                    $(“#foto”).hide(“slow”);
                });
                 $(“.show”).click(function() {
                    $(“#foto”).show(“slow”);
                });
             });
</script>

Elemen yang memiliki class “hide” jika di klik maka script akan menjalankan fungsi “hide” dengan kecepatan “slow” terhadap elemen yang memiliki id “foto”, begitu pula sebaliknya jika elemen yang memiliki class “show” jika di klik maka script akan menjalankan fungsi “show” dengan kecepatan “slow” terhadap elemen yang memiliki id “foto”. Parameter “slow” bisa diganti dengan angka dalam satuan mili second misal “400”.

Sedangkan objek yang akan disembunyikan disini tidak harus berupa gambar, bisa apa saja misalnya berupa video, teks asal berada di dalam <div id=”foto”> </div>.

CSS:
       #foto{           
            position: absolute;
            padding: 10px;
            margin-top: 50px;
            width: 700px;
            background-color: #666;
            opacity: 0.86;
            filter: alpha(opacity=86);
            -webkit-box-shadow: 0 0 5px #888;
            -moz-box-shadow: 0 0 5px #888;
            box-shadow: 0 0 5px #888;
            webkit-border-radius: 5px;
            -moz-border-radius: 5px;
            border-radius: 5px;
            border: 1px solid #eee;
        }
       
        strong{
            font-family: Arial, Helvetica, sans-serif;
            font-size: 18px;
            color: blue;
        }
       
        .hide, .show{
            padding: 2px;           
            float: left;
            margin-right: 5px;
            color: blue;
        }
       
        .hide a, .show a{
            font-size: 12px;
            font-family: Arial, Helvetica, sans-serif;
            text-transform: uppercase;
            color: white;
            text-decoration: none;
            background-color: orange;
            display: block;
        }
       
        .hide a:hover, .show a:hover{
            color: blue;
            text-decoration: none;
            background-color: white;
        }

HTML:
        <strong>Tampilkan & Sembunyikan Gambar dengan jQuery</strong>
        <div id=”foto”><img src=”images/gambar.jpg”></div>
        <div class=”hide”><a href=”#”>Hide</a></div>
        <div class=”show”><a href=”#”>Show</a></div>

DEMO:

Kunjungi www.proweb.co.id untuk menambah wawasan anda.

 

Tampilkan dan sembunyikan gambar dengan jquery