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:
- 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
. - 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>
<a href="javascript:SelectImg(2);">
<img src = "2.jpg"
id = "2"
title = "Judul gambar ke-2"
height = "50"
border = "0"
class = "thumbNormal"></a>
<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>
<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>
<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>
</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
. - jika ingin menambah gambar yang ingin ditampilkan, anda tinggal menambah kode berikut setelah kode :
- jika ingin mengurangi gambar yang ingin ditampilkan, anda tinggal menghapus kode berikut:
(revoreva)
Bagus bro... :)
ReplyDeletethanks bro :)
ReplyDeleteThanks ya! :D
ReplyDeletesama" :)
ReplyDelete