CSS Popup Image Viewer
CSS Popup Image Viewer ini Memungkinkan untuk menampilkan Link atau Gambar Thumbnail yang dilengkapi dengan sebuah Gambar besar dalam bentuk Popup, yang akan ditampilkan saat onMouseOver di atas Link atau Gambar Thumbnail tersebut.
Demo :
(Letakan cursor diatas Link atau Gambar...)Salah satu makanan favorit saya adalah Karedok Leunca, sangat enak disantap dengan Ikan asin, tempe goreng, ditambah kerupuk udang. shhsshhhhaaa,,, sungguh nikmat, apalagi pedasnya' sshhuuuhh,,, bikin saya klepek-klepek kepedasan. Saya bisa menghabiskan berpiring - piring nasi apabila dihidangkan menu spesial tersebut. Bukan hanya saya saja yang menyukai karedok leunca, teman saya pun sangat tergila - gila dengan karedok leunca.......... Dan mereka ini adalah dua teman saya,,,,,,,,,,,, Andhie Noshit
Andhie Noshit dan Siman Simon
Siman Simon yang menyukai Karedok Leunca:Andhie Noshit
Siman SimonCara Memasang CSS Popup Image Viewer
- Langkah Pertama:
Kode CSS
<style type="text/css">
.thumbnail{
position: relative;
z-index: 0;
}
.thumbnail:hover{
background-color: transparent;
z-index: 50;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
top: 0;
left: 60px; /*position where enlarged image should offset horizontally */
}
</style>
- Langkah Kedua:
Kode HTML
<!-------Thumbnail CSS Popup Image Viewer-------->
<a class="thumbnail" href="#thumb"><img src="https://sites.google.com/site/archivesiugi/javascr/andhie1.jpg" width="100px" height="66px" border="0" /><span><img src="https://sites.google.com/site/archivesiugi/javascr/andhie1.jpg" /><br />Andhie Noshit</span></a>
<a class="thumbnail" href="#thumb"><img src="https://sites.google.com/site/archivesiugi/javascr/simon1.jpg" width="100px" height="66px" border="0" /><span><img src="https://sites.google.com/site/archivesiugi/javascr/simon1.jpg" /><br />Siman Simon</span></a>
<!-------Link CSS Popup Image Viewer-------->
<a class="thumbnail" href="#thumb">Andhie Noshit<span><img src="https://sites.google.com/site/archivesiugi/javascr/andhie1.jpg" /><br />Andhie Noshit</span></a><br />
<a class="thumbnail" href="#thumb">Siman Simon<span><img src="https://sites.google.com/site/archivesiugi/javascr/simon1.jpg" /><br />Siman Simon</span></a>
Keterangan:
Masukan Link dan gambar yang akan ditampilkan pada kode HTML diatas, Lihat contoh seperti Text yang berwarna merah dan kuning.sumber: dynamicdrive
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon