Cara Membuat Drop Down Image Selector
Drop Down Image Selector adalah Sebuah drop down Combo Box yang memungkinkan anda untuk memilih dari sekian banyak gambar untuk ditampilkan.
Contoh:
 |
Cara memasang Drop Down Image Selector
Cukup dengan meletakan kode sript berikut ini pada <body> halaman anda.
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="100%"><form name="mygallery"><p>
<select name="picture" size="1" onChange="showimage()">
<option selected value="http://i291.photobucket.com/albums/ll311/caprt3a/Nature/jffk.jpg">Picture of me</option><option value="http://i291.photobucket.com/albums/ll311/caprt3a/Nature/flugu.jpg">Picture of my aunt</option><option value="http://i291.photobucket.com/albums/ll311/caprt3a/Nature/flglg.jpg">Picture of my brother</option></select>
</p>
</form>
</td>
</tr>
<tr>
<td width="100%"><p align="center"><img src="http://i291.photobucket.com/albums/ll311/caprt3a/Nature/jffk.jpg" name="pictures" width="99" height="100"></td>
</tr>
</table>
<script language="javascript">
<!--
/*Combo Box Image Selector:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/
function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
//-->
</script>
Keterangan:
Pada bagian yang berwarna merah adalah bagian yang harus dikonfigurasikan untuk menampilkan gambar dalam Combo Box dan anda dapat memasukan gambar sebanyak yang anda inginkan. Sedangkan bagian yang berwarna kuning adalah merupakan gambar standart yang sudah terbuka saat pertama kali ditampilkan.sumber: javascriptkit
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