Minggu, 07 Februari 2010

Memasang (Installing) Dynamic Image Selector

Posted by Dennis Rvindo 08.19, under | No comments

Memasang (Installing) Dynamic Image Selector
Secara teroritis saya kurang memahami secara detail apa itu Dynamic Image Selector, tapi saya sudah pernah mempraktekan dan alhamdulillah berhasil. Secara umum dapat saya gambarkan bahwa Dynamic Image Selector pada dasarnya adalah menu list yang apabila diklik memunculkan gambar tertentu sesuai konfigurasi yang diinginkan. Jika berhasil maka hasilnya akan seperti gambar di bawah ini:



Fasilitas ini bisa juga temen-temen gunakan mislanya kalau temen2 ingin memberikan review buku, photo, dll.
Untuk memasangnya tidak terlalu rumit, cukup memasangnya ke dalam halaman blog dengan menggunakan gadget javascript, langkah-langkahnya:

1. Masuk Layout
2.Tambah Gadget
3. Pilih Gadgdet Javascript
4. Paste kode di bawah ini:

<form name="dynamicselector">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="178">
<tr>
<td width="35%" valign="top" align="left">
<select name="dynamicselector2" size="4" onChange="generateimage(this.options[this.selectedIndex].value)">

<option value="http://images.amazon.com/images/P/1565924940.01.TZZZZZZZ.jpg" selected>DHTML Guide</option>
<option value="http://images.amazon.com/images/P/0201353415.01.TZZZZZZZ.jpg">DHTML QuickStart</option>
<option value="http://images.amazon.com/images/P/1556225865.01.TZZZZZZZ.jpg">HTML4</option>
<option value="http://images.amazon.com/images/P/1861001746.01.TZZZZZZZ.jpg">IE5 DHTML</option>
</select>
</td>
<td width="65%" valign="top" align="left"><ilayer id="dynamic1" width=100% height=178><layer id="dynamic2" width=100% height=178><div id="dynamic3"></div></layer></ilayer></td>
</tr>
</table>
</form>

<script>

//Dynamic Image selector Script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, installation instructions,
//100's more DHTML scripts, visit dynamicdrive.com

//enter image descriptions ("" for blank)
var description=new Array()
description[0]="DHTML: The Definitive Guide"
description[1]="DHTML Visual QuickStart Guide"
description[2]="HTML 4 and DHTML"
description[3]="IE5 DHTML Reference"

var ie4=document.all
var ns6=document.getElementById
var tempobj=document.dynamicselector.dynamicselector2
if (ie4||ns6)
var contentobj=document.getElementById? document.getElementById("dynamic3"): document.all.dynamic3
function generateimage(which){
if (ie4||ns6){
contentobj.innerHTML='<center>Loading image...</center>'
contentobj.innerHTML='<center><img src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</center>'
}
else if (document.layers){
document.dynamic1.document.dynamic2.document.write('<center><img src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</center>')
document.dynamic1.document.dynamic2.document.close()
}
else
alert('You need NS 4+ or IE 4+ to view the images!')
}

function generatedefault(){
generateimage(tempobj.options[tempobj.options.selectedIndex].value)
}

if (ie4||ns6||document.layers){
if (tempobj.options.selectedIndex!=-1){
if (ns6)
generatedefault()
else
window.onload=generatedefault
}
}

</script>


5.Simpan
6. Letakan di tempat yang temen-temen inginkan
7. Simpan untuk memastikan perpindahan gadget
8. Lihat

Tampilan menu list dan preview gambarnya tentu masih standar, temen2 dapat mengonfigurasinya sesuai kebutuhan, termasuk jumlah menu list dan gambar yang dipreview pun jumlahnya tidak terbatas.

Sambil temen-temen memperhatikan hasilnya, tolong perhatikan kode-kode berikut, kemudian editlah sesuai keinginan, memang perlu sedikit dipelototin (hehehe...), berikut kode-kode yang perlu dikonfigurasi:

<option value="http://images.amazon.com/images/P/1565924940.01.TZZZZZZZ.jpg" selected>DHTML Guide</option>
<option value="http://images.amazon.com/images/P/0201353415.01.TZZZZZZZ.jpg">DHTML QuickStart</option>
<option value="http://images.amazon.com/images/P/1556225865.01.TZZZZZZZ.jpg">HTML4</option>
<option value="http://images.amazon.com/images/P/1861001746.01.TZZZZZZZ.jpg">IE5 DHTML</option>


Di atas adalah kode-kode yang tampil dalam list menu

Kode ini juga tolong diperhatikan:

description[0]="DHTML: The Definitive Guide"
description[1]="DHTML Visual QuickStart Guide"
description[2]="HTML 4 and DHTML"
description[3]="IE5 DHTML Reference"


Di atas adalah kode-kode yang membentuk preview gambar.

0 komentar:

Posting Komentar

Setiap komentarmu akan sangat berarti sekali buat blog ini agar bisa menjadi lebih baik untuk kedepannya, trima kasih udh berkomentar di blog ini..

Tags

Music on

Blog Archive

Sponsor