Cara Membuat Drop Down Image Selector II
Disini masing-masing Gambar dapat dihubungkan dengan URL yang berkaitan, sehingga selain dapat melihat Gambar, Drop Down Image Selector II ini juga dapat diklik.
Dan ini yang membedakan antara Drop Down Image Selector II dan Drop Down Image Selector I yang hanya dapat memilih dan melihat Gambar saja.
Contoh:
(Silahkan pilih gambar, lalu klik...) |
Cara Memasang Drop Down Image Selector II
Caranya sama seperti Cara Memasang Drop Down Image Selector I, cukup meletakan script 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/Sport/mu-juara-liga-inggris.jpg">Picture of me</option>
<option value="http://i291.photobucket.com/albums/ll311/caprt3a/Sport/liga-inggris.jpg">Picture of my aunt</option>
<option value="http://i291.photobucket.com/albums/ll311/caprt3a/Sport/chelseag_g1.jpg">Picture of my brother</option>
</select></p>
</form>
</td>
</tr>
<tr>
<td width="100%"><p align="center"><a href="javascript:linkrotate(document.mygallery.picture.selectedIndex)" onMouseover="window.status='';return true"><img src="http://i291.photobucket.com/albums/ll311/caprt3a/Sport/mu-juara-liga-inggris.jpg" name="pictures" width="99"
height="100" border=0></a></td>
</tr>
</table>
<script language="javascript">
<!--
/*Combo Box Image Selector:
By JavaScript Kit (www.javascriptkit.com)
Over 200+ free JavaScript here!
*/
function linkrotate(which){
var mylinks=new Array()
//add in more links if you want (ie:mylinks[3]=...)
mylinks[0]="http://www.detiksport.com"
mylinks[1]="http://www.bolanews.com"
mylinks[2]="http://www.suarabola.com"
window.location=mylinks[which]
}
function showimage()
{
if (!document.images)
return
document.images.pictures.src=
document.mygallery.picture.options[document.mygallery.picture.selectedIndex].value
}
//-->
</script>
Keterangan:
Silahkan ganti isi mylinks[0], mylinks[1] dan mylinks[2] dengan link URL anda untuk menghubungkan Gambar dengan URL.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