Sunday, February 13, 2011

percantik website anda dengan efek filmstrip seperti di windows explorer

4 comments
   jika anda sedang melihat-lihat foto di windows explorer, tentu anda tahu kalau ada beberapa pilihan view, seperti thumbnails, tiles, icon, filmstrip, dll.



    nah, kali ini saya ada sedikit tips, yaitu memberikan efek view secara filmstrip -seperti gambar di atas- pada website. hasilnya bisa anda lihat di link ini .sebenarnya, cara ini saya dapat saat membaca koran PC Mild edisi lama, lalu saya edit lagi kode tersebut, sehingga mirip dengan efek filmstrip di windows explorer. berikut ini langkah-langkah yang harus anda lakukan:


  1. letakkan code berikut di antara tag <head> dan </head>
    <style type="text/css">
    .thumbNormal { border:4px solid #ffffff; }
    .thumbSelected { border:4px solid #3300CC; }
    </style>
    <script language="javascript">
    <!--
    var lastID = 0;
    function SelectImg(id) {
    if (lastID > 0) {
    document.getElementById(lastID).className ="thumbNormal";
    }
    document.getElementById(id).className ="thumbSelected";
    document.getElementById(0).src = document.getElementById(id).src;
    lastID = id;
    }

    function LoadTrigger() {
    SelectImg(1);
    }

    window.onload = LoadTrigger;
    -->
    </script>

    teks berwarna biru di atas adalah kode warna untuk border gambar saat belum dipilih/di klik
    teks berwarna merah di atas adalah kode warna untuk border gambar saat sudah dipilih/di klik
    .
  2. masukkan juga kode berikut di antara tag <body> dan </body>

     <center>
    <img id=0 src="" height="500"><br><br>
    <a href="javascript:SelectImg(1);">
    <img src    = "1.jpg"
    id        = "1"
    title       = "Judul gambar ke-1"
    height      = "50"
    border      = "0"
    class       = "thumbNormal"></a>&nbsp;&nbsp;

    <a href="javascript:SelectImg(2);">
    <img src    = "2.jpg"
    id        = "2"
    title       = "Judul gambar ke-2"
    height      = "50"
    border      = "0"
    class       = "thumbNormal"></a>&nbsp;&nbsp;

    <a href="javascript:SelectImg(3);">
    <img src    = "3.jpg"
    id        = "3"
    onclick     = "SelectImg(3)"
    title       = "Judul gambar ke-3"
    height      = "50"
    border      = "0"
    class       = "thumbNormal"></a>&nbsp;&nbsp;

    <a href="javascript:SelectImg(4);">
    <img src    = "4.jpg"
    id        = "4"
    onclick     = "SelectImg(4)"
    title       = "Judul gambar ke-4"
    height      = "50"
    border      = "0"
    class       = "thumbNormal"></a>&nbsp;&nbsp;

    <a href="javascript:SelectImg(5);">
    <img src    = "5.jpg"
    id        = "5"
    onclick     = "SelectImg(5)"
    title       = "Judul gambar ke-5"
    height      = "50"
    border      = "0"
    class       = "thumbNormal"></a>&nbsp;&nbsp;

    </center>

    teks berwarna biru di atas adalah alamat gambar yang ingin dimunculkan
    teks berwarna merah di atas adalah teks yang akan keluar saat cursor mendekati gambar tersebut
    teks berwarna kuning di atas adalah ukuran tinggi gambar preview dari gambar-gambar kecil di bawah
    .
  3. jika ingin menambah gambar yang ingin ditampilkan, anda tinggal menambah kode berikut setelah kode &nbsp;&nbsp; :
     
  4. jika ingin mengurangi gambar yang ingin ditampilkan, anda tinggal menghapus kode berikut:
demikian postingan saya kali ini, semoga bermanfaat :)
(revoreva)

4 comments:

Related Posts Plugin for WordPress, Blogger...
Related Posts Plugin for WordPress, Blogger...